add: custom alpine + clipboard directive

magitools · Oct 18, 2024 · 94b1eab · 94b1eab
1 parent dfc157e
commit 94b1eab
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1 +1,14 @@
 import './bootstrap';
+import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
+
+// Register any Alpine directives, components, or plugins here...
+Alpine.directive('clipboard', (el) => {
+    let text = el.textContent
+
+    el.addEventListener('click', () => {
+        console.log("copying")
+        navigator.clipboard.writeText(text)
+    })
+})
+
+Livewire.start()
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -5,7 +5,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
         <title>{{ $title ?? 'Page Title' }}</title>
-        @vite('resources/css/app.css')
+        @livewireStyles
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
         @fluxStyles
     </head>
     <body class="min-h-screen bg-white dark:bg-zinc-800">
@@ -65,6 +66,7 @@
         @persist('toast')
             <flut:toast />
         @endpersist
+        @livewireScriptConfig
         @fluxScripts
     </body>
 </html>
diff --git a/resources/views/livewire/profile/keys/table.blade.php b/resources/views/livewire/profile/keys/table.blade.php
@@ -49,11 +49,11 @@
         </form>
     </flux:modal>
     <flux:modal name="key-preview" class="space-y-6">
-        <div>
+        <div x-data="">
             <flux:heading>Here's your new API key</flux:heading>
             <flux:subheading>
                 <p>Make sure to save it somewhere; you won't be able to see it again</p>
-                <p>{{$this->textToken}}</p>
+                <p x-clipboard>{{$this->textToken}}</p>
             </flux:subheading>
         </div>
         <div class="flex w-full">