Add ability to click commands (#37)

Author: usernotnull

README.md

@@ -204,7 +204,13 @@ class CreateUser extends SpotlightCommand
     {
         return SpotlightCommandDependencies::collection()
             ->add(SpotlightCommandDependency::make('team')->setPlaceholder('For which team do you want to create a user?'))
-            ->add(SpotlightCommandDependency::make('name')->setPlaceholder('How do you want to name this user?')->setType(SpotlightCommandDependency::INPUT));
+            ->add(SpotlightCommandDependency::make('foobar')->setPlaceholder('Search for second dependency')
+            );
+    }
+
+    public function searchFoobar($query, User $user)
+    {
+        // Given Foobar is the second dependency it will have access to any resolved depedencies defined earlier. In this case we can access the User which was chosen.
     }
 
     public function searchTeam($query)
@@ -394,6 +400,12 @@ return [
 ];
 ```
 
+If you want to change the spotlight view, you can also publish the views.
+
+```shell
+php artisan vendor:publish --tag=livewire-ui-spotlight-views
+```
+
 ## Credits
 
 - [Philo Hermans](https://github.com/philoNL)

config/livewire-ui-spotlight.php

@@ -50,8 +50,9 @@
     |--------------------------------------------------------------------------
     |
     | Spotlight will inject the required Javascript in your blade template.
-    | If you want to bundle the required Javascript you can set this to false
-    | run `npm install --save fuse.js` and add `require('vendor/livewire-ui/spotlight/resources/js/spotlight');`
+    | If you want to bundle the required Javascript you can set this to false,
+    | call 'npm install fuse.js' or 'yarn add fuse.js',
+    | then add `require('vendor/livewire-ui/spotlight/resources/js/spotlight');`
     | to your script bundler like webpack.
     |
     */

resources/views/spotlight.blade.php

@@ -17,14 +17,14 @@
          @keydown.window.escape="isOpen = false"
          @toggle-spotlight.window="toggleOpen()"
          class="fixed z-50 px-4 pt-16 flex items-start justify-center inset-0 sm:pt-24">
-        <div x-show="isOpen" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0"
+        <div x-show="isOpen" @click="isOpen = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0"
              x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-150"
              x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
              class="fixed inset-0 transition-opacity">
             <div class="absolute inset-0 bg-gray-900 opacity-50"></div>
         </div>
 
-        <div @click.outside="isOpen = false" x-show="isOpen" x-transition:enter="ease-out duration-200"
+        <div x-show="isOpen" x-transition:enter="ease-out duration-200"
              x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
              x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 scale-100"
              x-transition:leave-end="opacity-0 scale-95"