Skip to content

Commit d09b60d

Browse files
rohitpotatorohitpotato
authored
Merge pull request #15 from rohitpotato/rohitkashyap/add-theming-support
Rohitkashyap/add theming support Added store methods API
2 parents 178160a + 2314e43 commit d09b60d

27 files changed

+569
-104
lines changed

‎README.md‎

Lines changed: 81 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Svelte Command Palette
22

3-
### Increase your productivity exponentially. 🚀🚀
3+
#### Increase your productivity exponentially. 🚀🚀
44

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

77
## Demo
88

9-
![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif)
9+
![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAcaCmFwLXNvdXRoLTEiSDBGAiEArQtcSxpqlkpMiIXIRbzim6ygEdu%2FiWM0JafqMC67%2F%2FMCIQCyrjWfyugvigPDcM3KKLDMpybs7WuY6ia33eTzPtydBCrkAghAEAMaDDg0NzkwMjcyNzUyNCIMU0ZdGeUyXrP3cS%2BAKsECrRS0rQ1645z%2F1SjI2gh2nTd5z4HWvh4VO68TdetQudGZhAvWtAbqUi58xbKG10FtENPhIu%2FRxwOeDOF%2BWxXaEFisWKEcruAG1oo4s%2BMn%2BVGJwgIqNrXAG8XfuSviCT68XXPp2YZEnZ4RzFtxNxpsYfkEghpwtbXjATxmwnADyZQ4cogwScgUxZ7HaJkEm%2BSbEmSfj0nJ1AuY%2F%2BmP7AMHSvVA4ut7MaFtOtOb4jtSamsxmAv6JNeCmceGtAdzxXp0KWahWecXII4dR8fhY8ECygj3hQx23d90XBhmzzJvNW9EZj%2BTwSL4N43kjo4Bf9rDUuHdvs5nXHfYy%2B9tDj0P%2FmxE2A06zc8bq3wRHMa6oS5HCz5i2YdxkmcDo%2Fiwf%2FN%2BmzQyH%2FHkmcSUcu%2FQl7qx0M5lvhK91cujDasj8gOOM6hzMKOKr5YGOrIC8ycy1e2b2krfyhpHtYjRX1MkiOQ25oqZDwOZarY1iwrwNrvc%2FPzZoQvY%2FAFrf8%2BfbRUU6yC5RtJVBOzD8Fc207FethWt%2FLpPEHcB8APtM2wX%2FGFbTVUsNyb4zsTGfdgBdzY6HJbho0%2Fqsy7%2F%2FF0FKgInX3FLec3EFK3t%2BD10%2B6O72yO%2BsseBujEiqpOdnJahnUwycc9b4BQcltw3miOr7LOZUKqebSm8wt4z2VPBsTYTl8PMtfYr1%2BXzhTqTnfkgI3V9aYM4zagE4geh5SsJ5Jw%2FVKP8ueONkSylwupnI01PPRjs9KtYHLU7PIXRooUtbU21iK7JHn%2Fp0FmJEa50EhY30lGsB1ZaOaFO%2B2XzEH%2FYnuNCpiXyveUky9Y0h%2FTfd2bLdlGwLEc8sHRoHUqS7lVe&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20220711T064152Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA4K2XQ3VSAZXZYFHE%2F20220711%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Signature=553d6bef29fd1c97022ab3a4db0af5505b9b6d89d925ddf7e3745375588c8f62)
1010

1111
## Features
1212

@@ -31,17 +31,19 @@ Install svelte-command-palette with npm
3131

