feat: dropzoneAttributes + reorderable

src/Laravel/src/Fields/Relationships/HasMany.php

@@ -78,7 +78,7 @@ class HasMany extends ModelRelationField implements HasFieldsContract, FieldWith
 
     protected ?Closure $modifyEditButton = null;
 
-    /** @var ?Closure(ActionButtonContract,ActionButtonContract,ActionButtonContract,ActionButtonContract,static): array */
+    /** @var null|Closure(ActionButtonContract,ActionButtonContract,ActionButtonContract,ActionButtonContract,static): array */
     protected ?Closure $modifyItemButtons = null;
 
     protected ?Closure $modifyBuilder = null;

src/Laravel/src/Handlers/Handler.php

@@ -41,7 +41,7 @@ abstract class Handler implements HasIconContract, HasResourceContract, HasUriKe
     use WithCore;
     use Conditionable;
 
-    /** @var ?Closure(ActionButtonContract, static): ActionButtonContract */
+    /** @var null|Closure(ActionButtonContract, static): ActionButtonContract */
     protected ?Closure $modifyButton = null;
 
     protected array|Closure $notifyUsers = [];

src/UI/resources/views/components/form/file.blade.php

@@ -4,6 +4,7 @@
     'removable' => true,
     'removableAttributes' => null,
     'hiddenAttributes' => null,
+    'dropzoneAttributes' => null,
     'imageable' => true,
 ])
 <div class="form-group form-group-dropzone">
@@ -14,14 +15,11 @@
 
     @if($files !== [])
         <div class="dropzone">
-            <div class="dropzone-items"
-                 x-data="sortable"
-                 data-handle=".dropzone-item"
-            >
+            <div {{ $dropzoneAttributes?->merge(['class' => 'dropzone-items']) ?? "class=dropzone-items" }}>
                 @foreach($files as $index => $file)
                     <x-moonshine::form.file-item
                         :attributes="$attributes"
-                        :itemAttributes="$file['attributes']"
+                        :itemAttributes="$file['attributes']?->merge(['data-id' => $index])"
                         :filename="$file['name']"
                         :raw="$file['raw_value']"
                         :file="$file['full_path']"

src/UI/resources/views/fields/file.blade.php

@@ -5,13 +5,15 @@
     'canDownload' => false,
     'removableAttributes' => null,
     'hiddenAttributes' => null,
+    'dropzoneAttributes' => null,
 ])
 <x-moonshine::form.file
     :attributes="$attributes"
     :files="$files"
     :removable="$isRemovable"
     :removableAttributes="$removableAttributes"
     :hiddenAttributes="$hiddenAttributes"
+    :dropzoneAttributes="$dropzoneAttributes"
     :imageable="false"
     :download="$canDownload"
 />

src/UI/resources/views/fields/image.blade.php

@@ -5,12 +5,14 @@
     'canDownload' => false,
     'removableAttributes' => null,
     'hiddenAttributes' => null,
+    'dropzoneAttributes' => null,
 ])
 <x-moonshine::form.file
     :attributes="$attributes"
     :files="$files"
     :removable="$isRemovable"
     :removableAttributes="$removableAttributes"
     :hiddenAttributes="$hiddenAttributes"
+    :dropzoneAttributes="$dropzoneAttributes"
     :imageable="true"
 />

src/UI/src/Components/CardsBuilder.php

@@ -71,7 +71,7 @@ final class CardsBuilder extends IterableComponent implements
     protected bool $overlay = false;
 
     /**
-     * @var ?Closure(mixed, int, self): ComponentContract
+     * @var null|Closure(mixed, int, self): ComponentContract
      */
     protected ?Closure $customComponent = null;
 

src/UI/src/Fields/File.php

@@ -102,6 +102,7 @@ protected function viewData(): array
             'isRemovable' => $this->isRemovable(),
             'removableAttributes' => $this->getRemovableAttributes(),
             'hiddenAttributes' => $this->getHiddenAttributes(),
+            'dropzoneAttributes' => $this->getDropzoneAttributes(),
             'canDownload' => $this->canDownload(),
         ];
     }

src/UI/src/Fields/FormElement.php

@@ -57,14 +57,14 @@ abstract class FormElement extends MoonShineComponent implements FormElementCont
 
     protected mixed $formattedValue = null;
 
-    /** @var ?Closure(mixed, int, static): mixed */
+    /** @var null|Closure(mixed, int, static): mixed */
     protected ?Closure $formattedValueCallback = null;
 
     protected ?Closure $fromRaw = null;
 
     protected ?Closure $fillCallback = null;
 
-    /** @var ?Closure(static): static */
+    /** @var null|Closure(static): static */
     protected ?Closure $afterFillCallback = null;
 
     protected mixed $data = null;

src/UI/src/Traits/ActionButton/WithModal.php

