feat: add DisplayOnEnum with list and grid view support

Author: webplusmultimedia

README.md

@@ -125,6 +125,16 @@ JsonMediaGallery::make('images')
     )
     ->editableCustomProperties(bool|Closure) // if you want to enable/disable the custom properties edition ;
 ```
+### Show your media in a grid way
+
+You can now view your medias in **grid** list like this :
+![img.png](img.png)
+```php
+use GalleryJsonMedia\Tables\Columns\JsonMediaColumn;
+JsonMediaGallery::make('images')
+    ...
+    ->displayOnGrid()
+```
 
 ### In Filament Tables
 ![table-filament-json-media.png](https://raw.githubusercontent.com/webplusmultimedia/filament-json-media/main/table-filament-json-media.png)

img.png

@@ -14,7 +14,7 @@
         "@awcodes/filament-plugin-purge": "^1.1.1",
         "@tailwindcss/postcss": "^4.1.10",
         "@tailwindcss/cli": "^4.1.10",
-        "esbuild": "^0.19.2",
+        "esbuild": "0.25.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.26",
         "tailwindcss": "^4.1.10"

package-lock.json

@@ -14,26 +14,23 @@
     --wp-gallery-icon-wrapper-padding: 0.2rem;
     --wm-progress : 0;
 
+    /* Flex Context */
     display: flex;
-    gap: 1rem;
-    margin-block-end: 1rem;
     scroll-snap-type: x var(--gallery-file-snap-x);
     overflow: hidden;
     transition: all 0.2s ease-in-out;
 
     .image-file {
         scroll-snap-align: center;
         background: var(--gallery-file-green);
-        width: var( --gallery-image-file-width);
-        height: var(--gallery-image-file-height);
         position: relative;
         border-radius: var(--gallery-item-radiux);
         overflow: hidden;
         display: flex;
         flex-shrink: 0;
         align-items: stretch;
         font-size: 11px;
-        box-sizing: border-box;
+        /*box-sizing: border-box;*/
         outline: 1px solid rgba(190, 189, 189, 0.46);
         outline-offset: -1px;
 

package.json

@@ -1,18 +1,23 @@
 @php
     use Filament\Support\Enums\IconSize;
      use Filament\Support\Icons\Heroicon;
-     use GalleryJsonMedia\Enums\GalleryType;
+     use GalleryJsonMedia\Enums\DisplayOnEnum;use GalleryJsonMedia\Enums\GalleryType;
      use function Filament\Support\generate_icon_html;
      use function Filament\Support\generate_loading_indicator_html;
 @endphp
 <template x-for="(file, fileIndex) in uploadFiles" :key="fileIndex">
-    <li class="image-file" role="listitem"
+    <li
+        @class([
+          "image-file h-[180px]",
+          "w-[280px]" => $getDisplayOn() === DisplayOnEnum::LIST,
+          "w-[200px] h-[150px]" => $galleryType() === GalleryType::Document,
+        ])
+        role="listitem"
         x-data="{startGrabbing: false}"
         :data-id="file.filekey"
         :x-ref="fileIndex"
         :x-sortable-item="file.filekey"
         :class="{ 'opacity-25': indexBeingDragged === fileIndex }"
-        @style(['--gallery-image-file-width: 200px;--gallery-image-file-height: 150px;'=> $galleryType() === GalleryType::Document ])
     >
         <div class="flex w-full max-h-fit"
              :class="{'pointer-events-none': indexBeingDragged}"
@@ -38,7 +43,7 @@
             <div class="gallery-footer" x-data="{ itemDrag : false }">
                 <div class="flex">
                     @if($isReorderable())
-                        <button type="button" class="gallery-icon reorder justify-self-start hidden sm:block"
+                        <button type="button" class="gallery-icon reorder justify-self-start hidden @xs:block"
                                 :class="{
                                                     'grabbing-cursor' : startGrabbing,
                                                     'grab-cursor' : !startGrabbing,

resources/css/index.css

@@ -1,7 +1,7 @@
 @php
     use Filament\Support\Facades\FilamentAsset;
     use Filament\Support\Facades\FilamentView;
-    use Illuminate\Support\Arr;
+    use GalleryJsonMedia\Enums\DisplayOnEnum;use Illuminate\Support\Arr;
     $editPropertiesAction = $getAction($getCustomPropertiesActionName()) ;
      $key = $getKey();
 
@@ -92,48 +92,59 @@ class="hidden"
              x-bind="dropZone"
              x-show="canUpload"
         >
-            <div class="flex gap-3 pointer-events-none text-gray-400 dark:text-gray-500 group-hover:text-primary-600 dark:group-hover:text-primary-500 transition-all duration-200" x-ref="ladroptitle">
+            <div
+                class="flex gap-3 pointer-events-none text-gray-400 dark:text-gray-500 group-hover:text-primary-600 dark:group-hover:text-primary-500 transition-all duration-200"
+                x-ref="ladroptitle">
                 @svg(name: 'heroicon-o-document-arrow-up',class:"w-10 h-auto" )
                 <div class="flex flex-col x-space-y-2">
                     <span>{{ trans('gallery-json-media::gallery-json-media.Drag&Drop') }}</span>
                     <span x-text="@js($getAcceptFileText())"></span>
                 </div>
             </div>
         </div>
-        <div class="flex justify-self-end space-y-2"
-             x-show="uploadFiles.length"
-        >
-            <div class="flex gap-x-4 mt-2">
-                <button type="button" x-bind="leftArrow"
-                        class="wm-btn"
-                >
-                    @svg(name: 'heroicon-c-chevron-left',class: 'w-5 h-5')
-                </button>
-                <button type="button" x-bind="rightArrow"
-                        class="wm-btn"
-                >
-                    @svg(name: 'heroicon-c-chevron-right',class: 'w-5 h-5')
-                </button>
+        @if($getDisplayOn() === DisplayOnEnum::LIST)
+            <div class="flex justify-self-end space-y-2"
+                 x-show="uploadFiles.length"
+            >
+                <div class="flex gap-x-4 mt-2">
+                    <button type="button" x-bind="leftArrow"
+                            class="wm-btn"
+                    >
+                        @svg(name: 'heroicon-c-chevron-left',class: 'w-5 h-5')
+                    </button>
+                    <button type="button" x-bind="rightArrow"
+                            class="wm-btn"
+                    >
+                        @svg(name: 'heroicon-c-chevron-right',class: 'w-5 h-5')
+                    </button>
+                </div>
             </div>
-        </div>
+        @endif
 
-        <div class="gallery-file-upload-wrapper"
+        <div @class([
+                "gallery-file-upload-wrapper my-4",
+                "@container" => $getDisplayOn() === DisplayOnEnum::GRID
+             ])
              x-ref="galleryImages"
              x-bind="onScrolling"
         >
             <ul role="list"
-                class="flex gap-2 transition-all duration-200"
+
+                @class([
+                  "flex gap-2 transition-all duration-200" => $getDisplayOn() === DisplayOnEnum::LIST,
+                  "grid gap-4 w-full grid-cols-1 @lg:grid-cols-2 @2xl:grid-cols-3 @4xl:grid-cols-4 @5xl:grid-cols-5 @7xl:grid-cols-6  transition-all duration-200" => $getDisplayOn() === DisplayOnEnum::GRID
+                ])
                 x-sortable
                 @dragend="reorderUsing($el.sortable.toArray())"
-               {{-- @drop.stop.prevent="resetState()"--}}
+                {{-- @drop.stop.prevent="resetState()"--}}
                 x-ref="ulGalleryWrapper"
 
-               {{-- @keydown.window.tab="usedKeyboard = true"
-                @dragenter.stop.prevent="dropcheck++"
-                @dragleave="dropcheck--;dropcheck || rePositionPlaceholder()"
-                @dragover.stop.prevent
-                @dragend="revertState()"
-                @drop.stop.prevent="getSort();resetState()"--}}
+                {{-- @keydown.window.tab="usedKeyboard = true"
+                 @dragenter.stop.prevent="dropcheck++"
+                 @dragleave="dropcheck--;dropcheck || rePositionPlaceholder()"
+                 @dragover.stop.prevent
+                 @dragend="revertState()"
+                 @drop.stop.prevent="getSort();resetState()"--}}
 
                 {{--:class="{'flex-wrap' : !stopDragging }"--}}
             >

resources/dist/gallery-json-media.css

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+namespace GalleryJsonMedia\Enums;
+
+enum DisplayOnEnum: string
+{
+    case GRID = 'grid';
+    case LIST = 'list';
+}

resources/views/forms/content/gallery-content.blade.php

@@ -95,7 +95,7 @@ protected function setUp(): void
         if (! $this->getAcceptedFileTypes()) {
             $this->image();
         }
-
+        $this->displayOnList();
         $this->multiple();
 
         $this->diskName = config('gallery-json-media.disk');