@tanstack/vue-hotkeys 0.12.1 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/HotkeysProvider.d.ts +36 -6
- package/dist/HotkeysProvider.js +30 -8
- package/dist/HotkeysProviderContext.d.ts +44 -9
- package/dist/HotkeysProviderContext.js +36 -4
- package/dist/defaultOptions.js +24 -0
- package/dist/index.d.ts +5 -7
- package/dist/index.js +3 -5
- package/dist/useAppHotkeys.d.ts +43 -0
- package/dist/useAppHotkeys.js +64 -0
- package/dist/useHotkey.d.ts +36 -73
- package/dist/useHotkey.js +6 -133
- package/dist/useHotkeyHint.d.ts +6 -6
- package/dist/useHotkeyHint.js +13 -6
- package/dist/useHotkeyRecorder.d.ts +25 -44
- package/dist/useHotkeyRecorder.js +14 -59
- package/dist/useHotkeyRegistrations.d.ts +18 -17
- package/dist/useHotkeyRegistrations.js +18 -13
- package/dist/useHotkeys.d.ts +33 -44
- package/dist/useHotkeys.js +37 -119
- package/package.json +3 -3
- package/dist/useHotkeySequence.d.ts +0 -65
- package/dist/useHotkeySequence.js +0 -121
- package/dist/useHotkeySequenceRecorder.d.ts +0 -17
- package/dist/useHotkeySequenceRecorder.js +0 -44
- package/dist/useHotkeySequences.d.ts +0 -61
- package/dist/useHotkeySequences.js +0 -139
package/dist/useHotkeys.js
CHANGED
|
@@ -1,139 +1,57 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { useAppHotkeysStoreSource, useDefaultHotkeysOptionsSource } from "./defaultOptions.js";
|
|
2
|
+
import { onScopeDispose, toValue, watch } from "vue";
|
|
3
|
+
import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkeys/adapter";
|
|
4
4
|
|
|
5
5
|
//#region src/useHotkeys.ts
|
|
6
|
+
/** Resolves a ref or getter `enabled` so the core sees a boolean. */
|
|
7
|
+
function resolveEnabled(options) {
|
|
8
|
+
if (!options) return options;
|
|
9
|
+
const { enabled, ...rest } = options;
|
|
10
|
+
return enabled === void 0 ? rest : {
|
|
11
|
+
...rest,
|
|
12
|
+
enabled: toValue(enabled)
|
|
13
|
+
};
|
|
14
|
+
}
|
|
6
15
|
/**
|
|
7
|
-
* Vue composable for registering
|
|
8
|
-
*
|
|
9
|
-
* Uses the singleton HotkeyManager for efficient event handling.
|
|
10
|
-
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
11
|
-
* with variable-length lists.
|
|
12
|
-
*
|
|
13
|
-
* Options are merged in this order:
|
|
14
|
-
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
16
|
+
* Vue composable for registering several hotkeys at once: chords, sequences,
|
|
17
|
+
* and app hotkeys. The list, each hotkey, and options may be refs or getters.
|
|
15
18
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
19
|
+
* Options merge in this order: provider defaults, app hotkey declaration,
|
|
20
|
+
* commonOptions, per-hotkey options. Each option applies only to the kinds
|
|
21
|
+
* that support it. Unbound app hotkeys and empty sequences register nothing.
|
|
22
|
+
* A target that resolves to `null` skips registration until it is set.
|
|
18
23
|
*
|
|
19
24
|
* @example
|
|
20
|
-
* ```
|
|
21
|
-
* <script setup>
|
|
22
|
-
* import { useHotkeys } from '@tanstack/vue-hotkeys'
|
|
23
|
-
*
|
|
25
|
+
* ```ts
|
|
24
26
|
* useHotkeys([
|
|
25
27
|
* { hotkey: 'Mod+S', callback: () => save() },
|
|
26
|
-
* { hotkey: '
|
|
27
|
-
* { hotkey: 'Escape', callback: () => close() },
|
|
28
|
+
* { hotkey: ['G', 'G'], callback: () => scrollToTop(), options: { timeout: 500 } },
|
|
28
29
|
* ])
|
|
29
|
-
* <\/script>
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```vue
|
|
34
|
-
* <script setup>
|
|
35
|
-
* import { computed } from 'vue'
|
|
36
|
-
* import { useHotkeys } from '@tanstack/vue-hotkeys'
|
|
37
|
-
*
|
|
38
|
-
* const items = computed(() => [...])
|
|
39
|
-
* // Dynamic hotkeys from reactive data
|
|
40
|
-
* useHotkeys(
|
|
41
|
-
* () => items.value.map((item) => ({
|
|
42
|
-
* hotkey: item.shortcut,
|
|
43
|
-
* callback: item.action,
|
|
44
|
-
* options: { enabled: item.enabled },
|
|
45
|
-
* })),
|
|
46
|
-
* { preventDefault: true },
|
|
47
|
-
* )
|
|
48
|
-
* <\/script>
|
|
49
30
|
* ```
|
|
50
31
|
*/
|
|
51
32
|
function useHotkeys(hotkeys, commonOptions = {}) {
|
|
52
|
-
const defaultOptions =
|
|
53
|
-
const
|
|
54
|
-
const
|
|
33
|
+
const defaultOptions = useDefaultHotkeysOptionsSource();
|
|
34
|
+
const appHotkeys = useAppHotkeysStoreSource();
|
|
35
|
+
const bindings = createHotkeyBindings();
|
|
55
36
|
const stopWatcher = watch(() => {
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const hotkeyString = normalizeRegisterableHotkey(resolvedHotkey, platform);
|
|
68
|
-
const resolvedEnabled = mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled);
|
|
69
|
-
const resolvedTarget = mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target);
|
|
70
|
-
return {
|
|
71
|
-
index: i,
|
|
72
|
-
hotkeyString,
|
|
73
|
-
callback: def.callback,
|
|
74
|
-
mergedOptions,
|
|
75
|
-
resolvedEnabled,
|
|
76
|
-
resolvedTarget
|
|
77
|
-
};
|
|
37
|
+
appHotkeys.state.value;
|
|
38
|
+
const definitions = toValue(hotkeys).map((definition) => ({
|
|
39
|
+
hotkey: toValue(definition.hotkey),
|
|
40
|
+
callback: definition.callback,
|
|
41
|
+
options: resolveEnabled(toValue(definition.options))
|
|
42
|
+
}));
|
|
43
|
+
return prepareHotkeyDefinitions(definitions, {
|
|
44
|
+
appHotkeysStore: appHotkeys.store,
|
|
45
|
+
defaults: resolveEnabled(defaultOptions().hotkey),
|
|
46
|
+
commonOptions: resolveEnabled(toValue(commonOptions)),
|
|
47
|
+
resolveTarget: (target) => toValue(target)
|
|
78
48
|
});
|
|
79
|
-
}, (
|
|
80
|
-
|
|
81
|
-
const prepared = [];
|
|
82
|
-
for (const entry of resolved) {
|
|
83
|
-
const finalTarget = entry.resolvedTarget ?? (typeof document !== "undefined" ? document : null);
|
|
84
|
-
if (!finalTarget) continue;
|
|
85
|
-
const registrationKey = `${entry.index}:${entry.hotkeyString}`;
|
|
86
|
-
nextKeys.add(registrationKey);
|
|
87
|
-
prepared.push({
|
|
88
|
-
registrationKey,
|
|
89
|
-
entry,
|
|
90
|
-
finalTarget
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
for (const [key, record] of [...registrations.entries()]) if (!nextKeys.has(key)) {
|
|
94
|
-
if (record.handle.isActive) record.handle.unregister();
|
|
95
|
-
registrations.delete(key);
|
|
96
|
-
}
|
|
97
|
-
for (const { registrationKey, entry, finalTarget } of prepared) {
|
|
98
|
-
const existing = registrations.get(registrationKey);
|
|
99
|
-
if (existing?.handle.isActive && existing.target === finalTarget) {
|
|
100
|
-
existing.handle.callback = entry.callback;
|
|
101
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
102
|
-
const optionsWithoutTarget = {
|
|
103
|
-
...restOptions,
|
|
104
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
105
|
-
};
|
|
106
|
-
existing.handle.setOptions(optionsWithoutTarget);
|
|
107
|
-
continue;
|
|
108
|
-
}
|
|
109
|
-
if (existing) {
|
|
110
|
-
if (existing.handle.isActive) existing.handle.unregister();
|
|
111
|
-
registrations.delete(registrationKey);
|
|
112
|
-
}
|
|
113
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
114
|
-
const optionsWithoutTarget = {
|
|
115
|
-
...restOptions,
|
|
116
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
117
|
-
};
|
|
118
|
-
const handle = manager.register(entry.hotkeyString, entry.callback, {
|
|
119
|
-
...optionsWithoutTarget,
|
|
120
|
-
target: finalTarget
|
|
121
|
-
});
|
|
122
|
-
registrations.set(registrationKey, {
|
|
123
|
-
handle,
|
|
124
|
-
target: finalTarget
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
}, { immediate: true });
|
|
128
|
-
onUnmounted(() => {
|
|
49
|
+
}, (definitions) => bindings.update(definitions), { immediate: true });
|
|
50
|
+
onScopeDispose(() => {
|
|
129
51
|
stopWatcher();
|
|
130
|
-
|
|
131
|
-
registrations.clear();
|
|
52
|
+
bindings.destroy();
|
|
132
53
|
});
|
|
133
54
|
}
|
|
134
|
-
function resolveMaybeRefOrGetter(value) {
|
|
135
|
-
return typeof value === "function" ? value() : unref(value);
|
|
136
|
-
}
|
|
137
55
|
|
|
138
56
|
//#endregion
|
|
139
57
|
export { useHotkeys };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-hotkeys",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "Vue adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"dist"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@tanstack/hotkeys": "0.
|
|
40
|
-
"@tanstack/vue-store": "^0.11.
|
|
39
|
+
"@tanstack/hotkeys": "0.12.0",
|
|
40
|
+
"@tanstack/vue-store": "^0.11.2"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@vitejs/plugin-vue": "^6.0.9",
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { HotkeyCallback, HotkeySequence, SequenceOptions } from "@tanstack/hotkeys";
|
|
2
|
-
import { MaybeRefOrGetter } from "vue";
|
|
3
|
-
//#region src/useHotkeySequence.d.ts
|
|
4
|
-
export interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'target'> {
|
|
5
|
-
/**
|
|
6
|
-
* Whether the sequence is active.
|
|
7
|
-
* Can be a Ref, a getter function, or a boolean value.
|
|
8
|
-
* Defaults to true.
|
|
9
|
-
*/
|
|
10
|
-
enabled?: MaybeRefOrGetter<boolean>;
|
|
11
|
-
/**
|
|
12
|
-
* The DOM element to attach the event listener to.
|
|
13
|
-
* Can be a Ref, a getter function, direct DOM element, or null.
|
|
14
|
-
* Defaults to document.
|
|
15
|
-
*/
|
|
16
|
-
target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Vue composable for registering a keyboard shortcut sequence (Vim-style).
|
|
20
|
-
*
|
|
21
|
-
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
22
|
-
* that trigger when the full sequence is pressed within a timeout.
|
|
23
|
-
*
|
|
24
|
-
* Each step may include modifiers. You can chain the same modifier across
|
|
25
|
-
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
26
|
-
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
27
|
-
* advance the sequence or reset progress.
|
|
28
|
-
*
|
|
29
|
-
* @param sequence - Array of hotkey strings that form the sequence
|
|
30
|
-
* @param callback - Function to call when the sequence is completed
|
|
31
|
-
* @param options - Options for the sequence behavior
|
|
32
|
-
*
|
|
33
|
-
* @example
|
|
34
|
-
* ```vue
|
|
35
|
-
* <script setup>
|
|
36
|
-
* import { useHotkeySequence } from '@tanstack/vue-hotkeys'
|
|
37
|
-
*
|
|
38
|
-
* // 'g g' to go to top
|
|
39
|
-
* useHotkeySequence(['G', 'G'], () => {
|
|
40
|
-
* scrollToTop()
|
|
41
|
-
* })
|
|
42
|
-
*
|
|
43
|
-
* // 'd d' to delete line
|
|
44
|
-
* useHotkeySequence(['D', 'D'], () => {
|
|
45
|
-
* deleteLine()
|
|
46
|
-
* })
|
|
47
|
-
*
|
|
48
|
-
* // 'd i w' to delete inner word
|
|
49
|
-
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
50
|
-
* deleteInnerWord()
|
|
51
|
-
* }, { timeout: 500 })
|
|
52
|
-
*
|
|
53
|
-
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
54
|
-
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
55
|
-
* nextAction()
|
|
56
|
-
* })
|
|
57
|
-
* </script>
|
|
58
|
-
*
|
|
59
|
-
* <template>
|
|
60
|
-
* <div>...</div>
|
|
61
|
-
* </template>
|
|
62
|
-
* ```
|
|
63
|
-
*/
|
|
64
|
-
export declare function useHotkeySequence(sequence: MaybeRefOrGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeRefOrGetter<UseHotkeySequenceOptions>): void;
|
|
65
|
-
//#endregion
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
|
|
2
|
-
import { formatHotkeySequence, getSequenceManager } from "@tanstack/hotkeys";
|
|
3
|
-
import { onUnmounted, unref, watch } from "vue";
|
|
4
|
-
|
|
5
|
-
//#region src/useHotkeySequence.ts
|
|
6
|
-
/**
|
|
7
|
-
* Vue composable for registering a keyboard shortcut sequence (Vim-style).
|
|
8
|
-
*
|
|
9
|
-
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
10
|
-
* that trigger when the full sequence is pressed within a timeout.
|
|
11
|
-
*
|
|
12
|
-
* Each step may include modifiers. You can chain the same modifier across
|
|
13
|
-
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
14
|
-
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
15
|
-
* advance the sequence or reset progress.
|
|
16
|
-
*
|
|
17
|
-
* @param sequence - Array of hotkey strings that form the sequence
|
|
18
|
-
* @param callback - Function to call when the sequence is completed
|
|
19
|
-
* @param options - Options for the sequence behavior
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* ```vue
|
|
23
|
-
* <script setup>
|
|
24
|
-
* import { useHotkeySequence } from '@tanstack/vue-hotkeys'
|
|
25
|
-
*
|
|
26
|
-
* // 'g g' to go to top
|
|
27
|
-
* useHotkeySequence(['G', 'G'], () => {
|
|
28
|
-
* scrollToTop()
|
|
29
|
-
* })
|
|
30
|
-
*
|
|
31
|
-
* // 'd d' to delete line
|
|
32
|
-
* useHotkeySequence(['D', 'D'], () => {
|
|
33
|
-
* deleteLine()
|
|
34
|
-
* })
|
|
35
|
-
*
|
|
36
|
-
* // 'd i w' to delete inner word
|
|
37
|
-
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
38
|
-
* deleteInnerWord()
|
|
39
|
-
* }, { timeout: 500 })
|
|
40
|
-
*
|
|
41
|
-
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
42
|
-
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
43
|
-
* nextAction()
|
|
44
|
-
* })
|
|
45
|
-
* <\/script>
|
|
46
|
-
*
|
|
47
|
-
* <template>
|
|
48
|
-
* <div>...</div>
|
|
49
|
-
* </template>
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
|
-
function useHotkeySequence(sequence, callback, options = {}) {
|
|
53
|
-
const defaultOptions = useDefaultHotkeysOptions();
|
|
54
|
-
const manager = getSequenceManager();
|
|
55
|
-
let registration = null;
|
|
56
|
-
let lastSequenceKey = null;
|
|
57
|
-
let lastTarget = null;
|
|
58
|
-
const stopWatcher = watch(() => {
|
|
59
|
-
const resolvedSequence = resolveMaybeRefOrGetter(sequence);
|
|
60
|
-
const resolvedOptions = resolveMaybeRefOrGetter(options);
|
|
61
|
-
const mergedOptions = {
|
|
62
|
-
...defaultOptions.hotkeySequence,
|
|
63
|
-
...resolvedOptions
|
|
64
|
-
};
|
|
65
|
-
return {
|
|
66
|
-
resolvedSequence,
|
|
67
|
-
mergedOptions,
|
|
68
|
-
resolvedEnabled: mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled),
|
|
69
|
-
resolvedTarget: mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target)
|
|
70
|
-
};
|
|
71
|
-
}, ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {
|
|
72
|
-
const finalTarget = resolvedTarget === void 0 ? typeof document !== "undefined" ? document : null : resolvedTarget;
|
|
73
|
-
if (resolvedSequence.length === 0 || !finalTarget) {
|
|
74
|
-
if (registration?.isActive) {
|
|
75
|
-
registration.unregister();
|
|
76
|
-
registration = null;
|
|
77
|
-
}
|
|
78
|
-
lastSequenceKey = null;
|
|
79
|
-
lastTarget = null;
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
const sequenceKey = formatHotkeySequence(resolvedSequence);
|
|
83
|
-
const { target: _target, enabled: _enabled, ...restOptions } = mergedOptions;
|
|
84
|
-
const optionsWithoutTarget = {
|
|
85
|
-
...restOptions,
|
|
86
|
-
...resolvedEnabled === void 0 ? {} : { enabled: resolvedEnabled }
|
|
87
|
-
};
|
|
88
|
-
if (registration?.isActive && lastSequenceKey === sequenceKey && lastTarget === finalTarget) {
|
|
89
|
-
registration.callback = callback;
|
|
90
|
-
registration.setOptions(optionsWithoutTarget);
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
if (registration?.isActive) {
|
|
94
|
-
registration.unregister();
|
|
95
|
-
registration = null;
|
|
96
|
-
}
|
|
97
|
-
registration = manager.register(resolvedSequence, callback, {
|
|
98
|
-
...optionsWithoutTarget,
|
|
99
|
-
target: finalTarget
|
|
100
|
-
});
|
|
101
|
-
if (registration.isActive) {
|
|
102
|
-
registration.callback = callback;
|
|
103
|
-
registration.setOptions(optionsWithoutTarget);
|
|
104
|
-
}
|
|
105
|
-
lastSequenceKey = sequenceKey;
|
|
106
|
-
lastTarget = finalTarget;
|
|
107
|
-
}, { immediate: true });
|
|
108
|
-
onUnmounted(() => {
|
|
109
|
-
stopWatcher();
|
|
110
|
-
if (registration?.isActive) {
|
|
111
|
-
registration.unregister();
|
|
112
|
-
registration = null;
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
function resolveMaybeRefOrGetter(value) {
|
|
117
|
-
return typeof value === "function" ? value() : unref(value);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
//#endregion
|
|
121
|
-
export { useHotkeySequence };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
2
|
-
import { MaybeRefOrGetter, Ref } from "vue";
|
|
3
|
-
//#region src/useHotkeySequenceRecorder.d.ts
|
|
4
|
-
export interface VueHotkeySequenceRecorder {
|
|
5
|
-
isRecording: Ref<boolean>;
|
|
6
|
-
steps: Ref<HotkeySequence>;
|
|
7
|
-
recordedSequence: Ref<HotkeySequence | null>;
|
|
8
|
-
startRecording: () => void;
|
|
9
|
-
stopRecording: () => void;
|
|
10
|
-
cancelRecording: () => void;
|
|
11
|
-
commitRecording: () => void;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Vue composable for recording multi-chord sequences (Vim-style shortcuts).
|
|
15
|
-
*/
|
|
16
|
-
export declare function useHotkeySequenceRecorder(options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>): VueHotkeySequenceRecorder;
|
|
17
|
-
//#endregion
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
|
|
2
|
-
import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
|
|
3
|
-
import { onUnmounted, unref, watch } from "vue";
|
|
4
|
-
import { useSelector } from "@tanstack/vue-store";
|
|
5
|
-
|
|
6
|
-
//#region src/useHotkeySequenceRecorder.ts
|
|
7
|
-
/**
|
|
8
|
-
* Vue composable for recording multi-chord sequences (Vim-style shortcuts).
|
|
9
|
-
*/
|
|
10
|
-
function useHotkeySequenceRecorder(options) {
|
|
11
|
-
const defaultOptions = useDefaultHotkeysOptions();
|
|
12
|
-
const recorder = new HotkeySequenceRecorder(resolveHotkeySequenceRecorderOptions(options, defaultOptions));
|
|
13
|
-
const isRecording = useSelector(recorder.store, (state) => state.isRecording);
|
|
14
|
-
const steps = useSelector(recorder.store, (state) => state.steps);
|
|
15
|
-
const recordedSequence = useSelector(recorder.store, (state) => state.recordedSequence);
|
|
16
|
-
const stopWatcher = watch(() => resolveHotkeySequenceRecorderOptions(options, defaultOptions), (resolvedOptions) => {
|
|
17
|
-
recorder.setOptions(resolvedOptions);
|
|
18
|
-
}, { immediate: true });
|
|
19
|
-
onUnmounted(() => {
|
|
20
|
-
stopWatcher();
|
|
21
|
-
recorder.destroy();
|
|
22
|
-
});
|
|
23
|
-
return {
|
|
24
|
-
isRecording,
|
|
25
|
-
steps,
|
|
26
|
-
recordedSequence,
|
|
27
|
-
startRecording: () => recorder.start(),
|
|
28
|
-
stopRecording: () => recorder.stop(),
|
|
29
|
-
cancelRecording: () => recorder.cancel(),
|
|
30
|
-
commitRecording: () => recorder.commit()
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
function resolveHotkeySequenceRecorderOptions(options, defaultOptions) {
|
|
34
|
-
return {
|
|
35
|
-
...defaultOptions.hotkeySequenceRecorder,
|
|
36
|
-
...resolveMaybeRefOrGetter(options)
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
function resolveMaybeRefOrGetter(value) {
|
|
40
|
-
return typeof value === "function" ? value() : unref(value);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
//#endregion
|
|
44
|
-
export { useHotkeySequenceRecorder };
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { UseHotkeySequenceOptions } from "./useHotkeySequence.js";
|
|
2
|
-
import { HotkeyCallback, HotkeySequence } from "@tanstack/hotkeys";
|
|
3
|
-
import { MaybeRefOrGetter } from "vue";
|
|
4
|
-
//#region src/useHotkeySequences.d.ts
|
|
5
|
-
/**
|
|
6
|
-
* A single sequence definition for use with `useHotkeySequences`.
|
|
7
|
-
*/
|
|
8
|
-
export interface UseHotkeySequenceDefinition {
|
|
9
|
-
/** Array of hotkey strings that form the sequence */
|
|
10
|
-
sequence: MaybeRefOrGetter<HotkeySequence>;
|
|
11
|
-
/** The function to call when the sequence is completed */
|
|
12
|
-
callback: HotkeyCallback;
|
|
13
|
-
/** Per-sequence options (merged on top of commonOptions) */
|
|
14
|
-
options?: MaybeRefOrGetter<UseHotkeySequenceOptions>;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Vue composable for registering multiple keyboard shortcut sequences at once (Vim-style).
|
|
18
|
-
*
|
|
19
|
-
* Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or a getter/ref
|
|
20
|
-
* that returns one, so you can register variable-length lists safely.
|
|
21
|
-
*
|
|
22
|
-
* Options are merged in this order:
|
|
23
|
-
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
24
|
-
*
|
|
25
|
-
* Definitions with an empty `sequence` are skipped (no registration).
|
|
26
|
-
*
|
|
27
|
-
* @param definitions - Array of sequence definitions, or a getter/ref
|
|
28
|
-
* @param commonOptions - Shared options applied to all sequences (overridden by per-definition options)
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```vue
|
|
32
|
-
* <script setup>
|
|
33
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
34
|
-
*
|
|
35
|
-
* useHotkeySequences([
|
|
36
|
-
* { sequence: ['G', 'G'], callback: () => scrollToTop() },
|
|
37
|
-
* { sequence: ['D', 'D'], callback: () => deleteLine() },
|
|
38
|
-
* ])
|
|
39
|
-
* </script>
|
|
40
|
-
* ```
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```vue
|
|
44
|
-
* <script setup>
|
|
45
|
-
* import { computed } from 'vue'
|
|
46
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
47
|
-
*
|
|
48
|
-
* const items = computed(() => [...])
|
|
49
|
-
* useHotkeySequences(
|
|
50
|
-
* () => items.value.map((item) => ({
|
|
51
|
-
* sequence: item.chords,
|
|
52
|
-
* callback: item.action,
|
|
53
|
-
* options: { enabled: item.enabled },
|
|
54
|
-
* })),
|
|
55
|
-
* { preventDefault: true },
|
|
56
|
-
* )
|
|
57
|
-
* </script>
|
|
58
|
-
* ```
|
|
59
|
-
*/
|
|
60
|
-
export declare function useHotkeySequences(definitions: MaybeRefOrGetter<Array<UseHotkeySequenceDefinition>>, commonOptions?: MaybeRefOrGetter<UseHotkeySequenceOptions>): void;
|
|
61
|
-
//#endregion
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
|
|
2
|
-
import { formatHotkeySequence, getSequenceManager } from "@tanstack/hotkeys";
|
|
3
|
-
import { onUnmounted, unref, watch } from "vue";
|
|
4
|
-
|
|
5
|
-
//#region src/useHotkeySequences.ts
|
|
6
|
-
/**
|
|
7
|
-
* Vue composable for registering multiple keyboard shortcut sequences at once (Vim-style).
|
|
8
|
-
*
|
|
9
|
-
* Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or a getter/ref
|
|
10
|
-
* that returns one, so you can register variable-length lists safely.
|
|
11
|
-
*
|
|
12
|
-
* Options are merged in this order:
|
|
13
|
-
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
14
|
-
*
|
|
15
|
-
* Definitions with an empty `sequence` are skipped (no registration).
|
|
16
|
-
*
|
|
17
|
-
* @param definitions - Array of sequence definitions, or a getter/ref
|
|
18
|
-
* @param commonOptions - Shared options applied to all sequences (overridden by per-definition options)
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```vue
|
|
22
|
-
* <script setup>
|
|
23
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
24
|
-
*
|
|
25
|
-
* useHotkeySequences([
|
|
26
|
-
* { sequence: ['G', 'G'], callback: () => scrollToTop() },
|
|
27
|
-
* { sequence: ['D', 'D'], callback: () => deleteLine() },
|
|
28
|
-
* ])
|
|
29
|
-
* <\/script>
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```vue
|
|
34
|
-
* <script setup>
|
|
35
|
-
* import { computed } from 'vue'
|
|
36
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
37
|
-
*
|
|
38
|
-
* const items = computed(() => [...])
|
|
39
|
-
* useHotkeySequences(
|
|
40
|
-
* () => items.value.map((item) => ({
|
|
41
|
-
* sequence: item.chords,
|
|
42
|
-
* callback: item.action,
|
|
43
|
-
* options: { enabled: item.enabled },
|
|
44
|
-
* })),
|
|
45
|
-
* { preventDefault: true },
|
|
46
|
-
* )
|
|
47
|
-
* <\/script>
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
function useHotkeySequences(definitions, commonOptions = {}) {
|
|
51
|
-
const defaultOptions = useDefaultHotkeysOptions();
|
|
52
|
-
const manager = getSequenceManager();
|
|
53
|
-
const registrations = /* @__PURE__ */ new Map();
|
|
54
|
-
const stopWatcher = watch(() => {
|
|
55
|
-
const resolvedDefinitions = resolveMaybeRefOrGetter(definitions);
|
|
56
|
-
const resolvedCommonOptions = resolveMaybeRefOrGetter(commonOptions);
|
|
57
|
-
return resolvedDefinitions.map((def, i) => {
|
|
58
|
-
const resolvedSequence = resolveMaybeRefOrGetter(def.sequence);
|
|
59
|
-
const resolvedDefOptions = def.options ? resolveMaybeRefOrGetter(def.options) : {};
|
|
60
|
-
const mergedOptions = {
|
|
61
|
-
...defaultOptions.hotkeySequence,
|
|
62
|
-
...resolvedCommonOptions,
|
|
63
|
-
...resolvedDefOptions
|
|
64
|
-
};
|
|
65
|
-
const sequenceString = formatHotkeySequence(resolvedSequence);
|
|
66
|
-
const resolvedEnabled = mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled);
|
|
67
|
-
const resolvedTarget = mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target);
|
|
68
|
-
return {
|
|
69
|
-
index: i,
|
|
70
|
-
resolvedSequence,
|
|
71
|
-
sequenceString,
|
|
72
|
-
callback: def.callback,
|
|
73
|
-
mergedOptions,
|
|
74
|
-
resolvedEnabled,
|
|
75
|
-
resolvedTarget
|
|
76
|
-
};
|
|
77
|
-
});
|
|
78
|
-
}, (resolved) => {
|
|
79
|
-
const nextKeys = /* @__PURE__ */ new Set();
|
|
80
|
-
const prepared = [];
|
|
81
|
-
for (const entry of resolved) {
|
|
82
|
-
if (entry.resolvedSequence.length === 0) continue;
|
|
83
|
-
const finalTarget = entry.resolvedTarget ?? (typeof document !== "undefined" ? document : null);
|
|
84
|
-
if (!finalTarget) continue;
|
|
85
|
-
const registrationKey = `${entry.index}:${entry.sequenceString}`;
|
|
86
|
-
nextKeys.add(registrationKey);
|
|
87
|
-
prepared.push({
|
|
88
|
-
registrationKey,
|
|
89
|
-
entry,
|
|
90
|
-
finalTarget
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
for (const [key, record] of [...registrations.entries()]) if (!nextKeys.has(key)) {
|
|
94
|
-
if (record.handle.isActive) record.handle.unregister();
|
|
95
|
-
registrations.delete(key);
|
|
96
|
-
}
|
|
97
|
-
for (const { registrationKey, entry, finalTarget } of prepared) {
|
|
98
|
-
const existing = registrations.get(registrationKey);
|
|
99
|
-
if (existing?.handle.isActive && existing.target === finalTarget) {
|
|
100
|
-
existing.handle.callback = entry.callback;
|
|
101
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
102
|
-
const optionsWithoutTarget = {
|
|
103
|
-
...restOptions,
|
|
104
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
105
|
-
};
|
|
106
|
-
existing.handle.setOptions(optionsWithoutTarget);
|
|
107
|
-
continue;
|
|
108
|
-
}
|
|
109
|
-
if (existing) {
|
|
110
|
-
if (existing.handle.isActive) existing.handle.unregister();
|
|
111
|
-
registrations.delete(registrationKey);
|
|
112
|
-
}
|
|
113
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
114
|
-
const optionsWithoutTarget = {
|
|
115
|
-
...restOptions,
|
|
116
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
117
|
-
};
|
|
118
|
-
const handle = manager.register(entry.resolvedSequence, entry.callback, {
|
|
119
|
-
...optionsWithoutTarget,
|
|
120
|
-
target: finalTarget
|
|
121
|
-
});
|
|
122
|
-
registrations.set(registrationKey, {
|
|
123
|
-
handle,
|
|
124
|
-
target: finalTarget
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
}, { immediate: true });
|
|
128
|
-
onUnmounted(() => {
|
|
129
|
-
stopWatcher();
|
|
130
|
-
for (const { handle } of registrations.values()) if (handle.isActive) handle.unregister();
|
|
131
|
-
registrations.clear();
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
function resolveMaybeRefOrGetter(value) {
|
|
135
|
-
return typeof value === "function" ? value() : unref(value);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
//#endregion
|
|
139
|
-
export { useHotkeySequences };
|