@tanstack/vue-hotkeys 0.10.0 → 0.11.0

package/README.md

@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_hotkeys.png" alt="TanStack Hotkeys" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/hotkeys.png"
+      alt="TanStack Hotkeys"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />

package/dist/index.cjs

@@ -11,6 +11,7 @@ const require_useHotkeySequences = require('./useHotkeySequences.cjs');
 const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
 const require_useHotkeyRegistrations = require('./useHotkeyRegistrations.cjs');
 const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
+const require_useHotkeyHint = require('./useHotkeyHint.cjs');
 
 exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
 exports.provideHotkeysContext = require_HotkeysProviderContext.provideHotkeysContext;
@@ -18,6 +19,7 @@ exports.useDefaultHotkeysOptions = require_HotkeysProviderContext.useDefaultHotk
 exports.useHeldKeyCodes = require_useHeldKeyCodes.useHeldKeyCodes;
 exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
 exports.useHotkey = require_useHotkey.useHotkey;
+exports.useHotkeyHint = require_useHotkeyHint.useHotkeyHint;
 exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
 exports.useHotkeyRegistrations = require_useHotkeyRegistrations.useHotkeyRegistrations;
 exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;

package/dist/index.d.cts

@@ -10,5 +10,6 @@ import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequ
 import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
 import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.cjs";
 import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
+import { useHotkeyHint } from "./useHotkeyHint.cjs";
 export * from "@tanstack/hotkeys";
-export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/index.d.ts

@@ -10,5 +10,6 @@ import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequ
 import { VueHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
 import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 import { VueHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
+import { useHotkeyHint } from "./useHotkeyHint.js";
 export * from "@tanstack/hotkeys";
-export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, VueHotkeyRecorder, VueHotkeySequenceRecorder, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/index.js

@@ -10,7 +10,8 @@ import { useHotkeySequences } from "./useHotkeySequences.js";
 import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
 import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
+import { useHotkeyHint } from "./useHotkeyHint.js";
 
 export * from "@tanstack/hotkeys"
 
-export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/useHotkeyHint.cjs

@@ -0,0 +1,20 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let vue = require("vue");
+let _tanstack_vue_store = require("@tanstack/vue-store");
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a computed ref indicating whether held modifiers reveal this shortcut.
+* Pass refs or getters to track changing bindings and options.
+* Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+* every modifier. Combine with the action's enabled state before showing a badge.
+* This helper does not register a shortcut or check whether its target is focused.
+*/
+function useHotkeyHint(hotkey, options = {}) {
+	const held = (0, _tanstack_vue_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, vue.computed)(() => (0, _tanstack_hotkeys.matchesHeldModifiers)((0, vue.toValue)(hotkey), held.value, (0, vue.toValue)(options)));
+}
+
+//#endregion
+exports.useHotkeyHint = useHotkeyHint;
+//# sourceMappingURL=useHotkeyHint.cjs.map

package/dist/useHotkeyHint.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.cjs","names":[],"sources":["../src/useHotkeyHint.ts"],"sourcesContent":["import { computed, toValue } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed ref indicating whether held modifiers reveal this shortcut.\n * Pass refs or getters to track changing bindings and options.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function useHotkeyHint(\n  hotkey: MaybeRefOrGetter<RegisterableHotkey>,\n  options: MaybeRefOrGetter<HeldModifierOptions> = {},\n): ComputedRef<boolean> {\n  const held = useSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,cACd,QACA,UAAiD,EAAE,EAC7B;CACtB,MAAM,uFACgB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,6FAC+B,OAAO,EAAE,KAAK,wBAAe,QAAQ,CAAC,CACpE"}

package/dist/useHotkeyHint.d.cts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+ * every modifier. Combine with the action's enabled state before showing a badge.
+ * This helper does not register a shortcut or check whether its target is focused.
+ */
+declare function useHotkeyHint(hotkey: MaybeRefOrGetter<RegisterableHotkey>, options?: MaybeRefOrGetter<HeldModifierOptions>): ComputedRef<boolean>;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.cts.map

package/dist/useHotkeyHint.d.ts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+ * every modifier. Combine with the action's enabled state before showing a badge.
+ * This helper does not register a shortcut or check whether its target is focused.
+ */
+declare function useHotkeyHint(hotkey: MaybeRefOrGetter<RegisterableHotkey>, options?: MaybeRefOrGetter<HeldModifierOptions>): ComputedRef<boolean>;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.ts.map

package/dist/useHotkeyHint.js

@@ -0,0 +1,20 @@
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+import { computed, toValue } from "vue";
+import { useSelector } from "@tanstack/vue-store";
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a computed ref indicating whether held modifiers reveal this shortcut.
+* Pass refs or getters to track changing bindings and options.
+* Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+* every modifier. Combine with the action's enabled state before showing a badge.
+* This helper does not register a shortcut or check whether its target is focused.
+*/
+function useHotkeyHint(hotkey, options = {}) {
+	const held = useSelector(getKeyStateTracker().store, (state) => state.heldKeys);
+	return computed(() => matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)));
+}
+
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.js.map

package/dist/useHotkeyHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.js","names":[],"sources":["../src/useHotkeyHint.ts"],"sourcesContent":["import { computed, toValue } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed ref indicating whether held modifiers reveal this shortcut.\n * Pass refs or getters to track changing bindings and options.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function useHotkeyHint(\n  hotkey: MaybeRefOrGetter<RegisterableHotkey>,\n  options: MaybeRefOrGetter<HeldModifierOptions> = {},\n): ComputedRef<boolean> {\n  const held = useSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,cACd,QACA,UAAiD,EAAE,EAC7B;CACtB,MAAM,OAAO,YACX,oBAAoB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,QAAO,eACL,qBAAqB,QAAQ,OAAO,EAAE,KAAK,OAAO,QAAQ,QAAQ,CAAC,CACpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Vue adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,11 +43,11 @@
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.11.0",
-    "@tanstack/hotkeys": "0.8.0"
+    "@tanstack/hotkeys": "0.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",
-    "@vue/test-utils": "^2.4.6",
+    "@vue/test-utils": "^2.4.8",
     "vue": "^3.5.33"
   },
   "peerDependencies": {

package/src/index.ts

@@ -16,3 +16,4 @@ export * from './useHotkeySequences'
 export * from './useHotkeyRecorder'
 export * from './useHotkeyRegistrations'
 export * from './useHotkeySequenceRecorder'
+export * from './useHotkeyHint'

package/src/useHotkeyHint.ts

@@ -0,0 +1,25 @@
+import { computed, toValue } from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'
+
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+ * every modifier. Combine with the action's enabled state before showing a badge.
+ * This helper does not register a shortcut or check whether its target is focused.
+ */
+export function useHotkeyHint(
+  hotkey: MaybeRefOrGetter<RegisterableHotkey>,
+  options: MaybeRefOrGetter<HeldModifierOptions> = {},
+): ComputedRef<boolean> {
+  const held = useSelector(
+    getKeyStateTracker().store,
+    (state) => state.heldKeys,
+  )
+  return computed(() =>
+    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),
+  )
+}