Added theme system (Tailwind default + Bootstrap; configurable via config)

Author: codebyray

CHANGELOG.md

@@ -11,26 +11,55 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-- Configuration documentation for each option in `config/media-uploader.php`, including environment variable overrides, presets (types, mimes, max_kb), and collection → preset mapping.
-- Guidance for creating and registering custom themes:
-    - Create a new folder under `themes`, e.g. `custom`.
-    - Copy the existing `media-uploader` theme file from `tailwind` or `bootstrap` into the new `custom` folder (do not change the file name).
-    - Edit the copied file as desired.
-    - Register it in the `themes` config array, for example: `'custom' => 'media-uploader::themes.custom.media-uploader'`.
-    - Use it globally via `.env` (`MEDIA_UPLOADER_THEME=custom`) or per instance:
-      <livewire:media-uploader
-      :for="$post"
-      collection="images"
-      theme="custom"
-      />
+
 
 ### Changed
-- Clarified the behavior of `accept_from_config` and how the `accept` attribute is derived from the active preset.
 
 ### Fixed
 
 
 ---
+## [v0.2.0] — 2025-09-01
+
+### Added
+- **Theme system** with **Tailwind (default)** and **Bootstrap** themes.
+- **Custom themes** support:
+    1. Create a new folder under `resources/views/vendor/media-uploader/themes`, e.g. `custom/`.
+    2. Copy `media-uploader.blade.php` from `tailwind/` or `bootstrap/` into `custom/` (keep the filename).
+    3. Register in config:
+       ```php
+       'themes' => [
+           'tailwind'  => 'media-uploader::themes.tailwind.media-uploader',
+           'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
+           'custom'    => 'media-uploader::themes.custom.media-uploader',
+       ],
+       'theme' => 'custom', // to make it default
+       ```
+    4. Or set per-instance:
+       ```html
+       <livewire:media-uploader :for="$post" collection="images" theme="custom" />
+       ```
+- Configuration docs for each option in `config/media-uploader.php`, including **ENV overrides**, presets (`types`, `mimes`, `max_kb`), and **collection → preset** mapping.
+
+### Changed
+- Default view now resolves via the **theme map** (Tailwind by default).  
+  Existing installs continue to render with Tailwind unless you switch themes.
+
+### Compatibility
+- **No breaking changes.** Defaults preserve prior behavior.
+- If you previously published the old (pre-theme) Blade, it will keep working if you’ve retained the legacy alias. If you want to use the new theme system, publish/move your override to `themes/<your-theme>/media-uploader.blade.php`.
+
+### Migration Notes (only if you customized the old path)
+- Minor migration required for users who published the old view (move file to the themed path).
+- Move your customized Blade from:
+    ```html
+    resources/views/vendor/media-uploader/livewire/media-uploader.blade.php
+    ```
+  to:
+    ```html
+    resources/views/vendor/media-uploader/themes/tailwind/media-uploader.blade.php
+    ```
+  (or into your custom theme folder), and register that theme in the config.
 
 ## [v0.1.0] — 2025-08-30
 ### Added

README.md

@@ -1,6 +1,6 @@
 # Livewire Media Uploader
 
-Livewire Media Uploader is a reusable Livewire v3 component that integrates seamlessly with Spatie Laravel Media Library. It ships a clean Tailwind Blade view (fully publishable), Alpine overlays for previews and confirmations, drag-and-drop uploads, per-file metadata (caption/description/order), configurable presets, name-conflict strategies, and optional SHA-256 duplicate detection. Drop it in, point it at a model, and you’re shipping in minutes.
+Livewire Media Uploader is a reusable Livewire v3 component that integrates seamlessly with Spatie Laravel Media Library. It ships a clean Tailwind Blade view by default (fully publishable), Bootstrap theme as an option, Alpine overlays for previews/confirmations, drag-and-drop uploads, per-file metadata (caption/description/order), configurable presets, name-conflict strategies, and optional SHA-256 duplicate detection. Drop it in, point it at a model, and you’re shipping in minutes.
 
 ---
 
@@ -25,7 +25,10 @@ Livewire Media Uploader is a reusable Livewire v3 component that integrates seam
 
 ## Features
 
-- ✅ Livewire v3 component with Tailwind-only Blade (no UI dependency)
+- ✅ Livewire v3 component with themeable Blade UI
+  - Tailwind (default)
+  - Bootstrap (optional)
+  - Fully publishable and overridable
 - ✅ Spatie Media Library integration (attach, list, edit meta, delete)
 - ✅ **Publishable view** for per-project customization
 - ✅ Drag & drop uploads + progress bar
@@ -50,6 +53,9 @@ Livewire Media Uploader is a reusable Livewire v3 component that integrates seam
 - spatie/laravel-medialibrary **^10.12**
 - TailwindCSS (optional but recommended for the default view)
 - Alpine.js (used by overlays/progress; see [Overlays & UX Notes](#overlays--ux-notes))
+- CSS depending on theme:
+  - Tailwind theme → TailwindCSS (recommended)
+  - Bootstrap theme → Bootstrap CSS (no Bootstrap JS required; Alpine drives modals)
 
 ---
 
@@ -90,10 +96,34 @@ php artisan vendor:publish --tag=media-uploader-views
 
 After publishing, customize the Blade at:
 ```html
-resources/views/vendor/media-uploader/livewire/media-uploader.blade.php
+resources/views/vendor/media-uploader/themes/tailwind/media-uploader.blade.php
+resources/views/vendor/media-uploader/themes/bootstrap/media-uploader.blade.php
 ```
-
-
+## Theme System (Tailwind + Bootstrap + custom)
+Select the theme in config/media-uploader.php:
+```php
+// config/media-uploader.php
+return [
+    'theme'  => 'tailwind', // 'tailwind' (default) or 'bootstrap'
+    'themes' => [
+        'tailwind'  => 'media-uploader::themes.tailwind.media-uploader',
+        'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
+    ],
+    // ...
+];
+```
+### Custom themes
+- Copy an existing theme directory (e.g. themes/tailwind) to themes/custom and edit the Blade.
+- Register it in the map and select it:
+    ```php
+    'theme'  => 'custom',
+    'themes' => [
+        'tailwind'  => 'media-uploader::themes.tailwind.media-uploader',
+        'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
+        'custom'    => 'media-uploader::themes.custom.media-uploader',
+    ],
+    ```
+  > Note: The component’s Livewire + Alpine behavior is identical across themes. Only classes/markup differ. If you use the Bootstrap theme, make sure your layout includes Bootstrap CSS.
 ## Environment variables (optional)
 You can override preset limits and accepted types/mimes via .env. These map directly to config/media-uploader.php: