@tanstack/vue-hotkeys 0.8.4 → 0.9.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/index.cjs CHANGED
@@ -9,6 +9,7 @@ const require_useKeyHold = require('./useKeyHold.cjs');
9
9
  const require_useHotkeySequence = require('./useHotkeySequence.cjs');
10
10
  const require_useHotkeySequences = require('./useHotkeySequences.cjs');
11
11
  const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
12
+ const require_useHotkeyRegistrations = require('./useHotkeyRegistrations.cjs');
12
13
  const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
13
14
 
14
15
  exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
@@ -18,6 +19,7 @@ exports.useHeldKeyCodes = require_useHeldKeyCodes.useHeldKeyCodes;
18
19
  exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
19
20
  exports.useHotkey = require_useHotkey.useHotkey;
20
21
  exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
22
+ exports.useHotkeyRegistrations = require_useHotkeyRegistrations.useHotkeyRegistrations;
21
23
  exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
22
24
  exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
23
25
  exports.useHotkeySequences = require_useHotkeySequences.useHotkeySequences;
package/dist/index.d.cts CHANGED
@@ -8,6 +8,7 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.cjs";
8
8
  import { useKeyHold } from "./useKeyHold.cjs";
9
9
  import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequences.cjs";
10
10
  import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
11
+ import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.cjs";
11
12
  import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
12
13
  export * from "@tanstack/hotkeys";
13
- export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
14
+ export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
package/dist/index.d.ts CHANGED
@@ -8,6 +8,7 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
8
8
  import { useKeyHold } from "./useKeyHold.js";
9
9
  import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequences.js";
10
10
  import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
11
+ import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
11
12
  import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
12
13
  export * from "@tanstack/hotkeys";
