add footer to command-pal with configurable text

README.md

@@ -134,6 +134,8 @@ const c = new CommandPal({
   placeholder: "Custom placeholder text...", //  Changes placeholder text of input
   debugOuput: false, // if true report debugging info to console
   hideButton: false, // if true, do not generate mobile button
+  footerText: null,  // Text to display in the footer of the palette.
+                     // If null (default), do not add footer.
   commands: [
     // Commands go here
   ]
@@ -232,6 +234,10 @@ The styles used by command-pal are included in the package. However you can over
   #CommandPal [slot=items] { background-color: yellow;}
   /* item text */
   #CommandPal .item { color:black; }
+  /* footers (optional) in all command-pal instances */
+  .footer[slot=footer] { background-color: gold; color: black;}	
+  /* explicitly override footer styling for one instance */
+  #CommandPal .footer { background-color: gold; color: black;}
 ```
 
 You can also assign a custom `id` to the CommandPal instance.

public/cp-advanced/index.html

@@ -84,6 +84,7 @@ <h2>Output Events</h2>
         hotkey: "ctrl+space",
         hotkeysGlobal: true,  
         placeholder: "Custom placeholder text...",
+        footerText: "Click background, press ESC key or ctrl+space to close.",
         commands: [
           {
             name: "Toggle Dark/Light Theme",

public/cp-advanced/local-dev.html

@@ -68,6 +68,7 @@ <h2>Output</h2>
       const c = new CommandPal({
         id: 'MyCommandPal',
         hotkey: "ctrl+space",
+        footerText: "Click background or press ESC key to close.",
         commands: [
           {
             name: "Toggle Dark/Light Theme",

src/App.svelte

@@ -19,6 +19,7 @@
   export let placeholderText;
   export let hideButton;
   export let paletteId;
+  export let footerText;
 
   const optionsFuse = {
     isCaseSensitive: false,
@@ -160,5 +161,14 @@
         {selectedIndex}
         on:clickedIndex={onClickedIndex} />
     </div>
+    <!-- when svelte gets conditional slots
+           https://github.com/sveltejs/svelte/issues/5604
+         re-implement to remove the empty div.hidden.
+    --> 
+    <div class="{ footerText === null ? 'hidden': 'footer' }" slot="footer">
+      {#if footerText !== null }
+        {footerText}
+      {/if}
+    </div>
   </PaletteContainer>
 </div>

src/PaletteContainer.svelte

@@ -42,6 +42,14 @@
   .search-box {
     padding: 7px;
   }
+  :global(.footer) {
+   background-color: rgba(0, 0, 0, 0.33);
+   border-block-start: black ridge 2px;
+   color: #ddd;
+   font-size: smaller;
+   padding-block-start: 0.1em;
+   padding-inline: 0.5em;
+  }
   /* .search:focus {
   color: white;
 } */
@@ -55,6 +63,7 @@
       </div>
       <div>
         <slot name="items" />
+        <slot name="footer" />
       </div>
     </div>
   </div>

src/main.js

@@ -19,6 +19,7 @@ class CommandPal {
         placeholderText: this.options.placeholder || "What are you looking for?",
         hotkeysGlobal: this.options.hotkeysGlobal || false,
         hideButton: this.options.hideButton || false,
+        footerText: this.options.footerText ||  null,
       },
     });
     const ctx = this;