copy HasDropdown mixin and import it into app.js

src/Commands/AuthMakeCommand.php

@@ -2,13 +2,14 @@
 
 namespace Naoray\DarkTailwindPreset\Commands;
 
-use Illuminate\Console\Command;
 use Illuminate\Support\Facades\File;
-use Illuminate\Filesystem\Filesystem;
 use Illuminate\Auth\Console\AuthMakeCommand as MakeAuth;
+use Naoray\DarkTailwindPreset\EnsuresResourceDirectoryExists;
 
 class AuthMakeCommand extends MakeAuth
 {
+    use EnsuresResourceDirectoryExists;
+
     /**
      * The views that need to be exported.
      *
@@ -33,15 +34,40 @@ public function handle()
     {
         parent::handle();
 
-        $filesystem = new Filesystem;
+        $this->addHasDropdownMixin();
+        $this->copyImages();
 
-        if (! $filesystem->isDirectory($directory = resource_path('img'))) {
-            $filesystem->makeDirectory($directory, 0755, true);
-        }
+        $this->info('Run `yarn dev` to publish the images.');
+    }
 
-        File::copyDirectory(__DIR__.'/stubs/img', resource_path('img'));
+    /**
+     * Adds Has Dropdown mixin and imports it into Vue app.
+     *
+     * @return void
+     */
+    protected function addHasDropdownMixin()
+    {
+        static::ensureResourceDirectoryExists('js/mixins');
+        copy(__DIR__ . '/stubs/HasDropdown.js', resource_path('js/mixins/HasDropdown.js'));
 
-        $this->info('Run `yarn dev` to publish the images.');
+        file_put_contents(resource_path('js/app.js'), str_replace(
+            'const app = new Vue({' . PHP_EOL,
+            "import HasDropdown from './mixins/HasDropdown'" . PHP_EOL .
+            'const app = new Vue({' . PHP_EOL .
+            '  mixins: [HasDropdown],' . PHP_EOL,
+            file_get_contents(resource_path('js/app.js'))
+        ));
+    }
+
+    /**
+     * Copy images into reosurces 'img' folder.
+     *
+     * @return void
+     */
+    protected function copyImages()
+    {
+        static::ensureResourceDirectoryExists('img');
+        File::copyDirectory(__DIR__ . '/stubs/img', resource_path('img'));
     }
 
     /**
@@ -52,14 +78,14 @@ public function handle()
     protected function exportViews()
     {
         foreach ($this->views as $key => $value) {
-            if (file_exists($view = resource_path('views/'.$value)) && ! $this->option('force')) {
-                if (! $this->confirm("The [{$value}] view already exists. Do you want to replace it?")) {
+            if (file_exists($view = resource_path('views/' . $value)) && !$this->option('force')) {
+                if (!$this->confirm("The [{$value}] view already exists. Do you want to replace it?")) {
                     continue;
                 }
             }
 
             copy(
-                __DIR__.'/stubs/views/'.$key,
+                __DIR__ . '/stubs/views/' . $key,
                 $view
             );
         }

src/Commands/stubs/HasDropdown.js

@@ -0,0 +1,29 @@
+export default {
+  data() {
+    return {
+      showDropdown: false
+    }
+  },
+
+  methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown
+      this.$refs.dropdown.style.display = this.showDropdown ? 'block' : 'none'
+
+      if (this.showDropdown) {
+        this.$nextTick(() => {
+          document.addEventListener('click', this.closeDropdownListener)
+        })
+      }
+    },
+
+    closeDropdownListener(event) {
+      if (event.target.closest('.dropdown')) {
+        return
+      }
+
+      this.toggleDropdown()
+      document.removeEventListener('click', this.closeDropdownListener)
+    }
+  }
+}