Added store methods API

Updated Readme
Updated Docs

Author: rohitpotato

README.md

@@ -31,10 +31,12 @@ Install svelte-command-palette with npm
 
 ```javascript
 <script>
-    import CommandPalette, { defineActions } from 'svelte-command-palette'
+    import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette'
 
     // define actions using the defineActions API
 
+    const paletteMethods = createStoreMethods();
+
     const actions = defineActions([
         {
             id: 1,
@@ -50,8 +52,11 @@ Install svelte-command-palette with npm
 
 // render your command palette at the root of your application, say _layout.svelte
 
+<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
+
 <CommandPalette {actions}>
 
+
 ```
 
 ## API
@@ -97,3 +102,28 @@ The `<CommandPalette />` component accepts the following optional properties for
 	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;
+```

snippets/command-palette.txt

@@ -1,6 +1,13 @@
 <script>
-	import CommandPalette, { defineActions } from 'svelte-command-palette';
+	import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';
 	{/* Render command palette at the root of your application */}
+
+	// define actions using the defineActions API
+
+    const paletteMethods = createStoreMethods();
+
+	<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
+
 	<CommandPalette
 
 		actions={defineActions([

src/lib/index.ts

@@ -2,6 +2,7 @@ import Portal from './components/Portal.svelte';
 import CommandPalette from './components/CommandPalette.svelte';
 import { defineActions } from './utils';
 import { paletteStore } from './store/PaletteStore';
+import createStoreMethods from './utils/createStoreMethods';
 
 export default CommandPalette;
-export { Portal, defineActions, paletteStore };
+export { Portal, defineActions, paletteStore, createStoreMethods };

src/routes/code/command-palette.html

@@ -1,6 +1,13 @@
 <pre class="shiki" style="background-color: #22272e"><code><span class="line"><span style="color: #ADBAC7">&lt;</span><span style="color: #8DDB8C">script</span><span style="color: #ADBAC7">&gt;</span></span>
-<span class="line"><span style="color: #ADBAC7">	</span><span style="color: #F47067">import</span><span style="color: #ADBAC7"> CommandPalette, { defineActions } </span><span style="color: #F47067">from</span><span style="color: #ADBAC7"> </span><span style="color: #96D0FF">&#39;svelte-command-palette&#39;</span><span style="color: #ADBAC7">;</span></span>
+<span class="line"><span style="color: #ADBAC7">	</span><span style="color: #F47067">import</span><span style="color: #ADBAC7"> CommandPalette, { defineActions, createStoreMethods } </span><span style="color: #F47067">from</span><span style="color: #ADBAC7"> </span><span style="color: #96D0FF">&#39;svelte-command-palette&#39;</span><span style="color: #ADBAC7">;</span></span>
 <span class="line"><span style="color: #ADBAC7">	{</span><span style="color: #768390">/* Render command palette at the root of your application */</span><span style="color: #ADBAC7">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #ADBAC7">	</span><span style="color: #768390">// define actions using the defineActions API</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #ADBAC7">    </span><span style="color: #F47067">const</span><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">paletteMethods</span><span style="color: #ADBAC7"> </span><span style="color: #F47067">=</span><span style="color: #ADBAC7"> </span><span style="color: #DCBDFB">createStoreMethods</span><span style="color: #ADBAC7">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #ADBAC7">	&lt;</span><span style="color: #8DDB8C">button</span><span style="color: #ADBAC7"> </span><span style="color: #6CB6FF">on</span><span style="color: #ADBAC7">:</span><span style="color: #6CB6FF">click</span><span style="color: #F47067">=</span><span style="color: #ADBAC7">{() </span><span style="color: #F47067">=&gt;</span><span style="color: #ADBAC7"> paletteMethods.</span><span style="color: #DCBDFB">openPalette</span><span style="color: #ADBAC7">()}&gt;Open Command Palette&lt;/</span><span style="color: #8DDB8C">button</span><span style="color: #ADBAC7">&gt;</span></span>
+<span class="line"></span>
 <span class="line"><span style="color: #ADBAC7">	&lt;</span><span style="color: #8DDB8C">CommandPalette</span></span>
 <span class="line"></span>
 <span class="line"><span style="color: #ADBAC7">		</span><span style="color: #6CB6FF">actions</span><span style="color: #F47067">=</span><span style="color: #ADBAC7">{</span><span style="color: #DCBDFB">defineActions</span><span style="color: #ADBAC7">([</span></span>

src/routes/index.svelte

@@ -2,13 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { afterUpdate, onMount } from 'svelte';
 	import Hero from '../components/Hero.svelte';
-	import CommandPalette, { defineActions, paletteStore } from '../lib';
+	import CommandPalette, { defineActions, paletteStore, createStoreMethods } from '../lib';
 	import themeStore from '../store/themeStore';
 	import switchTheme from '../utils/switchTheme';
 
 	type Themes = string | null;
 
 	let currentTheme: Themes;
+	const paletteMethods = createStoreMethods();
 
 	onMount(() => {
 		themeStore.set(localStorage.getItem('theme'));
@@ -19,13 +20,6 @@
 
 	let counter = 0;
 
-	paletteStore.update((value) => {
-		return {
-			...value,
-			profileType: 'user'
-		};
-	});
-
 	let actions = defineActions([
 		{
 			title: 'Go to docs',
@@ -104,10 +98,7 @@
 	]);
 
 	const openCommandPalette = () => {
-		paletteStore.update((val) => {
-			val.isVisible = true;
-			return val;
-		});
+		paletteMethods.openPalette();
 	};
 
 	const incrementCounter = () => {
@@ -118,10 +109,6 @@
 		alert('Look ma! I can run.');
 	};
 
-	afterUpdate(() => {
-		console.log({ currentTheme });
-	});
-
 	$: paletteTheme =
 		currentTheme === 'light'
 			? {