13
- export { HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
14
+ export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
package/dist/index.js CHANGED
@@ -8,8 +8,9 @@ import { useKeyHold } from "./useKeyHold.js";
8
8
  import { useHotkeySequence } from "./useHotkeySequence.js";
9
9
  import { useHotkeySequences } from "./useHotkeySequences.js";
10
10
  import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
11
+ import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
11
12
  import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
12
13
 
13
14
  export * from "@tanstack/hotkeys"
14
15
 
15
- export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
16
+ export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
@@ -0,0 +1,26 @@
1
+ let _tanstack_hotkeys = require("@tanstack/hotkeys");
2
+ let _tanstack_vue_store = require("@tanstack/vue-store");
3
+
4
+ //#region src/useHotkeyRegistrations.ts
5
+ /**
6
+ * Vue composable that reactively reads all hotkey and sequence registrations
7
+ * from the singleton managers.
8
+ *
9
+ * This is a standalone composable that does NOT require the HotkeysProvider.
10
+ * It subscribes to both HotkeyManager and SequenceManager stores and
11
+ * triggers reactivity when registrations change.
12
+ *
13
+ * @returns Object with `hotkeys` and `sequences` refs
14
+ */
15
+ function useHotkeyRegistrations() {
16
+ const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
17
+ const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
18
+ return {
19
+ hotkeys: (0, _tanstack_vue_store.useStore)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
20
+ sequences: (0, _tanstack_vue_store.useStore)(sequenceManager.registrations, (state) => Array.from(state.values()))
21
+ };
22
+ }
23
+
24
+ //#endregion
25
+ exports.useHotkeyRegistrations = useHotkeyRegistrations;
26
+ //# sourceMappingURL=useHotkeyRegistrations.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport {\n getHotkeyManager,\n getSequenceManager,\n toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n HotkeyRegistrationView,\n SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n /** All registered hotkeys (public view, no callbacks) */\n hotkeys: Ref<Array<HotkeyRegistrationView>>\n /** All registered sequences */\n sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n const hotkeyManager = getHotkeyManager()\n const sequenceManager = getSequenceManager()\n\n const hotkeys = useStore(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useStore(sequenceManager.registrations, (state) =>\n Array.from(state.values()),\n )\n\n return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,2CARgB,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,6CAJS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
@@ -0,0 +1,27 @@
1
+ import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
2
+ import { Ref } from "vue";
3
+
4
+ //#region src/useHotkeyRegistrations.d.ts
5
+ /**
6
+ * Return type for useHotkeyRegistrations.
7
+ */
8
+ interface HotkeyRegistrationsResult {
9
+ /** All registered hotkeys (public view, no callbacks) */
10
+ hotkeys: Ref<Array<HotkeyRegistrationView>>;
11
+ /** All registered sequences */
12
+ sequences: Ref<Array<SequenceRegistrationView>>;
13
+ }
14
+ /**
15
+ * Vue composable that reactively reads all hotkey and sequence registrations
16
+ * from the singleton managers.
17
+ *
18
+ * This is a standalone composable that does NOT require the HotkeysProvider.
19
+ * It subscribes to both HotkeyManager and SequenceManager stores and
20
+ * triggers reactivity when registrations change.
21
+ *
22
+ * @returns Object with `hotkeys` and `sequences` refs
23
+ */
24
+ declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
25
+ //#endregion
26
+ export { HotkeyRegistrationsResult, useHotkeyRegistrations };
27
+ //# sourceMappingURL=useHotkeyRegistrations.d.cts.map
@@ -0,0 +1,27 @@
1
+ import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
2
+ import { Ref } from "vue";
3
+
4
+ //#region src/useHotkeyRegistrations.d.ts
5
+ /**
6
+ * Return type for useHotkeyRegistrations.
7
+ */
8
+ interface HotkeyRegistrationsResult {
9
+ /** All registered hotkeys (public view, no callbacks) */
10
+ hotkeys: Ref<Array<HotkeyRegistrationView>>;
11
+ /** All registered sequences */
12
+ sequences: Ref<Array<SequenceRegistrationView>>;
13
+ }
14
+ /**
15
+ * Vue composable that reactively reads all hotkey and sequence registrations
16
+ * from the singleton managers.
17
+ *
18
+ * This is a standalone composable that does NOT require the HotkeysProvider.
19
+ * It subscribes to both HotkeyManager and SequenceManager stores and
20
+ * triggers reactivity when registrations change.
21
+ *
22
+ * @returns Object with `hotkeys` and `sequences` refs
23
+ */
24
+ declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
25
+ //#endregion
26
+ export { HotkeyRegistrationsResult, useHotkeyRegistrations };
27
+ //# sourceMappingURL=useHotkeyRegistrations.d.ts.map
@@ -0,0 +1,26 @@
1
+ import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
2
+ import { useStore } from "@tanstack/vue-store";
3
+
4
+ //#region src/useHotkeyRegistrations.ts
5
+ /**
6
+ * Vue composable that reactively reads all hotkey and sequence registrations
7
+ * from the singleton managers.
8
+ *
9
+ * This is a standalone composable that does NOT require the HotkeysProvider.
10
+ * It subscribes to both HotkeyManager and SequenceManager stores and
11
+ * triggers reactivity when registrations change.
12
+ *
13
+ * @returns Object with `hotkeys` and `sequences` refs
14
+ */
15
+ function useHotkeyRegistrations() {
16
+ const hotkeyManager = getHotkeyManager();
17
+ const sequenceManager = getSequenceManager();
18
+ return {
19
+ hotkeys: useStore(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
20
+ sequences: useStore(sequenceManager.registrations, (state) => Array.from(state.values()))
21
+ };
22
+ }
23
+
24
+ //#endregion
25
+ export { useHotkeyRegistrations };
26
+ //# sourceMappingURL=useHotkeyRegistrations.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport {\n getHotkeyManager,\n getSequenceManager,\n toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n HotkeyRegistrationView,\n SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n /** All registered hotkeys (public view, no callbacks) */\n hotkeys: Ref<Array<HotkeyRegistrationView>>\n /** All registered sequences */\n sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n const hotkeyManager = getHotkeyManager()\n const sequenceManager = getSequenceManager()\n\n const hotkeys = useStore(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useStore(sequenceManager.registrations, (state) =>\n Array.from(state.values()),\n )\n\n return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,yBAAoD;CAClE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,SAAS,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,SAAS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
@@ -1 +1 @@
1
- {"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { HeldKey } 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 `useStore` 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<HeldKey>): Ref<boolean> {\n const tracker = getKeyStateTracker()\n\n const isHeld = useStore(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,KAA8C;AAavE,qFAZoC,CAEJ,QAAQ,UAAU;EAChD,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"}
1
+ {"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } 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 `useStore` 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 = useStore(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,qFAZoC,CAEJ,QAAQ,UAAU;EAChD,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"}
@@ -1,4 +1,4 @@
1
- import { HeldKey } from "@tanstack/hotkeys";
1
+ import { IndividualKey } from "@tanstack/hotkeys";
2
2
  import { MaybeRefOrGetter, Ref } from "vue";
3
3
 
4
4
  //#region src/useKeyHold.d.ts
@@ -46,7 +46,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
46
46
  * </template>
47
47
  * ```
48
48
  */
49
- declare function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean>;
49
+ declare function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean>;
50
50
  //#endregion
51
51
  export { useKeyHold };
52
52
  //# sourceMappingURL=useKeyHold.d.cts.map
@@ -1,4 +1,4 @@
1
- import { HeldKey } from "@tanstack/hotkeys";
1
+ import { IndividualKey } from "@tanstack/hotkeys";
2
2
  import { MaybeRefOrGetter, Ref } from "vue";
3
3
 
4
4
  //#region src/useKeyHold.d.ts
@@ -46,7 +46,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
46
46
  * </template>
47
47
  * ```
48
48
  */
49
- declare function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean>;
49
+ declare function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean>;
50
50
  //#endregion
51
51
  export { useKeyHold };
52
52
  //# sourceMappingURL=useKeyHold.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { HeldKey } 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 `useStore` 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<HeldKey>): Ref<boolean> {\n const tracker = getKeyStateTracker()\n\n const isHeld = useStore(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,KAA8C;AAavE,QAVe,SAFC,oBAAoB,CAEJ,QAAQ,UAAU;EAChD,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"}
1
+ {"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } 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 `useStore` 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 = useStore(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,SAFC,oBAAoB,CAEJ,QAAQ,UAAU;EAChD,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/vue-hotkeys",
3
- "version": "0.8.4",
3
+ "version": "0.9.1",
4
4
  "description": "Vue adapter for TanStack Hotkeys",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -43,7 +43,7 @@
43
43
  ],
44
44
  "dependencies": {
45
45
  "@tanstack/vue-store": "^0.9.3",
46
- "@tanstack/hotkeys": "0.6.4"
46
+ "@tanstack/hotkeys": "0.7.1"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@vitejs/plugin-vue": "^6.0.5",
package/src/index.ts CHANGED
@@ -14,4 +14,5 @@ export * from './useKeyHold'
14
14
  export * from './useHotkeySequence'
15
15
  export * from './useHotkeySequences'
16
16
  export * from './useHotkeyRecorder'
17
+ export * from './useHotkeyRegistrations'
17
18
  export * from './useHotkeySequenceRecorder'
@@ -0,0 +1,46 @@
1
+ import { useStore } from '@tanstack/vue-store'
2
+ import {
3
+ getHotkeyManager,
4
+ getSequenceManager,
5
+ toHotkeyRegistrationView,
6
+ } from '@tanstack/hotkeys'
7
+ import type {
8
+ HotkeyRegistrationView,
9
+ SequenceRegistrationView,
10
+ } from '@tanstack/hotkeys'
11
+ import type { Ref } from 'vue'
12
+
13
+ /**
14
+ * Return type for useHotkeyRegistrations.
15
+ */
16
+ export interface HotkeyRegistrationsResult {
17
+ /** All registered hotkeys (public view, no callbacks) */
18
+ hotkeys: Ref<Array<HotkeyRegistrationView>>
19
+ /** All registered sequences */
20
+ sequences: Ref<Array<SequenceRegistrationView>>
21
+ }
22
+
23
+ /**
24
+ * Vue composable that reactively reads all hotkey and sequence registrations
25
+ * from the singleton managers.
26
+ *
27
+ * This is a standalone composable that does NOT require the HotkeysProvider.
28
+ * It subscribes to both HotkeyManager and SequenceManager stores and
29
+ * triggers reactivity when registrations change.
30
+ *
31
+ * @returns Object with `hotkeys` and `sequences` refs
32
+ */
33
+ export function useHotkeyRegistrations(): HotkeyRegistrationsResult {
34
+ const hotkeyManager = getHotkeyManager()
35
+ const sequenceManager = getSequenceManager()
36
+
37
+ const hotkeys = useStore(hotkeyManager.registrations, (state) =>
38
+ Array.from(state.values()).map(toHotkeyRegistrationView),
39
+ )
40
+
41
+ const sequences = useStore(sequenceManager.registrations, (state) =>
42
+ Array.from(state.values()),
43
+ )
44
+
45
+ return { hotkeys, sequences }
46
+ }
package/src/useKeyHold.ts CHANGED
@@ -2,7 +2,7 @@ import { useStore } from '@tanstack/vue-store'
2
2
  import { getKeyStateTracker } from '@tanstack/hotkeys'
3
3
  import { unref } from 'vue'
4
4
  import type { MaybeRefOrGetter, Ref } from 'vue'
5
- import type { HeldKey } from '@tanstack/hotkeys'
5
+ import type { IndividualKey } from '@tanstack/hotkeys'
6
6
 
7
7
  /**
8
8
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
@@ -48,7 +48,7 @@ import type { HeldKey } from '@tanstack/hotkeys'
48
48
  * </template>
49
49
  * ```
50
50
  */
51
- export function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean> {
51
+ export function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {
52
52
  const tracker = getKeyStateTracker()
53
53
 
54
54
  const isHeld = useStore(tracker.store, (state) => {