@tanstack/vue-hotkeys 0.5.0 → 0.6.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/dist/HotkeysProviderContext.cjs.map +1 -1
- package/dist/HotkeysProviderContext.d.cts +2 -1
- package/dist/HotkeysProviderContext.d.ts +2 -1
- package/dist/HotkeysProviderContext.js.map +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- 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/dist/useHotkeySequenceRecorder.cjs +45 -0
- package/dist/useHotkeySequenceRecorder.cjs.map +1 -0
- package/dist/useHotkeySequenceRecorder.d.cts +20 -0
- package/dist/useHotkeySequenceRecorder.d.ts +20 -0
- package/dist/useHotkeySequenceRecorder.js +45 -0
- package/dist/useHotkeySequenceRecorder.js.map +1 -0
- package/package.json +2 -2
- package/src/HotkeysProviderContext.ts +5 -1
- package/src/index.ts +1 -0
- package/src/useHotkeySequence.ts +10 -0
- package/src/useHotkeySequenceRecorder.ts +75 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProviderContext.cjs","names":[],"sources":["../src/HotkeysProviderContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { InjectionKey } from 'vue'\nimport type {
|
|
1
|
+
{"version":3,"file":"HotkeysProviderContext.cjs","names":[],"sources":["../src/HotkeysProviderContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { InjectionKey } from 'vue'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext: InjectionKey<HotkeysContextValue> =\n Symbol('HotkeysContext')\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function provideHotkeysContext(defaultOptions?: HotkeysProviderOptions) {\n const contextValue: HotkeysContextValue = {\n defaultOptions: defaultOptions ?? DEFAULT_OPTIONS,\n }\n\n provide(HotkeysContext, contextValue)\n}\n\nexport function useHotkeysContext() {\n return inject(HotkeysContext, null)\n}\n\nexport function useDefaultHotkeysOptions() {\n const context = inject(HotkeysContext, null)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;AAoBA,MAAM,iBACJ,OAAO,iBAAiB;AAE1B,MAAM,kBAA0C,EAAE;AAElD,SAAgB,sBAAsB,gBAAyC;AAK7E,kBAAQ,gBAJkC,EACxC,gBAAgB,kBAAkB,iBACnC,CAEoC;;AAGvC,SAAgB,oBAAoB;AAClC,wBAAc,gBAAgB,KAAK;;AAGrC,SAAgB,2BAA2B;AAEzC,wBADuB,gBAAgB,KAAK,EAC5B,kBAAkB,EAAE"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { UseHotkeyOptions } from "./useHotkey.cjs";
|
|
2
2
|
import { UseHotkeySequenceOptions } from "./useHotkeySequence.cjs";
|
|
3
|
-
import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
|
|
3
|
+
import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
4
4
|
|
|
5
5
|
//#region src/HotkeysProviderContext.d.ts
|
|
6
6
|
interface HotkeysProviderOptions {
|
|
7
7
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
8
8
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
9
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
9
10
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
10
11
|
}
|
|
11
12
|
interface HotkeysContextValue {
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { UseHotkeyOptions } from "./useHotkey.js";
|
|
2
2
|
import { UseHotkeySequenceOptions } from "./useHotkeySequence.js";
|
|
3
|
-
import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
|
|
3
|
+
import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
4
4
|
|
|
5
5
|
//#region src/HotkeysProviderContext.d.ts
|
|
6
6
|
interface HotkeysProviderOptions {
|
|
7
7
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
8
8
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
9
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
9
10
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
10
11
|
}
|
|
11
12
|
interface HotkeysContextValue {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProviderContext.js","names":[],"sources":["../src/HotkeysProviderContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { InjectionKey } from 'vue'\nimport type {
|
|
1
|
+
{"version":3,"file":"HotkeysProviderContext.js","names":[],"sources":["../src/HotkeysProviderContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { InjectionKey } from 'vue'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext: InjectionKey<HotkeysContextValue> =\n Symbol('HotkeysContext')\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function provideHotkeysContext(defaultOptions?: HotkeysProviderOptions) {\n const contextValue: HotkeysContextValue = {\n defaultOptions: defaultOptions ?? DEFAULT_OPTIONS,\n }\n\n provide(HotkeysContext, contextValue)\n}\n\nexport function useHotkeysContext() {\n return inject(HotkeysContext, null)\n}\n\nexport function useDefaultHotkeysOptions() {\n const context = inject(HotkeysContext, null)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;AAoBA,MAAM,iBACJ,OAAO,iBAAiB;AAE1B,MAAM,kBAA0C,EAAE;AAElD,SAAgB,sBAAsB,gBAAyC;AAK7E,SAAQ,gBAJkC,EACxC,gBAAgB,kBAAkB,iBACnC,CAEoC;;AAGvC,SAAgB,oBAAoB;AAClC,QAAO,OAAO,gBAAgB,KAAK;;AAGrC,SAAgB,2BAA2B;AAEzC,QADgB,OAAO,gBAAgB,KAAK,EAC5B,kBAAkB,EAAE"}
|
package/dist/index.cjs
CHANGED
|
@@ -8,6 +8,7 @@ const require_useHeldKeyCodes = require('./useHeldKeyCodes.cjs');
|
|
|
8
8
|
const require_useKeyHold = require('./useKeyHold.cjs');
|
|
9
9
|
const require_useHotkeySequence = require('./useHotkeySequence.cjs');
|
|
10
10
|
const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
|
|
11
|
+
const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
|
|
11
12
|
|
|
12
13
|
exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
|
|
13
14
|
exports.provideHotkeysContext = require_HotkeysProviderContext.provideHotkeysContext;
|
|
@@ -17,6 +18,7 @@ exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
|
|
|
17
18
|
exports.useHotkey = require_useHotkey.useHotkey;
|
|
18
19
|
exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
|
|
19
20
|
exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
|
|
21
|
+
exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
|
|
20
22
|
exports.useHotkeys = require_useHotkeys.useHotkeys;
|
|
21
23
|
exports.useHotkeysContext = require_HotkeysProviderContext.useHotkeysContext;
|
|
22
24
|
exports.useKeyHold = require_useKeyHold.useKeyHold;
|
package/dist/index.d.cts
CHANGED
|
@@ -7,5 +7,6 @@ import { useHeldKeys } from "./useHeldKeys.cjs";
|
|
|
7
7
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.cjs";
|
|
8
8
|
import { useKeyHold } from "./useKeyHold.cjs";
|
|
9
9
|
import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
|
|
10
|
+
import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
|
|
10
11
|
export * from "@tanstack/hotkeys";
|
|
11
|
-
export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, VueHotkeyRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
12
|
+
export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,5 +7,6 @@ import { useHeldKeys } from "./useHeldKeys.js";
|
|
|
7
7
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
8
8
|
import { useKeyHold } from "./useKeyHold.js";
|
|
9
9
|
import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
10
|
+
import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
10
11
|
export * from "@tanstack/hotkeys";
|
|
11
|
-
export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, VueHotkeyRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
12
|
+
export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,8 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
|
7
7
|
import { useKeyHold } from "./useKeyHold.js";
|
|
8
8
|
import { useHotkeySequence } from "./useHotkeySequence.js";
|
|
9
9
|
import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
10
|
+
import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
10
11
|
|
|
11
12
|
export * from "@tanstack/hotkeys"
|
|
12
13
|
|
|
13
|
-
export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
14
|
+
export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
|
@@ -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"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
const require_HotkeysProviderContext = require('./HotkeysProviderContext.cjs');
|
|
2
|
+
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
|
+
let vue = require("vue");
|
|
4
|
+
let _tanstack_vue_store = require("@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 = require_HotkeysProviderContext.useDefaultHotkeysOptions();
|
|
12
|
+
const recorder = new _tanstack_hotkeys.HotkeySequenceRecorder(resolveHotkeySequenceRecorderOptions(options, defaultOptions));
|
|
13
|
+
const isRecording = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.isRecording);
|
|
14
|
+
const steps = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.steps);
|
|
15
|
+
const recordedSequence = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.recordedSequence);
|
|
16
|
+
const stopWatcher = (0, vue.watch)(() => resolveHotkeySequenceRecorderOptions(options, defaultOptions), (resolvedOptions) => {
|
|
17
|
+
recorder.setOptions(resolvedOptions);
|
|
18
|
+
}, { immediate: true });
|
|
19
|
+
(0, vue.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() : (0, vue.unref)(value);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
exports.useHotkeySequenceRecorder = useHotkeySequenceRecorder;
|
|
45
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n isRecording: Ref<boolean>\n steps: Ref<HotkeySequence>\n recordedSequence: Ref<HotkeySequence | null>\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n const defaultOptions = useDefaultHotkeysOptions()\n const recorder = new HotkeySequenceRecorder(\n resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n )\n\n const isRecording = useStore(recorder.store, (state) => state.isRecording)\n const steps = useStore(recorder.store, (state) => state.steps)\n const recordedSequence = useStore(\n recorder.store,\n (state) => state.recordedSequence,\n )\n\n const stopWatcher = watch(\n () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n (resolvedOptions) => {\n recorder.setOptions(resolvedOptions)\n },\n { immediate: true },\n )\n\n onUnmounted(() => {\n stopWatcher()\n recorder.destroy()\n })\n\n return {\n isRecording: isRecording as Ref<boolean>,\n steps: steps as Ref<HotkeySequence>,\n recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n startRecording: () => recorder.start(),\n stopRecording: () => recorder.stop(),\n cancelRecording: () => recorder.cancel(),\n commitRecording: () => recorder.commit(),\n }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n return {\n ...defaultOptions.hotkeySequenceRecorder,\n ...resolveMaybeRefOrGetter(options),\n } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,WAAW,IAAIC,yCACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,gDAAuB,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,0CAAiB,SAAS,QAAQ,UAAU,MAAM,MAAM;CAC9D,MAAM,qDACJ,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,mCACE,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,4BAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
2
|
+
import { MaybeRefOrGetter, Ref } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/useHotkeySequenceRecorder.d.ts
|
|
5
|
+
interface VueHotkeySequenceRecorder {
|
|
6
|
+
isRecording: Ref<boolean>;
|
|
7
|
+
steps: Ref<HotkeySequence>;
|
|
8
|
+
recordedSequence: Ref<HotkeySequence | null>;
|
|
9
|
+
startRecording: () => void;
|
|
10
|
+
stopRecording: () => void;
|
|
11
|
+
cancelRecording: () => void;
|
|
12
|
+
commitRecording: () => void;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Vue composable for recording multi-chord sequences (Vim-style shortcuts).
|
|
16
|
+
*/
|
|
17
|
+
declare function useHotkeySequenceRecorder(options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>): VueHotkeySequenceRecorder;
|
|
18
|
+
//#endregion
|
|
19
|
+
export { VueHotkeySequenceRecorder, useHotkeySequenceRecorder };
|
|
20
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.d.cts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
2
|
+
import { MaybeRefOrGetter, Ref } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/useHotkeySequenceRecorder.d.ts
|
|
5
|
+
interface VueHotkeySequenceRecorder {
|
|
6
|
+
isRecording: Ref<boolean>;
|
|
7
|
+
steps: Ref<HotkeySequence>;
|
|
8
|
+
recordedSequence: Ref<HotkeySequence | null>;
|
|
9
|
+
startRecording: () => void;
|
|
10
|
+
stopRecording: () => void;
|
|
11
|
+
cancelRecording: () => void;
|
|
12
|
+
commitRecording: () => void;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Vue composable for recording multi-chord sequences (Vim-style shortcuts).
|
|
16
|
+
*/
|
|
17
|
+
declare function useHotkeySequenceRecorder(options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>): VueHotkeySequenceRecorder;
|
|
18
|
+
//#endregion
|
|
19
|
+
export { VueHotkeySequenceRecorder, useHotkeySequenceRecorder };
|
|
20
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.d.ts.map
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
|
|
2
|
+
import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
|
|
3
|
+
import { onUnmounted, unref, watch } from "vue";
|
|
4
|
+
import { useStore } 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 = useStore(recorder.store, (state) => state.isRecording);
|
|
14
|
+
const steps = useStore(recorder.store, (state) => state.steps);
|
|
15
|
+
const recordedSequence = useStore(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 };
|
|
45
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n isRecording: Ref<boolean>\n steps: Ref<HotkeySequence>\n recordedSequence: Ref<HotkeySequence | null>\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n const defaultOptions = useDefaultHotkeysOptions()\n const recorder = new HotkeySequenceRecorder(\n resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n )\n\n const isRecording = useStore(recorder.store, (state) => state.isRecording)\n const steps = useStore(recorder.store, (state) => state.steps)\n const recordedSequence = useStore(\n recorder.store,\n (state) => state.recordedSequence,\n )\n\n const stopWatcher = watch(\n () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n (resolvedOptions) => {\n recorder.setOptions(resolvedOptions)\n },\n { immediate: true },\n )\n\n onUnmounted(() => {\n stopWatcher()\n recorder.destroy()\n })\n\n return {\n isRecording: isRecording as Ref<boolean>,\n steps: steps as Ref<HotkeySequence>,\n recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n startRecording: () => recorder.start(),\n stopRecording: () => recorder.stop(),\n cancelRecording: () => recorder.cancel(),\n commitRecording: () => recorder.commit(),\n }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n return {\n ...defaultOptions.hotkeySequenceRecorder,\n ...resolveMaybeRefOrGetter(options),\n } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,WAAW,IAAI,uBACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,cAAc,SAAS,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,QAAQ,SAAS,SAAS,QAAQ,UAAU,MAAM,MAAM;CAC9D,MAAM,mBAAmB,SACvB,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,cAAc,YACZ,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,mBAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,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.
|
|
3
|
+
"version": "0.6.0",
|
|
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.
|
|
46
|
+
"@tanstack/hotkeys": "0.5.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@vitejs/plugin-vue": "^6.0.5",
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { inject, provide } from 'vue'
|
|
2
2
|
import type { InjectionKey } from 'vue'
|
|
3
|
-
import type {
|
|
3
|
+
import type {
|
|
4
|
+
HotkeyRecorderOptions,
|
|
5
|
+
HotkeySequenceRecorderOptions,
|
|
6
|
+
} from '@tanstack/hotkeys'
|
|
4
7
|
import type { UseHotkeyOptions } from './useHotkey'
|
|
5
8
|
import type { UseHotkeySequenceOptions } from './useHotkeySequence'
|
|
6
9
|
|
|
7
10
|
export interface HotkeysProviderOptions {
|
|
8
11
|
hotkey?: Partial<UseHotkeyOptions>
|
|
9
12
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>
|
|
13
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
|
|
10
14
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>
|
|
11
15
|
}
|
|
12
16
|
|
package/src/index.ts
CHANGED
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>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { onUnmounted, unref, watch } from 'vue'
|
|
2
|
+
import { useStore } from '@tanstack/vue-store'
|
|
3
|
+
import { HotkeySequenceRecorder } from '@tanstack/hotkeys'
|
|
4
|
+
import { useDefaultHotkeysOptions } from './HotkeysProviderContext'
|
|
5
|
+
import type { MaybeRefOrGetter, Ref } from 'vue'
|
|
6
|
+
import type {
|
|
7
|
+
HotkeySequence,
|
|
8
|
+
HotkeySequenceRecorderOptions,
|
|
9
|
+
} from '@tanstack/hotkeys'
|
|
10
|
+
|
|
11
|
+
export interface VueHotkeySequenceRecorder {
|
|
12
|
+
isRecording: Ref<boolean>
|
|
13
|
+
steps: Ref<HotkeySequence>
|
|
14
|
+
recordedSequence: Ref<HotkeySequence | null>
|
|
15
|
+
startRecording: () => void
|
|
16
|
+
stopRecording: () => void
|
|
17
|
+
cancelRecording: () => void
|
|
18
|
+
commitRecording: () => void
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Vue composable for recording multi-chord sequences (Vim-style shortcuts).
|
|
23
|
+
*/
|
|
24
|
+
export function useHotkeySequenceRecorder(
|
|
25
|
+
options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,
|
|
26
|
+
): VueHotkeySequenceRecorder {
|
|
27
|
+
const defaultOptions = useDefaultHotkeysOptions()
|
|
28
|
+
const recorder = new HotkeySequenceRecorder(
|
|
29
|
+
resolveHotkeySequenceRecorderOptions(options, defaultOptions),
|
|
30
|
+
)
|
|
31
|
+
|
|
32
|
+
const isRecording = useStore(recorder.store, (state) => state.isRecording)
|
|
33
|
+
const steps = useStore(recorder.store, (state) => state.steps)
|
|
34
|
+
const recordedSequence = useStore(
|
|
35
|
+
recorder.store,
|
|
36
|
+
(state) => state.recordedSequence,
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
const stopWatcher = watch(
|
|
40
|
+
() => resolveHotkeySequenceRecorderOptions(options, defaultOptions),
|
|
41
|
+
(resolvedOptions) => {
|
|
42
|
+
recorder.setOptions(resolvedOptions)
|
|
43
|
+
},
|
|
44
|
+
{ immediate: true },
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
onUnmounted(() => {
|
|
48
|
+
stopWatcher()
|
|
49
|
+
recorder.destroy()
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
return {
|
|
53
|
+
isRecording: isRecording as Ref<boolean>,
|
|
54
|
+
steps: steps as Ref<HotkeySequence>,
|
|
55
|
+
recordedSequence: recordedSequence as Ref<HotkeySequence | null>,
|
|
56
|
+
startRecording: () => recorder.start(),
|
|
57
|
+
stopRecording: () => recorder.stop(),
|
|
58
|
+
cancelRecording: () => recorder.cancel(),
|
|
59
|
+
commitRecording: () => recorder.commit(),
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function resolveHotkeySequenceRecorderOptions(
|
|
64
|
+
options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,
|
|
65
|
+
defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,
|
|
66
|
+
): HotkeySequenceRecorderOptions {
|
|
67
|
+
return {
|
|
68
|
+
...defaultOptions.hotkeySequenceRecorder,
|
|
69
|
+
...resolveMaybeRefOrGetter(options),
|
|
70
|
+
} as HotkeySequenceRecorderOptions
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {
|
|
74
|
+
return typeof value === 'function' ? (value as () => T)() : unref(value)
|
|
75
|
+
}
|