https://github.com/rohitpotato/svelte-command-palette
Dead simple command palette for svelte
https://github.com/rohitpotato/svelte-command-palette
cmd-palette command-palette palette sapper svelte-components svelte3 sveltekit
Last synced: 9 days ago
JSON representation
Dead simple command palette for svelte
- Host: GitHub
- URL: https://github.com/rohitpotato/svelte-command-palette
- Owner: rohitpotato
- License: mit
- Created: 2022-06-17T23:22:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-17T22:46:27.000Z (almost 2 years ago)
- Last Synced: 2025-03-29T15:02:38.064Z (16 days ago)
- Topics: cmd-palette, command-palette, palette, sapper, svelte-components, svelte3, sveltekit
- Language: Svelte
- Homepage: https://svelte-command-palette.vercel.app
- Size: 326 KB
- Stars: 185
- Watchers: 2
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-command-palette - Svelte command palette:
- awesome-sveltekit - [code
README
# 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
```bash
npm install svelte-command-palette
```
## Usage/Examples
```svelte
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"
}
])
// render your command palette at the root of your application, say _layout.svelte
paletteMethods.openPalette()}>Open Command Palette
```
## API
### Component Styling API
The `` 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 | `{}` | Style properties of the overlay. |
| **paletteWrapperInnerStyle** | Record | `{}` | Style properties of the command palette wrapper element. |
| **inputStyle** | Record | `{}` | Style properties of cmd palette input. |
| **resultsContainerStyle** | Record | `{}` | Style properties of results container. |
| **resultContainerStyle** | Record | `{}` | Style properties result item container. |
| **titleStyle** | Record | `{}` | Style properties for result item title. |
| **subtitleStyle** | Record | `{}` | Style properties for result item subtitle. |
| **descriptionStyle** | Record | `{}` | Style properties for result item description. |
| **optionSelectedStyle** | Record | `{}` | Style properties selected result item. |
| **keyboardButtonStyle** | Record | `{}` | 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;
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;
```