@tanstack/vue-hotkeys 0.11.0 → 0.12.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/HotkeysProvider.d.ts +5 -9
- package/dist/HotkeysProvider.js +1 -2
- package/dist/HotkeysProviderContext.d.ts +5 -8
- package/dist/HotkeysProviderContext.js +1 -2
- package/dist/useHeldKeyCodes.d.ts +2 -5
- package/dist/useHeldKeyCodes.js +3 -3
- package/dist/useHeldKeys.d.ts +2 -5
- package/dist/useHeldKeys.js +3 -3
- package/dist/useHotkey.d.ts +3 -6
- package/dist/useHotkey.js +3 -3
- package/dist/useHotkeyHint.d.ts +2 -5
- package/dist/useHotkeyHint.js +1 -2
- package/dist/useHotkeyRecorder.d.ts +3 -6
- package/dist/useHotkeyRecorder.js +1 -2
- package/dist/useHotkeyRegistrations.d.ts +3 -6
- package/dist/useHotkeyRegistrations.js +1 -2
- package/dist/useHotkeySequence.d.ts +3 -6
- package/dist/useHotkeySequence.js +1 -2
- package/dist/useHotkeySequenceRecorder.d.ts +3 -6
- package/dist/useHotkeySequenceRecorder.js +1 -2
- package/dist/useHotkeySequences.d.ts +3 -6
- package/dist/useHotkeySequences.js +1 -2
- package/dist/useHotkeys.d.ts +3 -6
- package/dist/useHotkeys.js +3 -3
- package/dist/useKeyHold.d.ts +2 -5
- package/dist/useKeyHold.js +3 -3
- package/package.json +12 -17
- package/dist/HotkeysProvider.cjs +0 -31
- package/dist/HotkeysProvider.cjs.map +0 -1
- package/dist/HotkeysProvider.d.cts +0 -34
- package/dist/HotkeysProvider.js.map +0 -1
- package/dist/HotkeysProviderContext.cjs +0 -20
- package/dist/HotkeysProviderContext.cjs.map +0 -1
- package/dist/HotkeysProviderContext.d.cts +0 -20
- package/dist/HotkeysProviderContext.js.map +0 -1
- package/dist/index.cjs +0 -37
- package/dist/index.d.cts +0 -15
- package/dist/useHeldKeyCodes.cjs +0 -37
- package/dist/useHeldKeyCodes.cjs.map +0 -1
- package/dist/useHeldKeyCodes.d.cts +0 -33
- package/dist/useHeldKeyCodes.js.map +0 -1
- package/dist/useHeldKeys.cjs +0 -35
- package/dist/useHeldKeys.cjs.map +0 -1
- package/dist/useHeldKeys.d.cts +0 -31
- package/dist/useHeldKeys.js.map +0 -1
- package/dist/useHotkey.cjs +0 -140
- package/dist/useHotkey.cjs.map +0 -1
- package/dist/useHotkey.d.cts +0 -86
- package/dist/useHotkey.js.map +0 -1
- package/dist/useHotkeyHint.cjs +0 -20
- package/dist/useHotkeyHint.cjs.map +0 -1
- package/dist/useHotkeyHint.d.cts +0 -15
- package/dist/useHotkeyHint.js.map +0 -1
- package/dist/useHotkeyRecorder.cjs +0 -80
- package/dist/useHotkeyRecorder.cjs.map +0 -1
- package/dist/useHotkeyRecorder.d.cts +0 -61
- package/dist/useHotkeyRecorder.js.map +0 -1
- package/dist/useHotkeyRegistrations.cjs +0 -26
- package/dist/useHotkeyRegistrations.cjs.map +0 -1
- package/dist/useHotkeyRegistrations.d.cts +0 -27
- package/dist/useHotkeyRegistrations.js.map +0 -1
- package/dist/useHotkeySequence.cjs +0 -122
- package/dist/useHotkeySequence.cjs.map +0 -1
- package/dist/useHotkeySequence.d.cts +0 -68
- package/dist/useHotkeySequence.js.map +0 -1
- package/dist/useHotkeySequenceRecorder.cjs +0 -45
- package/dist/useHotkeySequenceRecorder.cjs.map +0 -1
- package/dist/useHotkeySequenceRecorder.d.cts +0 -20
- package/dist/useHotkeySequenceRecorder.js.map +0 -1
- package/dist/useHotkeySequences.cjs +0 -140
- package/dist/useHotkeySequences.cjs.map +0 -1
- package/dist/useHotkeySequences.d.cts +0 -64
- package/dist/useHotkeySequences.js.map +0 -1
- package/dist/useHotkeys.cjs +0 -139
- package/dist/useHotkeys.cjs.map +0 -1
- package/dist/useHotkeys.d.cts +0 -65
- package/dist/useHotkeys.js.map +0 -1
- package/dist/useKeyHold.cjs +0 -60
- package/dist/useKeyHold.cjs.map +0 -1
- package/dist/useKeyHold.d.cts +0 -52
- package/dist/useKeyHold.js.map +0 -1
- package/src/HotkeysProvider.tsx +0 -29
- package/src/HotkeysProviderContext.ts +0 -41
- package/src/index.ts +0 -19
- package/src/useHeldKeyCodes.ts +0 -34
- package/src/useHeldKeys.ts +0 -32
- package/src/useHotkey.ts +0 -213
- package/src/useHotkeyHint.ts +0 -25
- package/src/useHotkeyRecorder.ts +0 -112
- package/src/useHotkeyRegistrations.ts +0 -46
- package/src/useHotkeySequence.ts +0 -187
- package/src/useHotkeySequenceRecorder.ts +0 -75
- package/src/useHotkeySequences.ts +0 -221
- package/src/useHotkeys.ts +0 -221
- package/src/useKeyHold.ts +0 -65
- package/src/vue.d.ts +0 -6
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { UseHotkeySequenceOptions } from "./useHotkeySequence.cjs";
|
|
2
|
-
import { HotkeyCallback, HotkeySequence } from "@tanstack/hotkeys";
|
|
3
|
-
import { MaybeRefOrGetter } from "vue";
|
|
4
|
-
|
|
5
|
-
//#region src/useHotkeySequences.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* A single sequence definition for use with `useHotkeySequences`.
|
|
8
|
-
*/
|
|
9
|
-
interface UseHotkeySequenceDefinition {
|
|
10
|
-
/** Array of hotkey strings that form the sequence */
|
|
11
|
-
sequence: MaybeRefOrGetter<HotkeySequence>;
|
|
12
|
-
/** The function to call when the sequence is completed */
|
|
13
|
-
callback: HotkeyCallback;
|
|
14
|
-
/** Per-sequence options (merged on top of commonOptions) */
|
|
15
|
-
options?: MaybeRefOrGetter<UseHotkeySequenceOptions>;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Vue composable for registering multiple keyboard shortcut sequences at once (Vim-style).
|
|
19
|
-
*
|
|
20
|
-
* Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or a getter/ref
|
|
21
|
-
* that returns one, so you can register variable-length lists safely.
|
|
22
|
-
*
|
|
23
|
-
* Options are merged in this order:
|
|
24
|
-
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
25
|
-
*
|
|
26
|
-
* Definitions with an empty `sequence` are skipped (no registration).
|
|
27
|
-
*
|
|
28
|
-
* @param definitions - Array of sequence definitions, or a getter/ref
|
|
29
|
-
* @param commonOptions - Shared options applied to all sequences (overridden by per-definition options)
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```vue
|
|
33
|
-
* <script setup>
|
|
34
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
35
|
-
*
|
|
36
|
-
* useHotkeySequences([
|
|
37
|
-
* { sequence: ['G', 'G'], callback: () => scrollToTop() },
|
|
38
|
-
* { sequence: ['D', 'D'], callback: () => deleteLine() },
|
|
39
|
-
* ])
|
|
40
|
-
* </script>
|
|
41
|
-
* ```
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```vue
|
|
45
|
-
* <script setup>
|
|
46
|
-
* import { computed } from 'vue'
|
|
47
|
-
* import { useHotkeySequences } from '@tanstack/vue-hotkeys'
|
|
48
|
-
*
|
|
49
|
-
* const items = computed(() => [...])
|
|
50
|
-
* useHotkeySequences(
|
|
51
|
-
* () => items.value.map((item) => ({
|
|
52
|
-
* sequence: item.chords,
|
|
53
|
-
* callback: item.action,
|
|
54
|
-
* options: { enabled: item.enabled },
|
|
55
|
-
* })),
|
|
56
|
-
* { preventDefault: true },
|
|
57
|
-
* )
|
|
58
|
-
* </script>
|
|
59
|
-
* ```
|
|
60
|
-
*/
|
|
61
|
-
declare function useHotkeySequences(definitions: MaybeRefOrGetter<Array<UseHotkeySequenceDefinition>>, commonOptions?: MaybeRefOrGetter<UseHotkeySequenceOptions>): void;
|
|
62
|
-
//#endregion
|
|
63
|
-
export { UseHotkeySequenceDefinition, useHotkeySequences };
|
|
64
|
-
//# sourceMappingURL=useHotkeySequences.d.cts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequences.js","names":[],"sources":["../src/useHotkeySequences.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\nimport type { MaybeRefOrGetter } from 'vue'\n\n/**\n * A single sequence definition for use with `useHotkeySequences`.\n */\nexport interface UseHotkeySequenceDefinition {\n /** Array of hotkey strings that form the sequence */\n sequence: MaybeRefOrGetter<HotkeySequence>\n /** The function to call when the sequence is completed */\n callback: HotkeyCallback\n /** Per-sequence options (merged on top of commonOptions) */\n options?: MaybeRefOrGetter<UseHotkeySequenceOptions>\n}\n\n/**\n * Vue composable for registering multiple keyboard shortcut sequences at once (Vim-style).\n *\n * Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or a getter/ref\n * that returns one, so you can register variable-length lists safely.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Definitions with an empty `sequence` are skipped (no registration).\n *\n * @param definitions - Array of sequence definitions, or a getter/ref\n * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options)\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequences } from '@tanstack/vue-hotkeys'\n *\n * useHotkeySequences([\n * { sequence: ['G', 'G'], callback: () => scrollToTop() },\n * { sequence: ['D', 'D'], callback: () => deleteLine() },\n * ])\n * </script>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { computed } from 'vue'\n * import { useHotkeySequences } from '@tanstack/vue-hotkeys'\n *\n * const items = computed(() => [...])\n * useHotkeySequences(\n * () => items.value.map((item) => ({\n * sequence: item.chords,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * </script>\n * ```\n */\nexport function useHotkeySequences(\n definitions: MaybeRefOrGetter<Array<UseHotkeySequenceDefinition>>,\n commonOptions: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n type RegistrationRecord = {\n handle: SequenceRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getSequenceManager()\n\n const registrations = new Map<string, RegistrationRecord>()\n\n const stopWatcher = watch(\n () => {\n const resolvedDefinitions = resolveMaybeRefOrGetter(definitions)\n const resolvedCommonOptions = resolveMaybeRefOrGetter(commonOptions)\n\n return resolvedDefinitions.map((def, i) => {\n const resolvedSequence = resolveMaybeRefOrGetter(def.sequence)\n const resolvedDefOptions = def.options\n ? resolveMaybeRefOrGetter(def.options)\n : {}\n\n const mergedOptions = {\n ...defaultOptions.hotkeySequence,\n ...resolvedCommonOptions,\n ...resolvedDefOptions,\n } as UseHotkeySequenceOptions\n\n const sequenceString = formatHotkeySequence(resolvedSequence)\n\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 as any)\n\n return {\n index: i,\n resolvedSequence,\n sequenceString,\n callback: def.callback,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n })\n },\n (resolved) => {\n const nextKeys = new Set<string>()\n const prepared: Array<{\n registrationKey: string\n entry: (typeof resolved)[number]\n finalTarget: Document | HTMLElement | Window\n }> = []\n\n for (const entry of resolved) {\n if (entry.resolvedSequence.length === 0) {\n continue\n }\n\n const finalTarget =\n entry.resolvedTarget ??\n (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n continue\n }\n\n const registrationKey = `${entry.index}:${entry.sequenceString}`\n nextKeys.add(registrationKey)\n prepared.push({ registrationKey, entry, finalTarget })\n }\n\n for (const [key, record] of [...registrations.entries()]) {\n if (!nextKeys.has(key)) {\n if (record.handle.isActive) {\n record.handle.unregister()\n }\n registrations.delete(key)\n }\n }\n\n for (const { registrationKey, entry, finalTarget } of prepared) {\n const existing = registrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === finalTarget) {\n existing.handle.callback = entry.callback\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n existing.handle.setOptions(optionsWithoutTarget)\n continue\n }\n\n if (existing) {\n if (existing.handle.isActive) {\n existing.handle.unregister()\n }\n registrations.delete(registrationKey)\n }\n\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n\n const handle = manager.register(\n entry.resolvedSequence,\n entry.callback,\n {\n ...optionsWithoutTarget,\n target: finalTarget,\n },\n )\n registrations.set(registrationKey, { handle, target: finalTarget })\n }\n },\n { immediate: true },\n )\n\n onUnmounted(() => {\n stopWatcher()\n for (const { handle } of registrations.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrations.clear()\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAgB,mBACd,aACA,gBAA4D,EAAE,EACxD;CAMN,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,UAAU,oBAAoB;CAEpC,MAAM,gCAAgB,IAAI,KAAiC;CAE3D,MAAM,cAAc,YACZ;EACJ,MAAM,sBAAsB,wBAAwB,YAAY;EAChE,MAAM,wBAAwB,wBAAwB,cAAc;AAEpE,SAAO,oBAAoB,KAAK,KAAK,MAAM;GACzC,MAAM,mBAAmB,wBAAwB,IAAI,SAAS;GAC9D,MAAM,qBAAqB,IAAI,UAC3B,wBAAwB,IAAI,QAAQ,GACpC,EAAE;GAEN,MAAM,gBAAgB;IACpB,GAAG,eAAe;IAClB,GAAG;IACH,GAAG;IACJ;GAED,MAAM,iBAAiB,qBAAqB,iBAAiB;GAE7D,MAAM,kBACJ,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GACpD,MAAM,iBACJ,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAc;AAE1D,UAAO;IACL,OAAO;IACP;IACA;IACA,UAAU,IAAI;IACd;IACA;IACA;IACD;IACD;KAEH,aAAa;EACZ,MAAM,2BAAW,IAAI,KAAa;EAClC,MAAM,WAID,EAAE;AAEP,OAAK,MAAM,SAAS,UAAU;AAC5B,OAAI,MAAM,iBAAiB,WAAW,EACpC;GAGF,MAAM,cACJ,MAAM,mBACL,OAAO,aAAa,cAAc,WAAW;AAEhD,OAAI,CAAC,YACH;GAGF,MAAM,kBAAkB,GAAG,MAAM,MAAM,GAAG,MAAM;AAChD,YAAS,IAAI,gBAAgB;AAC7B,YAAS,KAAK;IAAE;IAAiB;IAAO;IAAa,CAAC;;AAGxD,OAAK,MAAM,CAAC,KAAK,WAAW,CAAC,GAAG,cAAc,SAAS,CAAC,CACtD,KAAI,CAAC,SAAS,IAAI,IAAI,EAAE;AACtB,OAAI,OAAO,OAAO,SAChB,QAAO,OAAO,YAAY;AAE5B,iBAAc,OAAO,IAAI;;AAI7B,OAAK,MAAM,EAAE,iBAAiB,OAAO,iBAAiB,UAAU;GAC9D,MAAM,WAAW,cAAc,IAAI,gBAAgB;AACnD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,aAAa;AAChE,aAAS,OAAO,WAAW,MAAM;IACjC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;IACV,MAAM,uBAAuB;KAC3B,GAAG;KACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;KACvC;AACD,aAAS,OAAO,WAAW,qBAAqB;AAChD;;AAGF,OAAI,UAAU;AACZ,QAAI,SAAS,OAAO,SAClB,UAAS,OAAO,YAAY;AAE9B,kBAAc,OAAO,gBAAgB;;GAGvC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;GACV,MAAM,uBAAuB;IAC3B,GAAG;IACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;IACvC;GAED,MAAM,SAAS,QAAQ,SACrB,MAAM,kBACN,MAAM,UACN;IACE,GAAG;IACH,QAAQ;IACT,CACF;AACD,iBAAc,IAAI,iBAAiB;IAAE;IAAQ,QAAQ;IAAa,CAAC;;IAGvE,EAAE,WAAW,MAAM,CACpB;AAED,mBAAkB;AAChB,eAAa;AACb,OAAK,MAAM,EAAE,YAAY,cAAc,QAAQ,CAC7C,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,gBAAc,OAAO;GACrB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}
|
package/dist/useHotkeys.cjs
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
const require_HotkeysProviderContext = require('./HotkeysProviderContext.cjs');
|
|
2
|
-
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
|
|
5
|
-
//#region src/useHotkeys.ts
|
|
6
|
-
/**
|
|
7
|
-
* Vue composable for registering multiple keyboard hotkeys at once.
|
|
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
|
|
15
|
-
*
|
|
16
|
-
* @param hotkeys - Array of hotkey definitions to register, or a getter/ref
|
|
17
|
-
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* ```vue
|
|
21
|
-
* <script setup>
|
|
22
|
-
* import { useHotkeys } from '@tanstack/vue-hotkeys'
|
|
23
|
-
*
|
|
24
|
-
* useHotkeys([
|
|
25
|
-
* { hotkey: 'Mod+S', callback: () => save() },
|
|
26
|
-
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
27
|
-
* { hotkey: 'Escape', callback: () => close() },
|
|
28
|
-
* ])
|
|
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
|
-
* ```
|
|
50
|
-
*/
|
|
51
|
-
function useHotkeys(hotkeys, commonOptions = {}) {
|
|
52
|
-
const defaultOptions = require_HotkeysProviderContext.useDefaultHotkeysOptions();
|
|
53
|
-
const manager = (0, _tanstack_hotkeys.getHotkeyManager)();
|
|
54
|
-
const registrations = /* @__PURE__ */ new Map();
|
|
55
|
-
const stopWatcher = (0, vue.watch)(() => {
|
|
56
|
-
const resolvedHotkeys = resolveMaybeRefOrGetter(hotkeys);
|
|
57
|
-
const resolvedCommonOptions = resolveMaybeRefOrGetter(commonOptions);
|
|
58
|
-
return resolvedHotkeys.map((def, i) => {
|
|
59
|
-
const resolvedHotkey = resolveMaybeRefOrGetter(def.hotkey);
|
|
60
|
-
const resolvedDefOptions = def.options ? resolveMaybeRefOrGetter(def.options) : {};
|
|
61
|
-
const mergedOptions = {
|
|
62
|
-
...defaultOptions.hotkey,
|
|
63
|
-
...resolvedCommonOptions,
|
|
64
|
-
...resolvedDefOptions
|
|
65
|
-
};
|
|
66
|
-
const hotkeyString = (0, _tanstack_hotkeys.normalizeRegisterableHotkey)(resolvedHotkey, mergedOptions.platform ?? (0, _tanstack_hotkeys.detectPlatform)());
|
|
67
|
-
const resolvedEnabled = mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled);
|
|
68
|
-
const resolvedTarget = mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target);
|
|
69
|
-
return {
|
|
70
|
-
index: i,
|
|
71
|
-
hotkeyString,
|
|
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
|
-
const finalTarget = entry.resolvedTarget ?? (typeof document !== "undefined" ? document : null);
|
|
83
|
-
if (!finalTarget) continue;
|
|
84
|
-
const registrationKey = `${entry.index}:${entry.hotkeyString}`;
|
|
85
|
-
nextKeys.add(registrationKey);
|
|
86
|
-
prepared.push({
|
|
87
|
-
registrationKey,
|
|
88
|
-
entry,
|
|
89
|
-
finalTarget
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
for (const [key, record] of [...registrations.entries()]) if (!nextKeys.has(key)) {
|
|
93
|
-
if (record.handle.isActive) record.handle.unregister();
|
|
94
|
-
registrations.delete(key);
|
|
95
|
-
}
|
|
96
|
-
for (const { registrationKey, entry, finalTarget } of prepared) {
|
|
97
|
-
const existing = registrations.get(registrationKey);
|
|
98
|
-
if (existing?.handle.isActive && existing.target === finalTarget) {
|
|
99
|
-
existing.handle.callback = entry.callback;
|
|
100
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
101
|
-
const optionsWithoutTarget = {
|
|
102
|
-
...restOptions,
|
|
103
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
104
|
-
};
|
|
105
|
-
existing.handle.setOptions(optionsWithoutTarget);
|
|
106
|
-
continue;
|
|
107
|
-
}
|
|
108
|
-
if (existing) {
|
|
109
|
-
if (existing.handle.isActive) existing.handle.unregister();
|
|
110
|
-
registrations.delete(registrationKey);
|
|
111
|
-
}
|
|
112
|
-
const { target: _target, enabled: _enabled, ...restOptions } = entry.mergedOptions;
|
|
113
|
-
const optionsWithoutTarget = {
|
|
114
|
-
...restOptions,
|
|
115
|
-
...entry.resolvedEnabled === void 0 ? {} : { enabled: entry.resolvedEnabled }
|
|
116
|
-
};
|
|
117
|
-
const handle = manager.register(entry.hotkeyString, entry.callback, {
|
|
118
|
-
...optionsWithoutTarget,
|
|
119
|
-
target: finalTarget
|
|
120
|
-
});
|
|
121
|
-
registrations.set(registrationKey, {
|
|
122
|
-
handle,
|
|
123
|
-
target: finalTarget
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
}, { immediate: true });
|
|
127
|
-
(0, vue.onUnmounted)(() => {
|
|
128
|
-
stopWatcher();
|
|
129
|
-
for (const { handle } of registrations.values()) if (handle.isActive) handle.unregister();
|
|
130
|
-
registrations.clear();
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
function resolveMaybeRefOrGetter(value) {
|
|
134
|
-
return typeof value === "function" ? value() : (0, vue.unref)(value);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
//#endregion
|
|
138
|
-
exports.useHotkeys = useHotkeys;
|
|
139
|
-
//# sourceMappingURL=useHotkeys.cjs.map
|
package/dist/useHotkeys.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeys.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport type { MaybeRefOrGetter } from 'vue'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: MaybeRefOrGetter<RegisterableHotkey>\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: MaybeRefOrGetter<UseHotkeyOptions>\n}\n\n/**\n * Vue composable for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * @param hotkeys - Array of hotkey definitions to register, or a getter/ref\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeys } from '@tanstack/vue-hotkeys'\n *\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * </script>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { computed } from 'vue'\n * import { useHotkeys } from '@tanstack/vue-hotkeys'\n *\n * const items = computed(() => [...])\n * // Dynamic hotkeys from reactive data\n * useHotkeys(\n * () => items.value.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * </script>\n * ```\n */\nexport function useHotkeys(\n hotkeys: MaybeRefOrGetter<Array<UseHotkeyDefinition>>,\n commonOptions: MaybeRefOrGetter<UseHotkeyOptions> = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getHotkeyManager()\n\n const registrations = new Map<string, RegistrationRecord>()\n\n const stopWatcher = watch(\n () => {\n const resolvedHotkeys = resolveMaybeRefOrGetter(hotkeys)\n const resolvedCommonOptions = resolveMaybeRefOrGetter(commonOptions)\n\n return resolvedHotkeys.map((def, i) => {\n const resolvedHotkey = resolveMaybeRefOrGetter(def.hotkey)\n const resolvedDefOptions = def.options\n ? resolveMaybeRefOrGetter(def.options)\n : {}\n\n const mergedOptions = {\n ...defaultOptions.hotkey,\n ...resolvedCommonOptions,\n ...resolvedDefOptions,\n } as UseHotkeyOptions\n\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString = normalizeRegisterableHotkey(\n resolvedHotkey,\n platform,\n )\n\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 as any)\n\n return {\n index: i,\n hotkeyString,\n callback: def.callback,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n })\n },\n (resolved) => {\n const nextKeys = new Set<string>()\n const prepared: Array<{\n registrationKey: string\n entry: (typeof resolved)[number]\n finalTarget: Document | HTMLElement | Window\n }> = []\n\n for (const entry of resolved) {\n const finalTarget =\n entry.resolvedTarget ??\n (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n continue\n }\n\n const registrationKey = `${entry.index}:${entry.hotkeyString}`\n nextKeys.add(registrationKey)\n prepared.push({ registrationKey, entry, finalTarget })\n }\n\n for (const [key, record] of [...registrations.entries()]) {\n if (!nextKeys.has(key)) {\n if (record.handle.isActive) {\n record.handle.unregister()\n }\n registrations.delete(key)\n }\n }\n\n for (const { registrationKey, entry, finalTarget } of prepared) {\n const existing = registrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === finalTarget) {\n existing.handle.callback = entry.callback\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n existing.handle.setOptions(optionsWithoutTarget)\n continue\n }\n\n if (existing) {\n if (existing.handle.isActive) {\n existing.handle.unregister()\n }\n registrations.delete(registrationKey)\n }\n\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n\n const handle = manager.register(entry.hotkeyString, entry.callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n registrations.set(registrationKey, { handle, target: finalTarget })\n }\n },\n { immediate: true },\n )\n\n onUnmounted(() => {\n stopWatcher()\n for (const { handle } of registrations.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrations.clear()\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,WACd,SACA,gBAAoD,EAAE,EAChD;CAMN,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,mDAA4B;CAElC,MAAM,gCAAgB,IAAI,KAAiC;CAE3D,MAAM,mCACE;EACJ,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,wBAAwB,wBAAwB,cAAc;AAEpE,SAAO,gBAAgB,KAAK,KAAK,MAAM;GACrC,MAAM,iBAAiB,wBAAwB,IAAI,OAAO;GAC1D,MAAM,qBAAqB,IAAI,UAC3B,wBAAwB,IAAI,QAAQ,GACpC,EAAE;GAEN,MAAM,gBAAgB;IACpB,GAAG,eAAe;IAClB,GAAG;IACH,GAAG;IACJ;GAGD,MAAM,kEACJ,gBAFe,cAAc,mDAA4B,CAI1D;GAED,MAAM,kBACJ,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GACpD,MAAM,iBACJ,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAc;AAE1D,UAAO;IACL,OAAO;IACP;IACA,UAAU,IAAI;IACd;IACA;IACA;IACD;IACD;KAEH,aAAa;EACZ,MAAM,2BAAW,IAAI,KAAa;EAClC,MAAM,WAID,EAAE;AAEP,OAAK,MAAM,SAAS,UAAU;GAC5B,MAAM,cACJ,MAAM,mBACL,OAAO,aAAa,cAAc,WAAW;AAEhD,OAAI,CAAC,YACH;GAGF,MAAM,kBAAkB,GAAG,MAAM,MAAM,GAAG,MAAM;AAChD,YAAS,IAAI,gBAAgB;AAC7B,YAAS,KAAK;IAAE;IAAiB;IAAO;IAAa,CAAC;;AAGxD,OAAK,MAAM,CAAC,KAAK,WAAW,CAAC,GAAG,cAAc,SAAS,CAAC,CACtD,KAAI,CAAC,SAAS,IAAI,IAAI,EAAE;AACtB,OAAI,OAAO,OAAO,SAChB,QAAO,OAAO,YAAY;AAE5B,iBAAc,OAAO,IAAI;;AAI7B,OAAK,MAAM,EAAE,iBAAiB,OAAO,iBAAiB,UAAU;GAC9D,MAAM,WAAW,cAAc,IAAI,gBAAgB;AACnD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,aAAa;AAChE,aAAS,OAAO,WAAW,MAAM;IACjC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;IACV,MAAM,uBAAuB;KAC3B,GAAG;KACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;KACvC;AACD,aAAS,OAAO,WAAW,qBAAqB;AAChD;;AAGF,OAAI,UAAU;AACZ,QAAI,SAAS,OAAO,SAClB,UAAS,OAAO,YAAY;AAE9B,kBAAc,OAAO,gBAAgB;;GAGvC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;GACV,MAAM,uBAAuB;IAC3B,GAAG;IACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;IACvC;GAED,MAAM,SAAS,QAAQ,SAAS,MAAM,cAAc,MAAM,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,iBAAc,IAAI,iBAAiB;IAAE;IAAQ,QAAQ;IAAa,CAAC;;IAGvE,EAAE,WAAW,MAAM,CACpB;AAED,4BAAkB;AAChB,eAAa;AACb,OAAK,MAAM,EAAE,YAAY,cAAc,QAAQ,CAC7C,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,gBAAc,OAAO;GACrB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}
|
package/dist/useHotkeys.d.cts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { UseHotkeyOptions } from "./useHotkey.cjs";
|
|
2
|
-
import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
|
|
3
|
-
import { MaybeRefOrGetter } from "vue";
|
|
4
|
-
|
|
5
|
-
//#region src/useHotkeys.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* A single hotkey definition for use with `useHotkeys`.
|
|
8
|
-
*/
|
|
9
|
-
interface UseHotkeyDefinition {
|
|
10
|
-
/** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
|
|
11
|
-
hotkey: MaybeRefOrGetter<RegisterableHotkey>;
|
|
12
|
-
/** The function to call when the hotkey is pressed */
|
|
13
|
-
callback: HotkeyCallback;
|
|
14
|
-
/** Per-hotkey options (merged on top of commonOptions) */
|
|
15
|
-
options?: MaybeRefOrGetter<UseHotkeyOptions>;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Vue composable for registering multiple keyboard hotkeys at once.
|
|
19
|
-
*
|
|
20
|
-
* Uses the singleton HotkeyManager for efficient event handling.
|
|
21
|
-
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
22
|
-
* with variable-length lists.
|
|
23
|
-
*
|
|
24
|
-
* Options are merged in this order:
|
|
25
|
-
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
26
|
-
*
|
|
27
|
-
* @param hotkeys - Array of hotkey definitions to register, or a getter/ref
|
|
28
|
-
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```vue
|
|
32
|
-
* <script setup>
|
|
33
|
-
* import { useHotkeys } from '@tanstack/vue-hotkeys'
|
|
34
|
-
*
|
|
35
|
-
* useHotkeys([
|
|
36
|
-
* { hotkey: 'Mod+S', callback: () => save() },
|
|
37
|
-
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
38
|
-
* { hotkey: 'Escape', callback: () => close() },
|
|
39
|
-
* ])
|
|
40
|
-
* </script>
|
|
41
|
-
* ```
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```vue
|
|
45
|
-
* <script setup>
|
|
46
|
-
* import { computed } from 'vue'
|
|
47
|
-
* import { useHotkeys } from '@tanstack/vue-hotkeys'
|
|
48
|
-
*
|
|
49
|
-
* const items = computed(() => [...])
|
|
50
|
-
* // Dynamic hotkeys from reactive data
|
|
51
|
-
* useHotkeys(
|
|
52
|
-
* () => items.value.map((item) => ({
|
|
53
|
-
* hotkey: item.shortcut,
|
|
54
|
-
* callback: item.action,
|
|
55
|
-
* options: { enabled: item.enabled },
|
|
56
|
-
* })),
|
|
57
|
-
* { preventDefault: true },
|
|
58
|
-
* )
|
|
59
|
-
* </script>
|
|
60
|
-
* ```
|
|
61
|
-
*/
|
|
62
|
-
declare function useHotkeys(hotkeys: MaybeRefOrGetter<Array<UseHotkeyDefinition>>, commonOptions?: MaybeRefOrGetter<UseHotkeyOptions>): void;
|
|
63
|
-
//#endregion
|
|
64
|
-
export { UseHotkeyDefinition, useHotkeys };
|
|
65
|
-
//# sourceMappingURL=useHotkeys.d.cts.map
|
package/dist/useHotkeys.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport type { MaybeRefOrGetter } from 'vue'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: MaybeRefOrGetter<RegisterableHotkey>\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: MaybeRefOrGetter<UseHotkeyOptions>\n}\n\n/**\n * Vue composable for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * @param hotkeys - Array of hotkey definitions to register, or a getter/ref\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeys } from '@tanstack/vue-hotkeys'\n *\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * </script>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { computed } from 'vue'\n * import { useHotkeys } from '@tanstack/vue-hotkeys'\n *\n * const items = computed(() => [...])\n * // Dynamic hotkeys from reactive data\n * useHotkeys(\n * () => items.value.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * </script>\n * ```\n */\nexport function useHotkeys(\n hotkeys: MaybeRefOrGetter<Array<UseHotkeyDefinition>>,\n commonOptions: MaybeRefOrGetter<UseHotkeyOptions> = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions()\n const manager = getHotkeyManager()\n\n const registrations = new Map<string, RegistrationRecord>()\n\n const stopWatcher = watch(\n () => {\n const resolvedHotkeys = resolveMaybeRefOrGetter(hotkeys)\n const resolvedCommonOptions = resolveMaybeRefOrGetter(commonOptions)\n\n return resolvedHotkeys.map((def, i) => {\n const resolvedHotkey = resolveMaybeRefOrGetter(def.hotkey)\n const resolvedDefOptions = def.options\n ? resolveMaybeRefOrGetter(def.options)\n : {}\n\n const mergedOptions = {\n ...defaultOptions.hotkey,\n ...resolvedCommonOptions,\n ...resolvedDefOptions,\n } as UseHotkeyOptions\n\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString = normalizeRegisterableHotkey(\n resolvedHotkey,\n platform,\n )\n\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 as any)\n\n return {\n index: i,\n hotkeyString,\n callback: def.callback,\n mergedOptions,\n resolvedEnabled,\n resolvedTarget,\n }\n })\n },\n (resolved) => {\n const nextKeys = new Set<string>()\n const prepared: Array<{\n registrationKey: string\n entry: (typeof resolved)[number]\n finalTarget: Document | HTMLElement | Window\n }> = []\n\n for (const entry of resolved) {\n const finalTarget =\n entry.resolvedTarget ??\n (typeof document !== 'undefined' ? document : null)\n\n if (!finalTarget) {\n continue\n }\n\n const registrationKey = `${entry.index}:${entry.hotkeyString}`\n nextKeys.add(registrationKey)\n prepared.push({ registrationKey, entry, finalTarget })\n }\n\n for (const [key, record] of [...registrations.entries()]) {\n if (!nextKeys.has(key)) {\n if (record.handle.isActive) {\n record.handle.unregister()\n }\n registrations.delete(key)\n }\n }\n\n for (const { registrationKey, entry, finalTarget } of prepared) {\n const existing = registrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === finalTarget) {\n existing.handle.callback = entry.callback\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n existing.handle.setOptions(optionsWithoutTarget)\n continue\n }\n\n if (existing) {\n if (existing.handle.isActive) {\n existing.handle.unregister()\n }\n registrations.delete(registrationKey)\n }\n\n const {\n target: _target,\n enabled: _enabled,\n ...restOptions\n } = entry.mergedOptions\n const optionsWithoutTarget = {\n ...restOptions,\n ...(entry.resolvedEnabled === undefined\n ? {}\n : { enabled: entry.resolvedEnabled }),\n }\n\n const handle = manager.register(entry.hotkeyString, entry.callback, {\n ...optionsWithoutTarget,\n target: finalTarget,\n })\n registrations.set(registrationKey, { handle, target: finalTarget })\n }\n },\n { immediate: true },\n )\n\n onUnmounted(() => {\n stopWatcher()\n for (const { handle } of registrations.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrations.clear()\n })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,WACd,SACA,gBAAoD,EAAE,EAChD;CAMN,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,UAAU,kBAAkB;CAElC,MAAM,gCAAgB,IAAI,KAAiC;CAE3D,MAAM,cAAc,YACZ;EACJ,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,wBAAwB,wBAAwB,cAAc;AAEpE,SAAO,gBAAgB,KAAK,KAAK,MAAM;GACrC,MAAM,iBAAiB,wBAAwB,IAAI,OAAO;GAC1D,MAAM,qBAAqB,IAAI,UAC3B,wBAAwB,IAAI,QAAQ,GACpC,EAAE;GAEN,MAAM,gBAAgB;IACpB,GAAG,eAAe;IAClB,GAAG;IACH,GAAG;IACJ;GAGD,MAAM,eAAe,4BACnB,gBAFe,cAAc,YAAY,gBAAgB,CAI1D;GAED,MAAM,kBACJ,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GACpD,MAAM,iBACJ,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAc;AAE1D,UAAO;IACL,OAAO;IACP;IACA,UAAU,IAAI;IACd;IACA;IACA;IACD;IACD;KAEH,aAAa;EACZ,MAAM,2BAAW,IAAI,KAAa;EAClC,MAAM,WAID,EAAE;AAEP,OAAK,MAAM,SAAS,UAAU;GAC5B,MAAM,cACJ,MAAM,mBACL,OAAO,aAAa,cAAc,WAAW;AAEhD,OAAI,CAAC,YACH;GAGF,MAAM,kBAAkB,GAAG,MAAM,MAAM,GAAG,MAAM;AAChD,YAAS,IAAI,gBAAgB;AAC7B,YAAS,KAAK;IAAE;IAAiB;IAAO;IAAa,CAAC;;AAGxD,OAAK,MAAM,CAAC,KAAK,WAAW,CAAC,GAAG,cAAc,SAAS,CAAC,CACtD,KAAI,CAAC,SAAS,IAAI,IAAI,EAAE;AACtB,OAAI,OAAO,OAAO,SAChB,QAAO,OAAO,YAAY;AAE5B,iBAAc,OAAO,IAAI;;AAI7B,OAAK,MAAM,EAAE,iBAAiB,OAAO,iBAAiB,UAAU;GAC9D,MAAM,WAAW,cAAc,IAAI,gBAAgB;AACnD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,aAAa;AAChE,aAAS,OAAO,WAAW,MAAM;IACjC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;IACV,MAAM,uBAAuB;KAC3B,GAAG;KACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;KACvC;AACD,aAAS,OAAO,WAAW,qBAAqB;AAChD;;AAGF,OAAI,UAAU;AACZ,QAAI,SAAS,OAAO,SAClB,UAAS,OAAO,YAAY;AAE9B,kBAAc,OAAO,gBAAgB;;GAGvC,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD,MAAM;GACV,MAAM,uBAAuB;IAC3B,GAAG;IACH,GAAI,MAAM,oBAAoB,SAC1B,EAAE,GACF,EAAE,SAAS,MAAM,iBAAiB;IACvC;GAED,MAAM,SAAS,QAAQ,SAAS,MAAM,cAAc,MAAM,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,iBAAc,IAAI,iBAAiB;IAAE;IAAQ,QAAQ;IAAa,CAAC;;IAGvE,EAAE,WAAW,MAAM,CACpB;AAED,mBAAkB;AAChB,eAAa;AACb,OAAK,MAAM,EAAE,YAAY,cAAc,QAAQ,CAC7C,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,gBAAc,OAAO;GACrB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}
|
package/dist/useKeyHold.cjs
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
2
|
-
let vue = require("vue");
|
|
3
|
-
let _tanstack_vue_store = require("@tanstack/vue-store");
|
|
4
|
-
|
|
5
|
-
//#region src/useKeyHold.ts
|
|
6
|
-
/**
|
|
7
|
-
* Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
|
|
8
|
-
*
|
|
9
|
-
* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
|
|
10
|
-
* to the global KeyStateTracker and uses a selector to determine if
|
|
11
|
-
* the specified key is held.
|
|
12
|
-
*
|
|
13
|
-
* @param key - The key to check (e.g., 'Shift', 'Control', 'A')
|
|
14
|
-
* @returns Reactive ref that is true if the key is currently held down
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```vue
|
|
18
|
-
* <script setup>
|
|
19
|
-
* import { useKeyHold } from '@tanstack/vue-hotkeys'
|
|
20
|
-
*
|
|
21
|
-
* const isShiftHeld = useKeyHold('Shift')
|
|
22
|
-
* <\/script>
|
|
23
|
-
*
|
|
24
|
-
* <template>
|
|
25
|
-
* <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
|
|
26
|
-
* {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
|
|
27
|
-
* </div>
|
|
28
|
-
* </template>
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```vue
|
|
33
|
-
* <script setup>
|
|
34
|
-
* import { useKeyHold } from '@tanstack/vue-hotkeys'
|
|
35
|
-
*
|
|
36
|
-
* const ctrl = useKeyHold('Control')
|
|
37
|
-
* const shift = useKeyHold('Shift')
|
|
38
|
-
* const alt = useKeyHold('Alt')
|
|
39
|
-
* <\/script>
|
|
40
|
-
*
|
|
41
|
-
* <template>
|
|
42
|
-
* <div>
|
|
43
|
-
* <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
|
|
44
|
-
* <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
|
|
45
|
-
* <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
|
|
46
|
-
* </div>
|
|
47
|
-
* </template>
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
function useKeyHold(key) {
|
|
51
|
-
return (0, _tanstack_vue_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => {
|
|
52
|
-
const keyValue = (0, vue.unref)(key);
|
|
53
|
-
const normalizedKey = (typeof keyValue === "string" ? keyValue : String(keyValue)).toLowerCase();
|
|
54
|
-
return state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
//#endregion
|
|
59
|
-
exports.useKeyHold = useKeyHold;
|
|
60
|
-
//# sourceMappingURL=useKeyHold.cjs.map
|
package/dist/useKeyHold.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n * <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n * {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n * </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n * <div>\n * <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n * <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n * <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n * </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n const tracker = getKeyStateTracker()\n\n const isHeld = useSelector(tracker.store, (state) => {\n const keyValue = unref(key)\n const normalizedKey = (\n typeof keyValue === 'string' ? keyValue : String(keyValue)\n ).toLowerCase()\n return state.heldKeys.some(\n (heldKey) => heldKey.toLowerCase() === normalizedKey,\n )\n })\n\n return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,wFAZoC,CAED,QAAQ,UAAU;EACnD,MAAM,0BAAiB,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
|
package/dist/useKeyHold.d.cts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { IndividualKey } from "@tanstack/hotkeys";
|
|
2
|
-
import { MaybeRefOrGetter, Ref } from "vue";
|
|
3
|
-
|
|
4
|
-
//#region src/useKeyHold.d.ts
|
|
5
|
-
/**
|
|
6
|
-
* Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
|
|
7
|
-
*
|
|
8
|
-
* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
|
|
9
|
-
* to the global KeyStateTracker and uses a selector to determine if
|
|
10
|
-
* the specified key is held.
|
|
11
|
-
*
|
|
12
|
-
* @param key - The key to check (e.g., 'Shift', 'Control', 'A')
|
|
13
|
-
* @returns Reactive ref that is true if the key is currently held down
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```vue
|
|
17
|
-
* <script setup>
|
|
18
|
-
* import { useKeyHold } from '@tanstack/vue-hotkeys'
|
|
19
|
-
*
|
|
20
|
-
* const isShiftHeld = useKeyHold('Shift')
|
|
21
|
-
* </script>
|
|
22
|
-
*
|
|
23
|
-
* <template>
|
|
24
|
-
* <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
|
|
25
|
-
* {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
|
|
26
|
-
* </div>
|
|
27
|
-
* </template>
|
|
28
|
-
* ```
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```vue
|
|
32
|
-
* <script setup>
|
|
33
|
-
* import { useKeyHold } from '@tanstack/vue-hotkeys'
|
|
34
|
-
*
|
|
35
|
-
* const ctrl = useKeyHold('Control')
|
|
36
|
-
* const shift = useKeyHold('Shift')
|
|
37
|
-
* const alt = useKeyHold('Alt')
|
|
38
|
-
* </script>
|
|
39
|
-
*
|
|
40
|
-
* <template>
|
|
41
|
-
* <div>
|
|
42
|
-
* <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
|
|
43
|
-
* <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
|
|
44
|
-
* <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
|
|
45
|
-
* </div>
|
|
46
|
-
* </template>
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
declare function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean>;
|
|
50
|
-
//#endregion
|
|
51
|
-
export { useKeyHold };
|
|
52
|
-
//# sourceMappingURL=useKeyHold.d.cts.map
|
package/dist/useKeyHold.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n * <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n * {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n * </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n * <div>\n * <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n * <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n * <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n * </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n const tracker = getKeyStateTracker()\n\n const isHeld = useSelector(tracker.store, (state) => {\n const keyValue = unref(key)\n const normalizedKey = (\n typeof keyValue === 'string' ? keyValue : String(keyValue)\n ).toLowerCase()\n return state.heldKeys.some(\n (heldKey) => heldKey.toLowerCase() === normalizedKey,\n )\n })\n\n return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,QAVe,YAFC,oBAAoB,CAED,QAAQ,UAAU;EACnD,MAAM,WAAW,MAAM,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
|
package/src/HotkeysProvider.tsx
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { defineComponent } from 'vue'
|
|
2
|
-
import { provideHotkeysContext } from './HotkeysProviderContext'
|
|
3
|
-
import type { HotkeysProviderOptions } from './HotkeysProviderContext'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Vue component that provides default options for hotkeys context.
|
|
7
|
-
*
|
|
8
|
-
* @example
|
|
9
|
-
* ```vue
|
|
10
|
-
* <template>
|
|
11
|
-
* <HotkeysProvider :defaultOptions="{ hotkey: { enabled: true } }">
|
|
12
|
-
* <App />
|
|
13
|
-
* </HotkeysProvider>
|
|
14
|
-
* </template>
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
export const HotkeysProvider = defineComponent({
|
|
18
|
-
name: 'HotkeysProvider',
|
|
19
|
-
props: {
|
|
20
|
-
defaultOptions: {
|
|
21
|
-
type: Object as () => HotkeysProviderOptions,
|
|
22
|
-
default: undefined,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
setup(props, { slots }) {
|
|
26
|
-
provideHotkeysContext(props.defaultOptions)
|
|
27
|
-
return () => slots.default?.()
|
|
28
|
-
},
|
|
29
|
-
})
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { inject, provide } from 'vue'
|
|
2
|
-
import type { InjectionKey } from 'vue'
|
|
3
|
-
import type {
|
|
4
|
-
HotkeyRecorderOptions,
|
|
5
|
-
HotkeySequenceRecorderOptions,
|
|
6
|
-
} from '@tanstack/hotkeys'
|
|
7
|
-
import type { UseHotkeyOptions } from './useHotkey'
|
|
8
|
-
import type { UseHotkeySequenceOptions } from './useHotkeySequence'
|
|
9
|
-
|
|
10
|
-
export interface HotkeysProviderOptions {
|
|
11
|
-
hotkey?: Partial<UseHotkeyOptions>
|
|
12
|
-
hotkeyRecorder?: Partial<HotkeyRecorderOptions>
|
|
13
|
-
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
|
|
14
|
-
hotkeySequence?: Partial<UseHotkeySequenceOptions>
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
interface HotkeysContextValue {
|
|
18
|
-
defaultOptions: HotkeysProviderOptions
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const HotkeysContext: InjectionKey<HotkeysContextValue> =
|
|
22
|
-
Symbol('HotkeysContext')
|
|
23
|
-
|
|
24
|
-
const DEFAULT_OPTIONS: HotkeysProviderOptions = {}
|
|
25
|
-
|
|
26
|
-
export function provideHotkeysContext(defaultOptions?: HotkeysProviderOptions) {
|
|
27
|
-
const contextValue: HotkeysContextValue = {
|
|
28
|
-
defaultOptions: defaultOptions ?? DEFAULT_OPTIONS,
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
provide(HotkeysContext, contextValue)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export function useHotkeysContext() {
|
|
35
|
-
return inject(HotkeysContext, null)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export function useDefaultHotkeysOptions() {
|
|
39
|
-
const context = inject(HotkeysContext, null)
|
|
40
|
-
return context?.defaultOptions ?? {}
|
|
41
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// Re-export everything from the core package
|
|
2
|
-
export * from '@tanstack/hotkeys'
|
|
3
|
-
|
|
4
|
-
// Provider
|
|
5
|
-
export * from './HotkeysProvider'
|
|
6
|
-
export * from './HotkeysProviderContext'
|
|
7
|
-
|
|
8
|
-
// Vue-specific composables
|
|
9
|
-
export * from './useHotkey'
|
|
10
|
-
export * from './useHotkeys'
|
|
11
|
-
export * from './useHeldKeys'
|
|
12
|
-
export * from './useHeldKeyCodes'
|
|
13
|
-
export * from './useKeyHold'
|
|
14
|
-
export * from './useHotkeySequence'
|
|
15
|
-
export * from './useHotkeySequences'
|
|
16
|
-
export * from './useHotkeyRecorder'
|
|
17
|
-
export * from './useHotkeyRegistrations'
|
|
18
|
-
export * from './useHotkeySequenceRecorder'
|
|
19
|
-
export * from './useHotkeyHint'
|
package/src/useHeldKeyCodes.ts
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { useSelector } from '@tanstack/vue-store'
|
|
2
|
-
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
|
-
import type { Ref } from 'vue'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Vue composable that returns a reactive ref mapping currently held key names to their physical `event.code` values.
|
|
7
|
-
*
|
|
8
|
-
* This is useful for debugging which physical key was pressed (e.g. distinguishing
|
|
9
|
-
* left vs right Shift via "ShiftLeft" / "ShiftRight").
|
|
10
|
-
*
|
|
11
|
-
* @returns Reactive ref containing record mapping normalized key names to their `event.code` values
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```vue
|
|
15
|
-
* <script setup>
|
|
16
|
-
* import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'
|
|
17
|
-
*
|
|
18
|
-
* const heldKeys = useHeldKeys()
|
|
19
|
-
* const heldCodes = useHeldKeyCodes()
|
|
20
|
-
* </script>
|
|
21
|
-
*
|
|
22
|
-
* <template>
|
|
23
|
-
* <div>
|
|
24
|
-
* <kbd v-for="key in heldKeys" :key="key">
|
|
25
|
-
* {{ key }} <small>{{ heldCodes[key] }}</small>
|
|
26
|
-
* </kbd>
|
|
27
|
-
* </div>
|
|
28
|
-
* </template>
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export function useHeldKeyCodes(): Ref<Record<string, string>> {
|
|
32
|
-
const tracker = getKeyStateTracker()
|
|
33
|
-
return useSelector(tracker.store, (state) => state.heldCodes)
|
|
34
|
-
}
|
package/src/useHeldKeys.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { useSelector } from '@tanstack/vue-store'
|
|
2
|
-
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
|
-
import type { Ref } from 'vue'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Vue composable that returns a reactive ref of currently held keyboard keys.
|
|
7
|
-
*
|
|
8
|
-
* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
|
|
9
|
-
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
10
|
-
* or released.
|
|
11
|
-
*
|
|
12
|
-
* @returns Reactive ref containing array of currently held key names
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```vue
|
|
16
|
-
* <script setup>
|
|
17
|
-
* import { useHeldKeys } from '@tanstack/vue-hotkeys'
|
|
18
|
-
*
|
|
19
|
-
* const heldKeys = useHeldKeys()
|
|
20
|
-
* </script>
|
|
21
|
-
*
|
|
22
|
-
* <template>
|
|
23
|
-
* <div>
|
|
24
|
-
* Currently pressed: {{ heldKeys.join(' + ') || 'None' }}
|
|
25
|
-
* </div>
|
|
26
|
-
* </template>
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
export function useHeldKeys(): Ref<Array<string>> {
|
|
30
|
-
const tracker = getKeyStateTracker()
|
|
31
|
-
return useSelector(tracker.store, (state) => state.heldKeys)
|
|
32
|
-
}
|