|
1 | | -# create-svelte |
| 1 | +# Svelte Command Palette |
2 | 2 |
|
3 | | -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). |
| 3 | +### Increase your productivity exponentially. 🚀🚀 |
4 | 4 |
|
5 | | -## Creating a project |
| 5 | +## Demo |
6 | 6 |
|
7 | | -If you're seeing this, you've probably already done this step. Congrats! |
| 7 | + |
8 | 8 |
|
9 | | -```bash |
10 | | -# create a new project in the current directory |
11 | | -npm init svelte |
| 9 | +## Features |
12 | 10 |
|
13 | | -# create a new project in my-app |
14 | | -npm init svelte my-app |
15 | | -``` |
| 11 | +- Fuzzy search powered by fuse.js |
| 12 | +- Run actions conditionally |
| 13 | +- Super simple API, just define your actions and it just works! |
| 14 | +- Advanced conditional actions - decide whether to run your action based on the current state of your command palette |
| 15 | +- Access to `paletteStore` , update your update palette store from anywhere to make updates to your command-palette. |
| 16 | +- Keyboard shortcuts - define keyboard shortcuts for your actions! |
16 | 17 |
|
17 | | -## Developing |
| 18 | +and more |
18 | 19 |
|
19 | | -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
| 20 | +## Installation |
20 | 21 |
|
21 | | -```bash |
22 | | -npm run dev |
| 22 | +Install svelte-command-palette with npm |
23 | 23 |
|
24 | | -# or start the server and open the app in a new browser tab |
25 | | -npm run dev -- --open |
| 24 | +```bash |
| 25 | + npm install svelte-command-palette |
26 | 26 | ``` |
27 | 27 |
|
28 | | -## Building |
| 28 | +## Usage/Examples |
29 | 29 |
|
30 | | -To create a production version of your app: |
| 30 | +```javascript |
| 31 | +<script> |
| 32 | + import CommandPalette, { defineActions } from 'svelte-command-palette' |
31 | 33 |
|
32 | | -```bash |
33 | | -npm run build |
34 | | -``` |
| 34 | + // define actions using the defineActions API |
| 35 | + |
| 36 | + const actions = defineActions([ |
| 37 | + { |
| 38 | + id: 1, |
| 39 | + title: "Open Svelte Command Palette on github", |
| 40 | + subTitle: 'This opens github in a new tab!", |
| 41 | + onRun: ({ action, storeProps, storeMethods }) => { |
| 42 | + window.open("https://github.com/rohitpotato/svelte-command-palette"), |
| 43 | + }, |
| 44 | + shortcut: "Space k" |
| 45 | + } |
| 46 | + ]) |
| 47 | +</script> |
35 | 48 |
|
36 | | -You can preview the production build with `npm run preview`. |
| 49 | +// render your command palette at the root of your application, say _layout.svelte |
37 | 50 |
|
38 | | -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. |
| 51 | +<CommandPalette {actions}> |
| 52 | +
|
| 53 | +``` |
0 commit comments