Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidwarrington/command-palette
https://github.com/davidwarrington/command-palette
Last synced: 18 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/davidwarrington/command-palette
- Owner: davidwarrington
- Created: 2021-10-10T19:43:20.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-04T22:35:52.000Z (about 3 years ago)
- Last Synced: 2024-10-11T09:47:00.153Z (about 1 month ago)
- Language: Svelte
- Size: 56.6 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Command Palette
Wouldn't it be handy if we had a command palette at hand to perform common actions on every site we develop? This command palette was built to address that. It's intended for use in development environments on any project. Bring your own commands.
The Command Palette is a HTML Custom Element so should work on any front end.
## Setup
```html
```
```js
import 'command-palette';
const palette = document.querySelector('command-palette');
palette.commands = [
{
name: 'Command',
async handler() {
// Do something...
},
},
];
```
## Properties
### commands
Type: `Command[]`
Default: `[]`
| Property | Type | Description |
|----------|-------------------------------------|------------------------------------------------|
| name | `string` | Shown in the list of commands |
| handler | `() => Promise \| unknown` | The function executed when a command is chosen |
The commands array defines the options that will be presented every time you open the palette.
### openShortcutTest
Type: `(event: KeyboardEvent) => boolean`
Default: `event => event.metaKey && event.key === 'k'`
If this function returns `true`, the command palette will open.
## Methods
### awaitCommand
Waits for the user to trigger a command. This can be used to chain a series of commands together.
```js
const palette = document.querySelector('command-palette');
palette.commands = [
{
name: 'Add product to cart',
async handler() {
const products = await fetchProducts();
const product = await palette.awaitCommand({
placeholder: 'Which product would you like to add?',
commands: products.map(product => ({
name: product.title,
handler() {
return product;
},
})),
});
const quantity = await palette.awaitCommand({
placeholder: `How many ${product.title} would you like to add?`,
commands: new Array(5).fill(null).map((_, index) => ({
name: index + 1,
handler() {
return index + 1;
},
})),
});
addToCart(product.id, quantity);
},
},
];
```
### awaitInput
Waits for the user to provide some info. Rather than executing a command, this returns the users input.
```js
const palette = document.querySelector('command-palette');
palette.commands = [
{
name: 'Search',
async handler() {
const query = await palette.awaitInput({
placeholder: 'What are you searching for?',
});
window.location.href = `/search?q=${query}`;
},
},
];
```
## TypeScript
I've not yet worked out how to export types automatically with Svelte & Vite. For now the code below should work.
```ts
import 'command-palette';
type Command = {
name: string
handler: () => Promise | unknown
}
type AwaitInstructionSettings = {
placeholder?: string;
query?: string;
}
type AwaitCommandSettings = {
commands?: string;
}
interface CommandPaletteElement extends Element {
awaitCommand: (options: AwaitInstructionSettings & AwaitCommandSettings) => Promise;
awaitInput: (options: AwaitInstructionSettings) => Promise;
commands: Command[];
openShortcutTest: (event: KeyboardEvent) => boolean;
}
const palette = document.querySelector('command-palette');
palette.commands = [];
```
## Examples
The Command Palette can be used in any kind of project. You can find a number of sample commands for Shopify builds [here](/examples/shopify/index.js).