Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit e8eb291

Browse files
rawilkrawilk
authored
Alpine v3 (#22)
1 parent 8f6711f commit e8eb291

File tree

7 files changed

+57
-54
lines changed

7 files changed

+57
-54
lines changed

‎config/form-components.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@
215215
|
216216
*/
217217
'assets' => [
218-
'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js',
218+
'alpine' => 'https://unpkg.com/alpinejs@3.1.0/dist/cdn.min.js',
219219

220220
'flatpickr' => [
221221
'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css',

‎resources/js/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// TODO: convert into Alpine.data(...) once alpine supports args for this method
12
import customSelect from './custom-select';
23

34
window.customSelect = customSelect;

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

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,70 @@
11
<div wire:ignore
22
{{ $extraAttributes }}
3-
x-data="{ pond: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
3+
x-data="{ pond: null, wireId: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
44
x-cloak
55
x-on:file-pond-clear.window="
6-
const id = $wire && $wire.__instance.id;
7-
const sentId = $event.detail.id;
8-
if (id && (sentId !== id)) {
9-
return;
6+
if (! this.wireId || $event.detail.id !== this.wireId) {
7+
return;
108
}
9+
1110
@if ($multiple)
1211
pond.getFiles().forEach(file => pond.removeFile(file.id));
1312
@else
1413
pond.removeFile();
1514
@endif
1615
"
1716
x-init="
18-
{{ $plugins ?? '' }}
19-
20-
@if ($shouldWatch($attributes))
21-
$watch('value', value => {
22-
@if ($multiple)
23-
const removeOldFiles = (newValue, oldValue) => {
24-
if (newValue.length < oldValue.length) {
25-
const difference = oldValue.filter(i => ! newValue.includes(i));
17+
{{ $plugins ?? '' }}
2618
27-
difference.forEach(serverId => {
28-
const file = pond.getFiles().find(f => f.serverId === serverId);
29-
30-
file && pond.removeFile(file.id);
31-
});
32-
}
33-
};
19+
@if ($shouldWatch($attributes))
20+
$watch('value', value => {
21+
@if ($multiple)
22+
const removeOldFiles = (newValue, oldValue) => {
23+
if (newValue.length < oldValue.length) {
24+
const difference = oldValue.filter(i => ! newValue.includes(i));
3425
35-
if (this.oldValue !== undefined) {
36-
try {
37-
const files = Array.isArray(value) ? value : JSON.parse(String(value).split('livewire-files:')[1]);
38-
const oldFiles = Array.isArray(this.oldValue) ? this.oldValue : JSON.parse(String(this.oldValue).split('livewire-files:')[1]);
26+
difference.forEach(serverId => {
27+
const file = pond.getFiles().find(f => f.serverId === serverId);
3928
40-
if (Array.isArray(files) && Array.isArray(oldFiles)) {
41-
removeOldFiles(files, oldFiles);
42-
}
43-
} catch (e) {}
29+
file && pond.removeFile(file.id);
30+
});
4431
}
32+
};
4533
46-
this.oldValue = value;
47-
@else
48-
! value && pond.removeFile();
49-
@endif
50-
});
51-
@endif
34+
if (this.oldValue !== undefined) {
35+
try {
36+
const files = Array.isArray(value) ? value : JSON.parse(String(value).split('livewire-files:')[1]);
37+
const oldFiles = Array.isArray(this.oldValue) ? this.oldValue : JSON.parse(String(this.oldValue).split('livewire-files:')[1]);
5238
53-
pond = FilePond.create($refs.input, {
54-
{{ $jsonOptions() }}
55-
{{-- Enhance for livewire support --}}
56-
@if ($attributes->whereStartsWith('wire:model')->first())
57-
server: {
58-
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
59-
@this.upload('{{ $attributes->wire('model')->value() }}', file, load, error, progress);
60-
},
61-
revert: (filename, load) => {
62-
@this.removeUpload('{{ $attributes->wire('model')->value() }}', filename, load);
63-
},
64-
},
39+
if (Array.isArray(files) && Array.isArray(oldFiles)) {
40+
removeOldFiles(files, oldFiles);
41+
}
42+
} catch (e) {}
43+
}
44+
45+
this.oldValue = value;
46+
@else
47+
! value && pond.removeFile();
6548
@endif
66-
{{ $optionsSlot ?? '' }}
6749
});
50+
@endif
51+
52+
$nextTick(function() {
53+
pond = FilePond.create($refs.input, {
54+
{{ $jsonOptions() }},
55+
@if ($attributes->whereStartsWith('wire:model')->first())
56+
server: {
57+
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
58+
@this.upload('{{ $attributes->wire('model')->value() }}', file, load, error, progress);
59+
},
60+
revert: (filename, load) => {
61+
@this.removeUpload('{{ $attributes->wire('model')->value() }}', filename, load);
62+
},
63+
},
64+
@endif
65+
{{ $optionsSlot ?? '' }}
66+
});
67+
));
6868
"
6969
>
7070
<input x-ref="input"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ class="outline-none"
4848

4949
{{-- Upload progress --}}
5050
@if ($canShowUploadProgress($attributes))
51-
<div class="relative" x-show.transition.opacity.duration.150ms="isUploading" x-cloak>
51+
<div class="relative" x-show="isUploading" x-transition x-cloak>
5252
<div class="flex mb-2 items-center justify-between">
5353
<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">
5454
{{ __('form-components::messages.file_upload_processing') }}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@endif
1111
})"
1212
x-init="init({{ $hasWireModel ? '$wire' : 'null' }}, $dispatch)"
13-
x-on:click.away="close()"
13+
x-on:click.outside="close()"
1414
x-on:keydown.escape="close()"
1515
x-on:keydown.enter.stop.prevent="onEnter()"
1616
x-on:keydown.arrow-up.prevent="focusPreviousOption()"

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@ class="leading-addon cursor-pointer inline-flex items-center px-3 rounded-l-md b
5959

6060
@if ($clearable)
6161
<div class="trailing-icon pr-3 flex items-center absolute inset-y-0 right-0">
62-
<button x-show.transition.opacity.150ms="Boolean(value)"
63-
x-on:click="value = null; fp.setDate(value)"
62+
<button x-show="Boolean(value)"
63+
x-transition
6464
x-cloak
65+
x-on:click="value = null; fp.setDate(value)"
6566
class="form-input-clear h-6 w-6 group rounded-full p-1 hover:bg-blue-gray-200 focus:outline-blue-gray transition-colors"
6667
type="button"
6768
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@ class="{{ $buttonClass() }}"
1616
{{-- user has opted to customize the "selected text" on the button --}}
1717
{!! $buttonDisplay !!}
1818
@else
19-
<span x-html="buttonDisplay"></span>
19+
<span x-effect="$el.innerHTML = buttonDisplay"></span>
2020
@endif
2121
</div>
2222

2323
@if ($optional && $clearIcon)
2424
<button x-on:click="clear()"
25-
x-show.transition.opacity.150ms="hasSelection()"
25+
x-show="hasSelection()"
26+
x-transition
2627
type="button"
2728
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"
2829
>

0 commit comments

Comments
 (0)