update alpinejs to v3

package.json

@@ -10,7 +10,7 @@
     "production": "mix --production"
   },
   "devDependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "highlight.js": "^10.5.0",
     "laravel-mix": "^6.0.23",
     "vue-template-compiler": "^2.6.12"
@@ -20,7 +20,7 @@
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.4.0",
     "algoliasearch": "^4.8.4",
-    "alpinejs": "^2.0",
+    "alpinejs": "^3.0",
     "autoprefixer": "^10.2.4",
     "choices.js": "^9.0.1",
     "postcss": "^8.2.10",

resources/js/app.js

@@ -1,4 +1,4 @@
-import 'alpinejs';
+import Alpine from 'alpinejs';
 import hljs from 'highlight.js';
 import Choices from 'choices.js';
 
@@ -8,6 +8,10 @@ require('./bootstrap');
 require('./search');
 require('./editor');
 
+window.Alpine = Alpine;
+
+Alpine.start();
+
 // Create a multiselect element.
 window.choices = (element) => {
     return new Choices(element, { maxItemCount: 3, removeItemButton: true });

resources/views/_partials/_search.blade.php

@@ -7,7 +7,7 @@
         </div>
 
         <input 
-            @click.away="results = false" 
+            @click.outside="results = false" 
             @keyup="search(event).then(function({ results: hits }) { results = true; threads = hits[0].hits; articles = hits[1].hits; })" 
             type="search" 
             name="search" 

resources/views/articles/_form.blade.php

@@ -43,7 +43,7 @@ class="form-control"
         @formGroup('tags')
             <label for="tags">Tags</label>
 
-            <select name="tags[]" id="create-article" multiple x-data="{}" x-init="function () { choices($el) }">
+            <select name="tags[]" id="create-article" multiple x-data="{}" x-init="$nextTick(function () { choices($el) })">
                 @foreach($tags as $tag)
                     <option value="{{ $tag->id }}" @if(in_array($tag->id, $selectedTags)) selected @endif>{{ $tag->name }}</option>
                 @endforeach
@@ -76,7 +76,7 @@ class="button button-primary"
                     Save changes
                 </button>
             @else
-                <span class="relative z-0 inline-flex shadow-sm" x-data="{ showDropdown: false }" @click.away="showDropdown = false">
+                <span class="relative z-0 inline-flex shadow-sm" x-data="{ showDropdown: false }" @click.outside="showDropdown = false">
                     <button 
                         type="submit" 
                         name="submitted" 

resources/views/articles/show.blade.php

@@ -78,7 +78,7 @@
 
                     <div
                         x-data="{}"
-                        x-init="function () { highlightCode($el); }"
+                        x-init="$nextTick(function () { highlightCode($el); })"
                         class="prose prose-lg text-gray-800 prose-lio"
                     >
                         <x-buk-markdown>{!! $article->body() !!}</x-buk-markdown>

resources/views/components/articles/form.blade.php

@@ -59,7 +59,7 @@
                     <div class="space-y-1">
                         <x-forms.label for="tags">Tags</x-forms.label>
 
-                        <select name="tags[]" id="create-article" multiple x-data="{}" x-init="function () { choices($el) }">
+                        <select name="tags[]" id="create-article" multiple x-data="{}" x-init="$nextTick(function () { choices($el) })">
                             @foreach($tags as $tag)
                                 <option value="{{ $tag->id }}" @if(in_array($tag->id, $selectedTags)) selected @endif>{{ $tag->name }}</option>
                             @endforeach
@@ -87,7 +87,7 @@ class="button button-primary"
                             Save changes
                         </button>
                     @else
-                        <span class="relative z-0 inline-flex shadow-sm" x-data="{ showDropdown: false }" @click.away="showDropdown = false">
+                        <span class="relative z-0 inline-flex shadow-sm" x-data="{ showDropdown: false }" @click.outside="showDropdown = false">
                             <button 
                                 type="submit" 
                                 name="submitted" 

resources/views/components/threads/form.blade.php

@@ -36,7 +36,7 @@
                 <div class="space-y-1">
                     <x-forms.label for="tags">Tags</x-forms.label>
 
-                    <select name="tags[]" id="create-thread" multiple x-data="{}" x-init="function () { choices($el) }">
+                    <select name="tags[]" id="create-thread" multiple x-data="{}" x-init="$nextTick(function () { choices($el) })">
                         @foreach($tags as $tag)
                             <option value="{{ $tag->id }}" @if(in_array($tag->id, $selectedTags)) selected @endif>{{ $tag->name }}</option>
                         @endforeach

resources/views/components/threads/reply-menu.blade.php

@@ -49,7 +49,7 @@ class="flex items-center gap-x-2 font-medium text-gray-300 hover:text-lio-500"
     @endcan
 
     @can(App\Policies\ReplyPolicy::UPDATE, $reply)
-        <div class="relative -mr-3" x-data="{ open: false }" @click.away="open = false">
+        <div class="relative -mr-3" x-data="{ open: false }" @click.outside="open = false">
 
             <button
                 class="p-2 rounded hover:bg-gray-100"

resources/views/components/threads/reply.blade.php

@@ -26,7 +26,7 @@
     <div
         class="prose prose-lio max-w-none p-6 break-words"
         x-data="{}"
-        x-init="function () { highlightCode($el); }"
+        x-init="$nextTick(function () { highlightCode($el); })"
         x-html="{{ json_encode(replace_links(md_to_html($reply->body()))) }}"
     >
     </div>

resources/views/components/threads/thread-menu.blade.php

@@ -2,7 +2,7 @@
 
 @canany([App\Policies\ThreadPolicy::UPDATE, App\Policies\ThreadPolicy::DELETE], $thread)
     <div class="flex items-center gap-x-3">
-        <div class="relative -mr-3" x-data="{ open: false }" @click.away="open = false">
+        <div class="relative -mr-3" x-data="{ open: false }" @click.outside="open = false">
 
             <button 
                 class="p-2 rounded hover:bg-gray-100" 

resources/views/components/threads/thread.blade.php

@@ -52,7 +52,7 @@
     <div
         class="prose prose-lio max-w-none p-6 break-words"
         x-data="{}"
-        x-init="function () { highlightCode($el); }"
+        x-init="$nextTick(function () { highlightCode($el); })"
         x-html="{{ json_encode(replace_links(md_to_html($thread->body()))) }}"
     >
     </div>

resources/views/layouts/_alerts.blade.php

@@ -7,7 +7,7 @@
                 class="text-xl"
                 data-dismiss="alert"
                 aria-hidden="true" 
-                @click="$el.remove()"
+                @click="$root.remove()"
             >
                 ×
             </button>
@@ -24,7 +24,7 @@ class="text-xl"
                 class="text-xl"
                 data-dismiss="alert" 
                 aria-hidden="true"
-                @click="$el.remove()"
+                @click="$root.remove()"
             >
                 &times;
             </button>

resources/views/layouts/_nav.blade.php

@@ -1,5 +1,5 @@
 <nav class="{{ isset($hasShadow) ? 'shadow mb-1' : '' }}">
-    <div class="container mx-auto text-gray-800 lg:block lg:py-8" x-data="{ nav: false, search: false, community: false, chat: false, settings: false }" @click.away="nav = false">
+    <div class="container mx-auto text-gray-800 lg:block lg:py-8" x-data="{ nav: false, search: false, community: false, chat: false, settings: false }" @click.outside="nav = false">
         <div class="block bg-white 2xl:-mx-10">
             <div class="lg:px-4 lg:flex">
                 <div class="block lg:flex lg:items-center lg:flex-shrink-0">
@@ -44,7 +44,7 @@
                             </li>
 
                             <li class="rounded lg:mb-0 lg:hover:bg-gray-100">
-                                <div @click.away="chat = false" class="relative">
+                                <div @click.outside="chat = false" class="relative">
                                     <div>
                                         <button @click="chat = !chat" class="flex items-center lg:mb-0 py-1 px-2">
                                             Chat
@@ -71,7 +71,7 @@
                             </li>
 
                             <li class="rounded lg:mb-0 lg:hover:bg-gray-100">
-                                <div @click.away="community = false" class="relative" x-data="{ community: false }">
+                                <div @click.outside="community = false" class="relative" x-data="{ community: false }">
                                     <button @click="community = !community" class="flex items-center lg:mb-0 py-1 px-2">
                                         Community
                                         <x-heroicon-s-chevron-down x-show="!community" class="w-4 h-4 ml-1"/>
@@ -120,7 +120,7 @@
                 </div>
 
                 <div class="w-full block gap-x-4 lg:flex lg:items-center lg:justify-end">
-                    <div class="lg:block" x-cloak :class="{ 'block': search, 'hidden': !search }" @click.away="search = false">
+                    <div class="lg:block" x-cloak :class="{ 'block': search, 'hidden': !search }" @click.outside="search = false">
                         @include('_partials._search')
                     </div>
 
@@ -159,7 +159,7 @@
 
                                     <x-avatar :user="Auth::user()" class="h-8 w-8" />
 
-                                    <div @click.away="settings = false">
+                                    <div @click.outside="settings = false">
                                         <button @click="settings = !settings" class="flex items-center">
                                             {{ Auth::user()->username() }}
                                             <x-heroicon-s-chevron-down x-show="!settings" class="w-4 h-4 ml-1"/>

resources/views/livewire/editor.blade.php

@@ -5,7 +5,7 @@
         </span>
     @endif
 
-    <div x-data="editorConfig($wire.entangle('body').defer)" @editor-control-clicked.window="handleClick($event.detail, $el)" class="bg-white rounded-md shadow-md">
+    <div x-data="editorConfig($wire.entangle('body').defer)" @editor-control-clicked.window="handleClick($event.detail, $root)" class="bg-white rounded-md shadow-md">
 
         <ul class="flex p-5 gap-x-4">
             <li>