rohitpotato / svelte-command-palette Goto Github PK

i bet you knew this was coming :)

i'd love to style things with tailwind and/or css variables.

For more complex applications, a better search function than fuse might be of use. Just a thought.
Algolia

Looking at the action type:

• id should be actionId and subTitle starts with a single quote but ends with a double quote.
  Also, removing comma at end of line 42

hi! finally got around to exploring using this :)

right now all actions must be defined up front with defineActions. this creates a centralized monster file that has all the things.

what if we could registerAction and deregisterAction? this would help break up the files to colocate them with the routes where they are applicable

The height of the <div id="wrapper"> is always set to be 100vh. This doesn't work when there's only one or two available options in the palette since the box-shadow of the container still remains at the same height.

PR #6 changes this to property to max-height instead which can accomodate for such cases.

PS. @rohitpotato Sorry for the delay in responding, I look at Open Source projects on the weekends :P

Hi folks,
Thanks for creating such a cool project, really a great job!

I tried to integrate this module into one of my projects and noticed that the keybinding got overwrote unexpectedly.
For example, once I add the component to my app, my upArrow key won't work anymore, even without the palette being visible.
I noticed that in the codebase, svelte-command-pallete disable the default behavior of the keystroke:

Is it possible to only enable the logic when the palette is visiable?
Also, there might be something wrong with my setup, as I am still learning svelte :)
Here is how I integrated the svelte-command-pallete
In file /component/commandPallete.svelte

<script lang="ts">
    import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';

     // define actions using the defineActions API
    const commands = defineActions([
        {
            actionId: 1,
            title: "Open Svelte Command Palette on github",
            subTitle: "This opens github in a new tab!",
            onRun: ({ action, storeProps, storeMethods }) => {
                if (!storeProps.isVisible) {
                    return;
                }
                window.open("https://github.com/rohitpotato/svelte-command-palette");
            },
            shortcut: "Space k"
        }
    ]);
</script>

<CommandPalette {commands}/>

How I reference the component in the main app.svelte is as the following

<script lang="ts">
    import CommandPalette from "./components/CommandPalette.svelte";
</script>
<main>
  <CommandPalette/>
</main>

Any help is appreciated, thanks!

I have a use case where users can create new items and so far I need to reload the page every time before a new item is added to the commands of the palette.

Let me know if dynamic item adding is supported by this package by default, so far I have implemented a workaround by passing a key and re-rendering every time an item is added.

Exclude folders like .vscode, .idea, etc from being committed. Add to .gitignore

Hi there, thanks in advance for this great package. I have encountered an issue where pressing default key combination (here Ctrl + K) also focuses browsers (tested in Chrome, Edge and Firefox) address bar with search.

Hi there, thanks so much for this project -- it's doing exactly what I wanted in a keyboard handler/interface!

As a feature request, please add the action type (maybe as CommandAction) to the default exports for the project.

Use case:

• I'm making a fairly complex editor with actions for several "modes" -- e.g. some actions when viewing, additional actions when editing -- as well as "global" actions that apply to both.

• As such, I'm declaring various sets of "actions" in a separate .ts file:

file: AppActions.ts
import { type CommandAction } from "svelte-command-palette"
export const GlobalActions: CommandAction[] = [...]
export const ViewActions: CommandAction[] = [...]
export const EditActions: CommandAction[] = [...]

• ^^^ note the type CommandAction above -- this is the actual feature request.

• Then combining the sets in components as necessary:

file: SomeComponent.svelte
<script lang="ts">
  import CommandPalette, { defineActions, type CommandAction } from "svelte-command-palette"
  import { GlobalActions, ViewActions } from "./AppActions"
  const commands = defineActions([...GlobalActions, ...ViewActions])
</script>

<CommandPalette {commands} />

Workaround

For now, I can more-or-less "look up" the type by doing:

type CommandActions = Parameters<typeof defineActions>[0]

but that feels like a hack.

Thanks again!