docs: update CHANGELOG and README for v2.1.4

- Add v2.1.4 changelog entry with SPA fix and overlap() method
- Add SPA Mode Compatible feature to README
- Add overlap() method to methods table
- Update examples to show overlap() usage
This commit is contained in:
al-saloul
2025-12-17 12:41:14 +03:00
parent cf068b6a45
commit 67594ce8a1
2 changed files with 28 additions and 1 deletions

View File

@@ -2,6 +2,24 @@
All notable changes to `filament-image-gallery` will be documented in this file. All notable changes to `filament-image-gallery` will be documented in this file.
## v2.1.4 - 2025-12-17
### Added
- `overlap()` method for `ImageGalleryColumn` to match Filament's API
- `getOverlap()` method as an alias for consistency
### Fixed
- **SPA Mode Compatibility**: Fixed image gallery viewer not loading without page reload when using `spa()` mode
- Moved Viewer.js initialization to dynamically loaded JavaScript
- Assets are now loaded on-demand when galleries are detected
- Works seamlessly with Livewire 3.x SPA navigation
- **Stacked Layout**: Fixed stacked images not displaying correctly due to Tailwind dynamic class generation
- Replaced Tailwind `-space-x-*` classes with inline `margin-inline-start` styles
### Changed
- Viewer.js CDN assets are now loaded dynamically via JavaScript instead of inline in Blade templates
- Improved MutationObserver for better detection of dynamically added galleries
## v2.1.3 - 2025-12-16 ## v2.1.3 - 2025-12-16
### Changed ### Changed

View File

@@ -45,6 +45,7 @@ A Filament plugin for displaying image galleries with zoom, rotate, flip, and fu
- 💾 **Storage Disk Support** - Works with any Laravel filesystem disk - 💾 **Storage Disk Support** - Works with any Laravel filesystem disk
- 🌙 **Dark Mode Support** - Works seamlessly with dark mode - 🌙 **Dark Mode Support** - Works seamlessly with dark mode
- 🌐 **RTL Support** - Full right-to-left language support - 🌐 **RTL Support** - Full right-to-left language support
-**SPA Mode Compatible** - Works seamlessly with Filament's `spa()` mode without page reload
## Installation ## Installation
@@ -105,6 +106,7 @@ ImageGalleryColumn::make('images')
| `thumbHeight(int)` | Thumbnail height in pixels | `40` | | `thumbHeight(int)` | Thumbnail height in pixels | `40` |
| `limit(int\|null)` | Maximum images to show | `3` | | `limit(int\|null)` | Maximum images to show | `3` |
| `stacked(int\|bool)` | Stack thumbnails. Pass `int` for custom spacing | `false` | | `stacked(int\|bool)` | Stack thumbnails. Pass `int` for custom spacing | `false` |
| `overlap(int)` | Set overlap value for stacked images (0-8) | `2` |
| `square(bool)` | Square shape with rounded corners | `false` | | `square(bool)` | Square shape with rounded corners | `false` |
| `circular(bool)` | Circular shape | `false` | | `circular(bool)` | Circular shape | `false` |
| `ring(int, string)` | Border ring with width and color | `1, null` | | `ring(int, string)` | Border ring with width and color | `1, null` |
@@ -174,9 +176,16 @@ ImageGalleryColumn::make('images')
```php ```php
ImageGalleryColumn::make('images') ImageGalleryColumn::make('images')
->circular() ->circular()
->stacked(3) ->stacked()
->overlap(3) // Control overlap spacing (0-8)
->ring(2, '#3b82f6') ->ring(2, '#3b82f6')
->limit(3) ->limit(3)
// Or use shorthand: stacked(3) sets both stacked=true and overlap=3
ImageGalleryColumn::make('images')
->circular()
->stacked(3)
->limit(3)
``` ```
### Natural Size (No Thumbnail Dimensions) ### Natural Size (No Thumbnail Dimensions)