diff --git a/assets/ts/command_palette.ts b/assets/ts/command_palette.ts new file mode 100644 index 0000000..6783b80 --- /dev/null +++ b/assets/ts/command_palette.ts @@ -0,0 +1,25 @@ +interface CommandPaletteKbHook { + el: HTMLElement; + mounted(): void; + destroyed(): void; +} + +export const ShadixCommandPaletteKb = { + mounted(this: CommandPaletteKbHook) { + const trigger = this.el; + + const onKey = (e: KeyboardEvent) => { + if (e.key !== "k") return; + if (!(e.metaKey || e.ctrlKey)) return; + e.preventDefault(); + trigger.click(); + }; + + window.addEventListener("keydown", onKey); + (this as unknown as { _cleanup?: () => void })._cleanup = () => + window.removeEventListener("keydown", onKey); + }, + destroyed(this: CommandPaletteKbHook) { + (this as unknown as { _cleanup?: () => void })._cleanup?.(); + }, +}; diff --git a/assets/ts/index.ts b/assets/ts/index.ts index a3edd8a..252c808 100644 --- a/assets/ts/index.ts +++ b/assets/ts/index.ts @@ -4,6 +4,7 @@ import { ShadixCarousel } from "./carousel"; import { ShadixCollapsible } from "./collapsible"; import { ShadixCombobox } from "./combobox"; import { ShadixCommand } from "./command"; +import { ShadixCommandPaletteKb } from "./command_palette"; import { ShadixContextMenu } from "./context_menu"; import { ShadixDialog } from "./dialog"; import { ShadixDropdownMenu } from "./dropdown_menu"; @@ -17,4 +18,4 @@ import { ShadixTabs } from "./tabs"; import { ShadixSonner } from "./sonner"; import { ShadixTooltip } from "./tooltip"; -export const Hooks = { ShadixAlertDialog, ShadixAvatar, ShadixCarousel, ShadixCollapsible, ShadixCombobox, ShadixCommand, ShadixContextMenu, ShadixDialog, ShadixDropdownMenu, ShadixHoverCard, ShadixInputOtp, ShadixPopover, ShadixResizable, ShadixSelect, ShadixSheet, ShadixSonner, ShadixTabs, ShadixTooltip }; +export const Hooks = { ShadixAlertDialog, ShadixAvatar, ShadixCarousel, ShadixCollapsible, ShadixCombobox, ShadixCommand, ShadixCommandPaletteKb, ShadixContextMenu, ShadixDialog, ShadixDropdownMenu, ShadixHoverCard, ShadixInputOtp, ShadixPopover, ShadixResizable, ShadixSelect, ShadixSheet, ShadixSonner, ShadixTabs, ShadixTooltip };