Alpine v3

config/form-components.php

@@ -215,7 +215,7 @@
     |
     */
     'assets' => [
-        'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/[email protected].0/dist/alpine.min.js',
+        'alpine' => 'https://unpkg.com/alpinejs@3.1.0/dist/cdn.min.js',
 
         'flatpickr' => [
             'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css',

resources/js/components/index.js

@@ -1,3 +1,4 @@
+// TODO: convert into Alpine.data(...) once alpine supports args for this method
 import customSelect from './custom-select';
 
 window.customSelect = customSelect;

resources/views/components/files/file-pond.blade.php

@@ -1,70 +1,70 @@
 <div wire:ignore
      {{ $extraAttributes }}
-     x-data="{ pond: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
+     x-data="{ pond: null, wireId: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
      x-cloak
      x-on:file-pond-clear.window="
-         const id = $wire && $wire.__instance.id;
-         const sentId = $event.detail.id;
-         if (id && (sentId !== id)) {
-            return;
+         if (! this.wireId || $event.detail.id !== this.wireId) {
+             return;
          }
+
          @if ($multiple)
             pond.getFiles().forEach(file => pond.removeFile(file.id));
          @else
             pond.removeFile();
          @endif
      "
      x-init="
-        {{ $plugins ?? '' }}
-
-        @if ($shouldWatch($attributes))
-            $watch('value', value => {
-                @if ($multiple)
-                    const removeOldFiles = (newValue, oldValue) => {
-                        if (newValue.length < oldValue.length) {
-                            const difference = oldValue.filter(i => ! newValue.includes(i));
+     {{ $plugins ?? '' }}
 
-                            difference.forEach(serverId => {
-                                const file = pond.getFiles().find(f => f.serverId === serverId);
-
-                                file && pond.removeFile(file.id);
-                            });
-                        }
-                    };
+    @if ($shouldWatch($attributes))
+        $watch('value', value => {
+            @if ($multiple)
+                const removeOldFiles = (newValue, oldValue) => {
+                    if (newValue.length < oldValue.length) {
+                        const difference = oldValue.filter(i => ! newValue.includes(i));
 
-                    if (this.oldValue !== undefined) {
-                        try {
-                            const files = Array.isArray(value) ? value : JSON.parse(String(value).split('livewire-files:')[1]);
-                            const oldFiles = Array.isArray(this.oldValue) ? this.oldValue : JSON.parse(String(this.oldValue).split('livewire-files:')[1]);
+                        difference.forEach(serverId => {
+                            const file = pond.getFiles().find(f => f.serverId === serverId);
 
-                            if (Array.isArray(files) && Array.isArray(oldFiles)) {
-                                removeOldFiles(files, oldFiles);
-                            }
-                        } catch (e) {}
+                            file && pond.removeFile(file.id);
+                        });
                     }
+                };
 
-                    this.oldValue = value;
-                @else
-                    ! value && pond.removeFile();
-                @endif
-            });
-        @endif
+                if (this.oldValue !== undefined) {
+                    try {
+                        const files = Array.isArray(value) ? value : JSON.parse(String(value).split('livewire-files:')[1]);
+                        const oldFiles = Array.isArray(this.oldValue) ? this.oldValue : JSON.parse(String(this.oldValue).split('livewire-files:')[1]);
 
-        pond = FilePond.create($refs.input, {
-            {{ $jsonOptions() }}
-            {{-- Enhance for livewire support --}}
-            @if ($attributes->whereStartsWith('wire:model')->first())
-                server: {
-                    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
-                        @this.upload('{{ $attributes->wire('model')->value() }}', file, load, error, progress);
-                    },
-                    revert: (filename, load) => {
-                        @this.removeUpload('{{ $attributes->wire('model')->value() }}', filename, load);
-                    },
-                },
+                        if (Array.isArray(files) && Array.isArray(oldFiles)) {
+                            removeOldFiles(files, oldFiles);
+                        }
+                    } catch (e) {}
+                }
+
+                this.oldValue = value;
+            @else
+                ! value && pond.removeFile();
             @endif
-            {{ $optionsSlot ?? '' }}
         });
+    @endif
+
+     $nextTick(function() {
+         pond = FilePond.create($refs.input, {
+             {{ $jsonOptions() }},
+             @if ($attributes->whereStartsWith('wire:model')->first())
+                 server: {
+                     process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
+                         @this.upload('{{ $attributes->wire('model')->value() }}', file, load, error, progress);
+                     },
+                     revert: (filename, load) => {
+                         @this.removeUpload('{{ $attributes->wire('model')->value() }}', filename, load);
+                     },
+                 },
+             @endif
+             {{ $optionsSlot ?? '' }}
+         });
+     ));
     "
 >
     <input x-ref="input"

resources/views/components/files/file-upload.blade.php

@@ -48,7 +48,7 @@ class="outline-none"
 
         {{-- Upload progress --}}
         @if ($canShowUploadProgress($attributes))
-        <div class="relative" x-show.transition.opacity.duration.150ms="isUploading" x-cloak>
+        <div class="relative" x-show="isUploading" x-transition x-cloak>
             <div class="flex mb-2 items-center justify-between">
                 <div class="file-upload__badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-green-100 text-green-800">
                     {{ __('form-components::messages.file_upload_processing') }}

resources/views/components/inputs/custom-select.blade.php

@@ -10,7 +10,7 @@
         @endif
      })"
      x-init="init({{ $hasWireModel ? '$wire' : 'null' }}, $dispatch)"
-     x-on:click.away="close()"
+     x-on:click.outside="close()"
      x-on:keydown.escape="close()"
      x-on:keydown.enter.stop.prevent="onEnter()"
      x-on:keydown.arrow-up.prevent="focusPreviousOption()"

resources/views/components/inputs/date-picker.blade.php

@@ -59,9 +59,10 @@ class="leading-addon cursor-pointer inline-flex items-center px-3 rounded-l-md b
 
     @if ($clearable)
         <div class="trailing-icon pr-3 flex items-center absolute inset-y-0 right-0">
-            <button x-show.transition.opacity.150ms="Boolean(value)"
-                    x-on:click="value = null; fp.setDate(value)"
+            <button x-show="Boolean(value)"
+                    x-transition
                     x-cloak
+                    x-on:click="value = null; fp.setDate(value)"
                     class="form-input-clear h-6 w-6 group rounded-full p-1 hover:bg-blue-gray-200 focus:outline-blue-gray transition-colors"
                     type="button"
             >

resources/views/partials/custom-select-button.blade.php

@@ -16,13 +16,14 @@ class="{{ $buttonClass() }}"
                 {{-- user has opted to customize the "selected text" on the button --}}
                 {!! $buttonDisplay !!}
             @else
-                <span x-html="buttonDisplay"></span>
+                <span x-effect="$el.innerHTML = buttonDisplay"></span>
             @endif
         </div>
 
         @if ($optional && $clearIcon)
             <button x-on:click="clear()"
-                    x-show.transition.opacity.150ms="hasSelection()"
+                    x-show="hasSelection()"
+                    x-transition
                     type="button"
                     class="custom-select-clear absolute right-8 flex items-center justify-center h-6 w-6 rounded-full text-blue-gray-500 transition-colors hover:bg-blue-gray-300 focus:outline-blue-gray"
             >