Svelte Command Palette

Increase your productivity exponentially. 🚀🚀

Get started with command-palette with 2.1Kb Minified and ~700B Gzipped + Minified

Demo

Features

• Fuzzy search powered by fuse.js
• Run actions conditionally
• Super simple API, just define your actions and it just works!
• Advanced conditional actions - decide whether to run your action based on the current state of your command palette
• Access to paletteStore , update your update palette store from anywhere to make updates to your command-palette.
• Keyboard shortcuts - define keyboard shortcuts for your actions!

and more

Installation

Install svelte-command-palette with npm

  npm install svelte-command-palette

Usage/Examples

<script>
    import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette'

    // define actions using the defineActions API

    const paletteMethods = createStoreMethods();

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

// render your command palette at the root of your application, say _layout.svelte

<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>

<CommandPalette {actions}>

API

Component Styling API

The <CommandPalette /> component accepts the following optional properties for styling:

| Property | Type | Default | Description | | ---------------------------- | -------------------------------- | ---------------------- | ---------------------------------------------------------------------- | | unstyled | boolean | false | When true, the default styles are not applied to the modal elements. | | placeholder | string | "Search for actions" | Placeholder for the command palette input | | overlayClass | string | null | null | Class name for the palette overlay. | | paletteWrapperInnerClass | string | null | null | Class name for the cmd palette wrapper element. | | inputClass | string | null | null | Class name for the cmd palette input. | | resultsContainerClass | string | null | null | Class name for the results container. | | resultContainerClass | string | null | null | Class name for the result item container. | | optionSelectedClass | string | null | null | Class name for the currently selected result item. | | titleClass | string | null | null | Class name for the result title. | | subtitleClass | string | null | null | Class name for the result subtitle. | | descriptionClass | string | null | null | Class name for the result description. | | keyboardButtonClass | string | null | null | Class name for the keyboard shortcuts. | | overlayStyle | Record<string, string | number> | {} | Style properties of the overlay. | | paletteWrapperInnerStyle | Record<string, string | number> | {} | Style properties of the command palette wrapper element. | | inputStyle | Record<string, string | number> | {} | Style properties of cmd palette input. | | resultsContainerStyle | Record<string, string | number> | {} | Style properties of results container. | | resultContainerStyle | Record<string, string | number> | {} | Style properties result item container. | | titleStyle | Record<string, string | number> | {} | Style properties for result item title. | | subtitleStyle | Record<string, string | number> | {} | Style properties for result item subtitle. | | descriptionStyle | Record<string, string | number> | {} | Style properties for result item description. | | optionSelectedStyle | Record<string, string | number> | {} | Style properties selected result item. | | keyboardButtonStyle | Record<string, string | number> | {} | Style properties for the keyboard shortcut. |

Action API

	actionId?: ActionId;
	canActionRun?: (args: onRunParams) => boolean;
	title: string;
	description?: string;
	subTitle?: string;
	onRun?: (args: onRunParams) => void;
	keywords?: Array<string>;
	shortcut?: string;

Store Methods

Get palette methods from createStoreMethods.

import { createStoreMethods } from 'svelte-command-palette`

const methods = createStoreMethods();

method.openPalette();

API

    togglePalette: () => void;
    getAllCalledActions: () => ActionId[];
    storeCalledAction: (id: ActionId) => void;
    revertLastAction: (id: ActionId) => void;
    resetActionLog: () => void;
    openPalette: () => void;
    closePalette: () => void;
    resetPaletteStore: () => void;