@@ -22,7 +22,7 @@
 trait WithModal
 {
     /**
-     * @var ?Closure(mixed, DataWrapperContract, static): ComponentContract
+     * @var null|Closure(mixed, DataWrapperContract, static): ComponentContract
      */
     protected ?Closure $modal = null;
 
@@ -74,7 +74,7 @@ public function withConfirm(
         Closure|string|null $button = null,
         Closure|array|null $fields = null,
         HttpMethod $method = HttpMethod::POST,
-        /** @var ?Closure(mixed): FormBuilderContract $formBuilder */
+        /** @var null|Closure(mixed): FormBuilderContract $formBuilder */
         ?Closure $formBuilder = null,
         ?Closure $modalBuilder = null,
         Closure|string|null $name = null,

src/UI/src/Traits/ActionButton/WithOffCanvas.php

@@ -15,7 +15,7 @@
 trait WithOffCanvas
 {
     /**
-     * @var ?Closure(mixed, DataWrapperContract, static): ComponentContract
+     * @var null|Closure(mixed, DataWrapperContract, static): ComponentContract
      */
     protected ?Closure $offCanvas = null;
 

src/UI/src/Traits/Fields/FileTrait.php

@@ -9,6 +9,8 @@
 use MoonShine\Contracts\UI\ComponentAttributesBagContract;
 use MoonShine\Support\Components\MoonShineComponentAttributeBag;
 use MoonShine\Support\DTOs\FileItemExtra;
+use MoonShine\UI\Contracts\FileableContract;
+use MoonShine\UI\Fields\File;
 use MoonShine\UI\Traits\WithStorage;
 
 trait FileTrait
@@ -21,23 +23,64 @@ trait FileTrait
 
     protected bool $keepOriginalFileName = false;
 
-    /** @var ?Closure(mixed, static): string */
+    /** @var null|Closure(mixed, static): string */
     protected ?Closure $customName = null;
 
-    /** @var ?Closure(string, int): string */
+    /** @var null|Closure(string, int): string */
     protected ?Closure $names = null;
 
-    /** @var ?Closure(string, int): array */
+    /** @var null|Closure(string, int): array */
     protected ?Closure $itemAttributes = null;
 
-    /** @var ?Closure(string, int): ?FileItemExtra */
+    /** @var null|Closure(string, int): ?FileItemExtra */
     protected ?Closure $extraAttributes = null;
 
-    /** @var ?Closure(static): Collection */
+    /** @var null|Closure(static): array */
+    protected ?Closure $dropzoneAttributes = null;
+
+    /** @var null|Closure(static): Collection */
     protected ?Closure $remainingValuesResolver = null;
 
     protected ?Collection $remainingValues = null;
 
+    public function dropzoneAttributes(Closure $attributes): static
+    {
+        $this->dropzoneAttributes = $attributes;
+
+        return $this;
+    }
+
+    public function getDropzoneAttributes(): ComponentAttributesBagContract
+    {
+        $attributes = new MoonShineComponentAttributeBag(
+            $this->dropzoneAttributes === null ? [] : \call_user_func($this->dropzoneAttributes, $this),
+        );
+
+        if(!$attributes->has('x-data')) {
+            $attributes = $attributes->merge([
+                'x-data' => 'sortable',
+                'data-handle' => '.dropzone-item',
+            ]);
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * @param  string|Closure(static): string  $url
+     */
+    public function reorderable(string|Closure $url, ?string $group = null): static
+    {
+        return $this->dropzoneAttributes(static function (FileableContract $ctx) use($url, $group) {
+            $url = value($url, $ctx);
+
+            return [
+                'x-data' => "sortable(`$url`, `$group`)",
+                'data-handle' => '.dropzone-item',
+            ];
+        });
+    }
+
     /**
      * @param  Closure(string $filename, int $index): string  $callback
      */
@@ -81,7 +124,7 @@ public function resolveItemAttributes(): Closure
             }
 
             return new MoonShineComponentAttributeBag(
-                (array) \call_user_func($this->itemAttributes, $filename, $index)
+                (array) \call_user_func($this->itemAttributes, $filename, $index),
             );
         };
     }
@@ -155,7 +198,7 @@ public function getAcceptExtension(): string
     {
         $extensions = array_map(
             static fn ($val): string => '.' . $val,
-            $this->allowedExtensions
+            $this->allowedExtensions,
         );
 
         return implode(',', $extensions);
@@ -252,8 +295,8 @@ public function getRemainingValues(): Collection
 
         return collect(
             $this->getCore()->getRequest()->get(
-                $this->getHiddenRemainingValuesKey()
-            )
+                $this->getHiddenRemainingValuesKey(),
+            ),
         );
     }
 
@@ -295,7 +338,7 @@ public function getFullPathValues(): array
     public function removeExcludedFiles(): void
     {
         $values = collect(
-            $this->toValue(withDefault: false)
+            $this->toValue(withDefault: false),
         );
 
         $values->diff($this->getRemainingValues())->each(fn (?string $file) => $file !== null ? $this->deleteFile($file) : null);