3232
```javascript
3333
<script>
34-
import CommandPalette, { defineActions } from 'svelte-command-palette'
34+
import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette'
3535

3636
// define actions using the defineActions API
3737

38+
const paletteMethods = createStoreMethods();
39+
3840
const actions = defineActions([
3941
{
40-
actionId: 1,
42+
id: 1,
4143
title: "Open Svelte Command Palette on github",
42-
subTitle: "This opens github in a new tab!",
44+
subTitle: 'This opens github in a new tab!",
4345
onRun: ({ action, storeProps, storeMethods }) => {
44-
window.open("https://github.com/rohitpotato/svelte-command-palette")
46+
window.open("https://github.com/rohitpotato/svelte-command-palette"),
4547
},
4648
shortcut: "Space k"
4749
}
@@ -50,6 +52,78 @@ Install svelte-command-palette with npm
5052
5153
// render your command palette at the root of your application, say _layout.svelte
5254
53-
<CommandPalette {actions} />
55+
<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
56+
57+
<CommandPalette {actions}>
58+
59+
60+
```
61+
62+
## API
63+
64+
### Component Styling API
65+
66+
The `<CommandPalette />` component accepts the following optional properties for styling:
67+
68+
| Property | Type | Default | Description |
69+
| ---------------------------- | -------------------------------- | ---------------------- | ---------------------------------------------------------------------- |
70+
| **unstyled** | boolean | `false` | When `true`, the default styles are not applied to the modal elements. |
71+
| **placeholder** | string | `"Search for actions"` | Placeholder for the command palette input |
72+
| **overlayClass** | string \| null | `null` | Class name for the palette overlay. |
73+
| **paletteWrapperInnerClass** | string \| null | `null` | Class name for the cmd palette wrapper element. |
74+
| **inputClass** | string \| null | `null` | Class name for the cmd palette input. |
75+
| **resultsContainerClass** | string \| null | `null` | Class name for the results container. |
76+
| **resultContainerClass** | string \| null | `null` | Class name for the result item container. |
77+
| **optionSelectedClass** | string \| null | `null` | Class name for the currently selected result item. |
78+
| **titleClass** | string \| null | `null` | Class name for the result title. |
79+
| **subtitleClass** | string \| null | `null` | Class name for the result subtitle. |
80+
| **descriptionClass** | string \| null | `null` | Class name for the result description. |
81+
| **keyboardButtonClass** | string \| null | `null` | Class name for the keyboard shortcuts. |
82+
| **overlayStyle** | Record<string, string \| number> | `{}` | Style properties of the overlay. |
83+
| **paletteWrapperInnerStyle** | Record<string, string \| number> | `{}` | Style properties of the command palette wrapper element. |
84+
| **inputStyle** | Record<string, string \| number> | `{}` | Style properties of cmd palette input. |
85+
| **resultsContainerStyle** | Record<string, string \| number> | `{}` | Style properties of results container. |
86+
| **resultContainerStyle** | Record<string, string \| number> | `{}` | Style properties result item container. |
87+
| **titleStyle** | Record<string, string \| number> | `{}` | Style properties for result item title. |
88+
| **subtitleStyle** | Record<string, string \| number> | `{}` | Style properties for result item subtitle. |
89+
| **descriptionStyle** | Record<string, string \| number> | `{}` | Style properties for result item description. |
90+
| **optionSelectedStyle** | Record<string, string \| number> | `{}` | Style properties selected result item. |
91+
| **keyboardButtonStyle** | Record<string, string \| number> | `{}` | Style properties for the keyboard shortcut. |
92+
93+
## Action API
94+
95+
```
96+
actionId?: ActionId;
97+
canActionRun?: (args: onRunParams) => boolean;
98+
title: string;
99+
description?: string;
100+
subTitle?: string;
101+
onRun?: (args: onRunParams) => void;
102+
keywords?: Array<string>;
103+
shortcut?: string;
104+
```
105+
106+
## Store Methods
107+
108+
Get palette methods from `createStoreMethods`.
109+
110+
```
111+
import { createStoreMethods } from 'svelte-command-palette`
112+
113+
const methods = createStoreMethods();
54114
115+
method.openPalette();
116+
```
117+
118+
### API
119+
120+
```
121+
togglePalette: () => void;
122+
getAllCalledActions: () => ActionId[];
123+
storeCalledAction: (id: ActionId) => void;
124+
revertLastAction: (id: ActionId) => void;
125+
resetActionLog: () => void;
126+
openPalette: () => void;
127+
closePalette: () => void;
128+
resetPaletteStore: () => void;
55129
```

‎generateDocSnippets.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const generateSnippets = async () => {
88
const highlighter = await shiki.getHighlighter({ theme: 'github-dark-dimmed' });
99
// for each file, convert to html
1010
const generatedMarkup = files.map(async (file) => {
11+
console.log(`Generating docs: ${file}`);
1112
const content = await fs.readFile(path.join(__dirname, `./snippets/${file}`), 'utf-8');
1213
const html = highlighter.codeToHtml(content, { lang: 'svelte' });
1314
return {

‎snippets/command-palette.txt‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script>
2-
import CommandPalette, { defineActions } from 'svelte-command-palette';
2+
import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';
33
{/* Render command palette at the root of your application */}
4+
5+
// define actions using the defineActions API
6+
7+
const paletteMethods = createStoreMethods();
8+
9+
<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
10+
411
<CommandPalette
512

613
actions={defineActions([

‎snippets/styling.txt‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<CommandPalette
2+
unstyled={false}
3+
placeholder={paletteTheme.placeholder}
4+
commands={actions}
5+
keyboardButtonClass="bg-red-500"
6+
inputClass="bg-blue-200"
7+
overlayClass="bg-gray-200"
8+
paletteWrapperInnerClass="w-full"
9+
resultsContainerClass="h-max"
10+
resultContainerClass="bg-black"
11+
optionSelectedClass="text-blue-200"
12+
subtitleClass="text-red-200"
13+
titleClass="text-red-500"
14+
descriptionClass=""
15+
overlayStyle={{ width: "200px", height: '500px' }}
16+
paletteWrapperInnerStyle={{ width: "200px", height: '500px' }}
17+
inputStyle={paletteTheme.inputStyles}
18+
resultsContainerStyle={paletteTheme.resultsContainerStyle}
19+
resultContainerStyle={paletteTheme.resultContainerStyle}
20+
titleStyle={paletteTheme.titleStyle}
21+
descriptionStyle={paletteTheme.descriptionStyle}
22+
subtitleStyle={paletteTheme.subtitleStyle}
23+
optionSelectedStyle={currentTheme === 'light'
24+
? { background: 'skyblue' }
25+
: { background: 'blue' }}
26+
keyboardButtonStyle={{}}
27+
/>

‎src/components/Counter.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
export let counter: number = 0;
33
</script>
44

5-
<div class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl">
5+
<div
6+
class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl dark:bg-dark-mode-gray dark:text-light-gray"
7+
>
68
{counter}
79
</div>

‎src/components/Hero.svelte‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
</script>
99

1010
<main class="pt-20 grid grid-cols-2 gap-12 pb-20">
11-
<div class="">
12-
<h1 class="text-5xl text-gray-600 font-light leading-tight">
11+
<div>
12+
<h1 class="text-5xl text-gray-600 dark:text-light-gray font-light leading-tight">
1313
Increase your productivity exponentially.
1414
</h1>
15-
<h3 class="text-2xl mt-6 text-gray-600">
15+
<h3 class="text-2xl mt-6 text-gray-600 dark:text-light-gray">
1616
Use <KeyboardShortcut
1717
on:onShortcutClick={openCommandPalette}
1818
shortcuts={['⌘', 'K']}
@@ -21,9 +21,11 @@
2121
</h3>
2222
</div>
2323
<div>
24-
<h1 class="text-4xl text-gray-600 font-light leading-tight">Keyboard Shorcuts</h1>
24+
<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
25+
Keyboard Shorcuts
26+
</h1>
2527
<div class="mt-4">
26-
<h3 class="text-lg mt-6 text-gray-600">
28+
<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
2729
Press or hold <KeyboardShortcut
2830
shortcuts={['C', 'C']}
2931
theme="secondary"
@@ -34,20 +36,24 @@
3436
</div>
3537
</div>
3638
<div>
37-
<h1 class="text-4xl text-gray-600 font-light leading-tight">Conditional Actions</h1>
39+
<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
40+
Conditional Actions
41+
</h1>
3842
<div class="mt-4">
39-
<h3 class="text-lg mt-6 text-gray-600">
43+
<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
4044
This will only run when the counter is greater than 2.
4145
</h3>
4246
</div>
43-
<div class="mt-4 flex items-center flex-col justify-center bg-slate-50 shadow text-xl p-20">
47+
<div
48+
class="mt-4 flex items-center flex-col justify-center bg-slate-50 dark:bg-gray-700 shadow text-xl p-20"
49+
>
4450
{#if counter < 3}
4551
<div class:text-red-500={counter < 3}>
4652
Just need {3 - counter} more
4753
</div>
4854
{/if}
4955
{#if counter > 2}
50-
<div class="mt-4">
56+
<div class="mt-4 dark:text-light-gray">
5157
Press <KeyboardShortcut
5258
on:onShortcutClick={runConditionalAction}
5359
shortcuts={['F', 'B', 'I']}
@@ -58,26 +64,30 @@
5864
</div>
5965
</div>
6066
<div>
61-
<h1 class="text-4xl text-gray-600 font-light leading-tight">Advanced Conditional Actions</h1>
67+
<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
68+
Advanced Conditional Actions
69+
</h1>
6270
<div class="mt-4">
63-
<h3 class="text-lg mt-6 text-gray-600">
71+
<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
6472
You can run an action based on the current state of your command palette. Press <KeyboardShortcut
6573
shortcuts={['C', 'I', 'A']}
6674
theme="secondary"
6775
/> to run this action
6876
</h3>
6977
</div>
7078
<div class="mt-8">
71-
<div class="text-lg">
79+
<div class="text-lg dark:text-light-gray">
7280
You must run <KeyboardShortcut
7381
on:onShortcutClick={runConditionalAction}
7482
shortcuts={['F', 'B', 'I']}
7583
theme="secondary"
7684
/> atleast once to enable this action
7785
</div>
78-
<div class="text-base mt-4">
86+
<div class="text-base mt-4 dark:text-light-gray ">
7987
Note: You can update your
80-
<div class="inline text-xl font-bold p-1 rounded font-mono">paletteStore</div>
88+
<div class="inline text-xl font-bold p-1 dark:text-light-gray rounded font-mono">
89+
paletteStore
90+
</div>
8191
from anywhere!
8292
</div>
8393
</div>

‎src/components/KeyboardShortcut.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
});
1414
};
1515
16-
$: bgColor = theme === 'primary' ? 'bg-gray-800 text-white' : 'bg-gray-100 shadow text-black';
16+
$: bgColor =
17+
theme === 'primary'
18+
? 'bg-gray-800 dark:bg-dark-mode-gray text-white dark:text-light-gray'
19+
: 'bg-gray-100 shadow text-black dark:text-light-gray dark:bg-dark-mode-gray';
1720
</script>
1821

1922
<button

‎src/components/Navbar.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
<nav class="flex items-center justify-between shadow-sm py-6 px-8">
1+
<script lang="ts">
2+
import switchTheme from '../utils/switchTheme';
3+
</script>
4+
5+
<nav class="flex items-center justify-between shadow-sm py-6 px-8 dark:bg-dark-mode-gray">
26
<a href="/" class="text-svelte-brand text-xl font-bold">Svelte Command Palette</a>
3-
<div class="flex gap-12">
7+
<div class="flex gap-12 dark:text-svelte-brand">
8+
<button on:click={() => switchTheme()} type="button">Switch Theme</button>
49
<a href="/docs">Docs</a>
510
<a target="_blank" rel="noreferrer" href="https://github.com/rohitpotato/svelte-command-palette"
611
>Github</a

‎src/components/Sidebar.svelte‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<script>
22
import { page } from '$app/stores';
3-
console.log($page.url.pathname);
43
</script>
54

6-
<aside class="sticky left-0 w-72 h-screen top-0 shadow-md">
5+
<aside class="sticky left-0 w-72 h-screen top-0 shadow-md min-w-max dark:bg-dark-mode-black">
76
<nav class="p-4">
87
<h4 class="text-2xl">Command Palette API</h4>
9-
<ul class="mt-4 flex flex-col gap-4">
8+
<ul class="mt-4 flex flex-col gap-4 dark:text-light-gray">
109
<li
1110
class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
1211
class:bg-svelte-brand={$page.url.pathname === '/docs/command-palette-api'}
@@ -19,6 +18,12 @@
1918
>
2019
<a class="py-3 px-2 block w-full" href="/docs/palette-store">palette-store</a>
2120
</li>
21+
<li
22+
class=" cursor-pointer tracking-wide hover:bg-svelte-brand rounded"
23+
class:bg-svelte-brand={$page.url.pathname === '/docs/styling'}
24+
>
25+
<a class="py-3 px-2 block w-full" href="/docs/styling">Styling</a>
26+
</li>
2227
</ul>
2328
</nav>
2429
</aside>

0 commit comments

Comments
 (0)