Skip to content

Latest commit

 

History

History
128 lines (95 loc) · 7.78 KB

README.md

File metadata and controls

128 lines (95 loc) · 7.78 KB
Raw

Svelte Command Palette

Increase your productivity exponentially. 🚀🚀

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

Demo

svelte-command-palette

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;