@tanstack/vue-hotkeys 0.5.0 → 0.5.1
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/dist/useHotkeySequence.cjs +10 -0
- package/dist/useHotkeySequence.cjs.map +1 -1
- package/dist/useHotkeySequence.d.cts +10 -0
- package/dist/useHotkeySequence.d.ts +10 -0
- package/dist/useHotkeySequence.js +10 -0
- package/dist/useHotkeySequence.js.map +1 -1
- package/package.json +2 -2
- package/src/useHotkeySequence.ts +10 -0
|
@@ -9,6 +9,11 @@ let vue = require("vue");
|
|
|
9
9
|
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
10
10
|
* that trigger when the full sequence is pressed within a timeout.
|
|
11
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
|
+
*
|
|
12
17
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
13
18
|
* @param callback - Function to call when the sequence is completed
|
|
14
19
|
* @param options - Options for the sequence behavior
|
|
@@ -32,6 +37,11 @@ let vue = require("vue");
|
|
|
32
37
|
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
33
38
|
* deleteInnerWord()
|
|
34
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
|
+
* })
|
|
35
45
|
* <\/script>
|
|
36
46
|
*
|
|
37
47
|
* <template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'enabled' | 'target'\n> {\n /**\n * Whether the sequence is active.\n * Can be a Ref, a getter function, or a boolean value.\n * Defaults to true.\n */\n enabled?: MaybeRefOrGetter<boolean>\n /**\n * The DOM element to attach the event listener to.\n * Can be a Ref, a getter function, direct DOM element, or null.\n * Defaults to document.\n */\n target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n * </script>\n *\n * <template>\n * <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n sequence: MaybeRefOrGetter<HotkeySequence>,\n callback: HotkeyCallback,\n options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getSequenceManager()\n\n let registration: SequenceRegistrationHandle | null = null\n\n // Watch for changes to reactive dependencies\n const stopWatcher = watch(\n () => {\n const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n const resolvedOptions = resolveMaybeRefOrGetter(options)\n const mergedOptions = {\n ...defaultOptions.hotkeySequence,\n ...resolvedOptions,\n } as UseHotkeySequenceOptions\n const resolvedEnabled =\n mergedOptions.enabled === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.enabled)\n const resolvedTarget =\n mergedOptions.target === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.target)\n\n return {\n resolvedSequence,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n },\n ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n if (resolvedEnabled === false || resolvedSequence.length === 0) {\n return\n }\n\n // Resolve target\n const finalTarget =\n resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n return\n }\n\n // Unregister previous registration if it exists\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n\n // Extract options without target (target is handled separately)\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n }\n\n // Register the sequence\n registration = manager.register(resolvedSequence, callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n\n // Update callback and options\n if (registration.isActive) {\n registration.callback = callback\n registration.setOptions(optionsWithoutTarget)\n }\n },\n { immediate: true },\n )\n\n // Cleanup on unmount\n onUnmounted(() => {\n stopWatcher()\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'enabled' | 'target'\n> {\n /**\n * Whether the sequence is active.\n * Can be a Ref, a getter function, or a boolean value.\n * Defaults to true.\n */\n enabled?: MaybeRefOrGetter<boolean>\n /**\n * The DOM element to attach the event listener to.\n * Can be a Ref, a getter function, direct DOM element, or null.\n * Defaults to document.\n */\n target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * // Same modifier on consecutive steps (bare Shift between chords is ignored)\n * useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n * nextAction()\n * })\n * </script>\n *\n * <template>\n * <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n sequence: MaybeRefOrGetter<HotkeySequence>,\n callback: HotkeyCallback,\n options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getSequenceManager()\n\n let registration: SequenceRegistrationHandle | null = null\n\n // Watch for changes to reactive dependencies\n const stopWatcher = watch(\n () => {\n const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n const resolvedOptions = resolveMaybeRefOrGetter(options)\n const mergedOptions = {\n ...defaultOptions.hotkeySequence,\n ...resolvedOptions,\n } as UseHotkeySequenceOptions\n const resolvedEnabled =\n mergedOptions.enabled === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.enabled)\n const resolvedTarget =\n mergedOptions.target === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.target)\n\n return {\n resolvedSequence,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n },\n ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n if (resolvedEnabled === false || resolvedSequence.length === 0) {\n return\n }\n\n // Resolve target\n const finalTarget =\n resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n return\n }\n\n // Unregister previous registration if it exists\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n\n // Extract options without target (target is handled separately)\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n }\n\n // Register the sequence\n registration = manager.register(resolvedSequence, callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n\n // Update callback and options\n if (registration.isActive) {\n registration.callback = callback\n registration.setOptions(optionsWithoutTarget)\n }\n },\n { immediate: true },\n )\n\n // Cleanup on unmount\n onUnmounted(() => {\n stopWatcher()\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,kBACd,UACA,UACA,UAAsD,EAAE,EAClD;CACN,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,qDAA8B;CAEpC,IAAI,eAAkD;CAGtD,MAAM,mCACE;EACJ,MAAM,mBAAmB,wBAAwB,SAAS;EAC1D,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,gBAAgB;GACpB,GAAG,eAAe;GAClB,GAAG;GACJ;AAUD,SAAO;GACL;GACA;GACA,iBAXA,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GAUlD,gBARA,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAO;GAOlD;KAEF,EAAE,kBAAkB,eAAe,iBAAiB,qBAAqB;AACxE,MAAI,oBAAoB,SAAS,iBAAiB,WAAW,EAC3D;EAIF,MAAM,cACJ,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAElE,MAAI,CAAC,YACH;AAIF,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;EAIjB,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD;EACJ,MAAM,uBAAuB;GAC3B,GAAG;GACH,GAAI,oBAAoB,SAAY,EAAE,GAAG,EAAE,SAAS,iBAAiB;GACtE;AAGD,iBAAe,QAAQ,SAAS,kBAAkB,UAAU;GAC1D,GAAG;GACH,QAAQ;GACT,CAAC;AAGF,MAAI,aAAa,UAAU;AACzB,gBAAa,WAAW;AACxB,gBAAa,WAAW,qBAAqB;;IAGjD,EAAE,WAAW,MAAM,CACpB;AAGD,4BAAkB;AAChB,eAAa;AACb,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;GAEjB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}
|
|
@@ -22,6 +22,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'ta
|
|
|
22
22
|
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
23
23
|
* that trigger when the full sequence is pressed within a timeout.
|
|
24
24
|
*
|
|
25
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
26
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
27
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
28
|
+
* advance the sequence or reset progress.
|
|
29
|
+
*
|
|
25
30
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
26
31
|
* @param callback - Function to call when the sequence is completed
|
|
27
32
|
* @param options - Options for the sequence behavior
|
|
@@ -45,6 +50,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'ta
|
|
|
45
50
|
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
46
51
|
* deleteInnerWord()
|
|
47
52
|
* }, { timeout: 500 })
|
|
53
|
+
*
|
|
54
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
55
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
56
|
+
* nextAction()
|
|
57
|
+
* })
|
|
48
58
|
* </script>
|
|
49
59
|
*
|
|
50
60
|
* <template>
|
|
@@ -22,6 +22,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'ta
|
|
|
22
22
|
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
23
23
|
* that trigger when the full sequence is pressed within a timeout.
|
|
24
24
|
*
|
|
25
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
26
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
27
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
28
|
+
* advance the sequence or reset progress.
|
|
29
|
+
*
|
|
25
30
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
26
31
|
* @param callback - Function to call when the sequence is completed
|
|
27
32
|
* @param options - Options for the sequence behavior
|
|
@@ -45,6 +50,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'ta
|
|
|
45
50
|
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
46
51
|
* deleteInnerWord()
|
|
47
52
|
* }, { timeout: 500 })
|
|
53
|
+
*
|
|
54
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
55
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
56
|
+
* nextAction()
|
|
57
|
+
* })
|
|
48
58
|
* </script>
|
|
49
59
|
*
|
|
50
60
|
* <template>
|
|
@@ -9,6 +9,11 @@ import { onUnmounted, unref, watch } from "vue";
|
|
|
9
9
|
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
10
10
|
* that trigger when the full sequence is pressed within a timeout.
|
|
11
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
|
+
*
|
|
12
17
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
13
18
|
* @param callback - Function to call when the sequence is completed
|
|
14
19
|
* @param options - Options for the sequence behavior
|
|
@@ -32,6 +37,11 @@ import { onUnmounted, unref, watch } from "vue";
|
|
|
32
37
|
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
33
38
|
* deleteInnerWord()
|
|
34
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
|
+
* })
|
|
35
45
|
* <\/script>
|
|
36
46
|
*
|
|
37
47
|
* <template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'enabled' | 'target'\n> {\n /**\n * Whether the sequence is active.\n * Can be a Ref, a getter function, or a boolean value.\n * Defaults to true.\n */\n enabled?: MaybeRefOrGetter<boolean>\n /**\n * The DOM element to attach the event listener to.\n * Can be a Ref, a getter function, direct DOM element, or null.\n * Defaults to document.\n */\n target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n * </script>\n *\n * <template>\n * <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n sequence: MaybeRefOrGetter<HotkeySequence>,\n callback: HotkeyCallback,\n options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getSequenceManager()\n\n let registration: SequenceRegistrationHandle | null = null\n\n // Watch for changes to reactive dependencies\n const stopWatcher = watch(\n () => {\n const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n const resolvedOptions = resolveMaybeRefOrGetter(options)\n const mergedOptions = {\n ...defaultOptions.hotkeySequence,\n ...resolvedOptions,\n } as UseHotkeySequenceOptions\n const resolvedEnabled =\n mergedOptions.enabled === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.enabled)\n const resolvedTarget =\n mergedOptions.target === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.target)\n\n return {\n resolvedSequence,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n },\n ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n if (resolvedEnabled === false || resolvedSequence.length === 0) {\n return\n }\n\n // Resolve target\n const finalTarget =\n resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n return\n }\n\n // Unregister previous registration if it exists\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n\n // Extract options without target (target is handled separately)\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n }\n\n // Register the sequence\n registration = manager.register(resolvedSequence, callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n\n // Update callback and options\n if (registration.isActive) {\n registration.callback = callback\n registration.setOptions(optionsWithoutTarget)\n }\n },\n { immediate: true },\n )\n\n // Cleanup on unmount\n onUnmounted(() => {\n stopWatcher()\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'enabled' | 'target'\n> {\n /**\n * Whether the sequence is active.\n * Can be a Ref, a getter function, or a boolean value.\n * Defaults to true.\n */\n enabled?: MaybeRefOrGetter<boolean>\n /**\n * The DOM element to attach the event listener to.\n * Can be a Ref, a getter function, direct DOM element, or null.\n * Defaults to document.\n */\n target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * // Same modifier on consecutive steps (bare Shift between chords is ignored)\n * useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n * nextAction()\n * })\n * </script>\n *\n * <template>\n * <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n sequence: MaybeRefOrGetter<HotkeySequence>,\n callback: HotkeyCallback,\n options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getSequenceManager()\n\n let registration: SequenceRegistrationHandle | null = null\n\n // Watch for changes to reactive dependencies\n const stopWatcher = watch(\n () => {\n const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n const resolvedOptions = resolveMaybeRefOrGetter(options)\n const mergedOptions = {\n ...defaultOptions.hotkeySequence,\n ...resolvedOptions,\n } as UseHotkeySequenceOptions\n const resolvedEnabled =\n mergedOptions.enabled === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.enabled)\n const resolvedTarget =\n mergedOptions.target === undefined\n ? undefined\n : resolveMaybeRefOrGetter(mergedOptions.target)\n\n return {\n resolvedSequence,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n },\n ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n if (resolvedEnabled === false || resolvedSequence.length === 0) {\n return\n }\n\n // Resolve target\n const finalTarget =\n resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n return\n }\n\n // Unregister previous registration if it exists\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n\n // Extract options without target (target is handled separately)\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n }\n\n // Register the sequence\n registration = manager.register(resolvedSequence, callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n\n // Update callback and options\n if (registration.isActive) {\n registration.callback = callback\n registration.setOptions(optionsWithoutTarget)\n }\n },\n { immediate: true },\n )\n\n // Cleanup on unmount\n onUnmounted(() => {\n stopWatcher()\n if (registration?.isActive) {\n registration.unregister()\n registration = null\n }\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,kBACd,UACA,UACA,UAAsD,EAAE,EAClD;CACN,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,UAAU,oBAAoB;CAEpC,IAAI,eAAkD;CAGtD,MAAM,cAAc,YACZ;EACJ,MAAM,mBAAmB,wBAAwB,SAAS;EAC1D,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,gBAAgB;GACpB,GAAG,eAAe;GAClB,GAAG;GACJ;AAUD,SAAO;GACL;GACA;GACA,iBAXA,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GAUlD,gBARA,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAO;GAOlD;KAEF,EAAE,kBAAkB,eAAe,iBAAiB,qBAAqB;AACxE,MAAI,oBAAoB,SAAS,iBAAiB,WAAW,EAC3D;EAIF,MAAM,cACJ,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAElE,MAAI,CAAC,YACH;AAIF,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;EAIjB,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD;EACJ,MAAM,uBAAuB;GAC3B,GAAG;GACH,GAAI,oBAAoB,SAAY,EAAE,GAAG,EAAE,SAAS,iBAAiB;GACtE;AAGD,iBAAe,QAAQ,SAAS,kBAAkB,UAAU;GAC1D,GAAG;GACH,QAAQ;GACT,CAAC;AAGF,MAAI,aAAa,UAAU;AACzB,gBAAa,WAAW;AACxB,gBAAa,WAAW,qBAAqB;;IAGjD,EAAE,WAAW,MAAM,CACpB;AAGD,mBAAkB;AAChB,eAAa;AACb,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;GAEjB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-hotkeys",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Vue adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@tanstack/vue-store": "^0.9.2",
|
|
46
|
-
"@tanstack/hotkeys": "0.4.
|
|
46
|
+
"@tanstack/hotkeys": "0.4.3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@vitejs/plugin-vue": "^6.0.5",
|
package/src/useHotkeySequence.ts
CHANGED
|
@@ -33,6 +33,11 @@ export interface UseHotkeySequenceOptions extends Omit<
|
|
|
33
33
|
* This composable allows you to register multi-key sequences like 'g g' or 'd d'
|
|
34
34
|
* that trigger when the full sequence is pressed within a timeout.
|
|
35
35
|
*
|
|
36
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
37
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
38
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
39
|
+
* advance the sequence or reset progress.
|
|
40
|
+
*
|
|
36
41
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
37
42
|
* @param callback - Function to call when the sequence is completed
|
|
38
43
|
* @param options - Options for the sequence behavior
|
|
@@ -56,6 +61,11 @@ export interface UseHotkeySequenceOptions extends Omit<
|
|
|
56
61
|
* useHotkeySequence(['D', 'I', 'W'], () => {
|
|
57
62
|
* deleteInnerWord()
|
|
58
63
|
* }, { timeout: 500 })
|
|
64
|
+
*
|
|
65
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
66
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
67
|
+
* nextAction()
|
|
68
|
+
* })
|
|
59
69
|
* </script>
|
|
60
70
|
*
|
|
61
71
|
* <template>
|