Svelte Command Palette
Dead simple command palette for svelte
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([
{
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 commands={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;
