├── Documentation
    └── en.md
├── README.md
├── art
    └── Laravel-Metabox.png
├── composer.json
├── screenshots
    ├── checkbox.png
    ├── gallery.png
    ├── radio.png
    ├── select.png
    ├── tabs.png
    ├── text.png
    ├── toggle.png
    └── uploadImage.png
├── src
    ├── Database
    │   ├── factories
    │   │   ├── MetaboxFactory.php
    │   │   └── PostFactory.php
    │   └── migrations
    │   │   └── 2025_03_13_233033_create_metaboxes_table.php
    ├── Facade
    │   └── MetaboxFacade.php
    ├── Metabox.php
    ├── Models
    │   └── Metabox.php
    ├── Resources
    │   └── Views
    │   │   └── components
    │   │       ├── CheckboxMetabox.blade.php
    │   │       ├── GalleryMetabox.blade.php
    │   │       ├── ImageUploadMetabox.blade.php
    │   │       ├── RadioMetabox.blade.php
    │   │       ├── SelectMetabox.blade.php
    │   │       ├── TabMetabox.blade.php
    │   │       └── ToggleMetabox.blade.php
    ├── ServiceProvider
    │   └── MetaboxServiceProvider.php
    ├── Traits
    │   └── HasMetaboxes.php
    └── View
    │   └── Components
    │       ├── CheckboxMetabox.php
    │       ├── GalleryMetabox.php
    │       ├── ImageUploadMetabox.php
    │       ├── RadioMetabox.php
    │       ├── SelectMetabox.php
    │       ├── TabMetabox.php
    │       └── ToggleMetabox.php
└── tests
    └── Feature
        └── MetaboxTest.php


/Documentation/en.md:
--------------------------------------------------------------------------------
  1 | # Text Field
  2 | 
  3 | ### Request
  4 | 
  5 | Request Validation field.
  6 | 
  7 | ```php
  8 | 'text_field' => ['required', 'string', 'max:255'],
  9 | ```
 10 | 
 11 | ### Controller
 12 | 
 13 | To create a `addMetabox` Text field in store and update, do the following.
 14 | 
 15 | ```php
 16 | public function store(Request $request, Post $post)
 17 | {
 18 |     $post->update($request->only(['title', 'content']));
 19 |     $post->addMetabox('text_field', $request->input('text_field'));
 20 |     return back();
 21 | }
 22 | 
 23 | public function update(Request $request, Post $post)
 24 | {
 25 |     $post->update($request->only(['title', 'content']));
 26 |     $post->addMetabox('text_field', $request->input('text_field'));
 27 |     return back();
 28 | }
 29 | ```
 30 | 
 31 | ### Views
 32 | 
 33 | - create.blade.php
 34 | 
 35 | ```html
 36 | <form action="{{ route('posts.store') }}" method="POST">
 37 |     @csrf
 38 |     <div>
 39 |         <label for="title">Title</label>
 40 |         <input type="text" name="title" id="title">
 41 |     </div>
 42 |     <div>
 43 |         <label for="text_field">Metabox Field</label>
 44 |         <input type="text" name="text_field" id="text_field">
 45 |     </div>
 46 |     <button type="submit">Save</button>
 47 | </form>
 48 | ```
 49 | 
 50 | - edit.blade.php
 51 | 
 52 | ```html
 53 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
 54 |     @csrf
 55 |     @method('PUT')
 56 |     <div>
 57 |         <label for="title">Title</label>
 58 |         <input type="text" name="title" value="{{ $post->title }}">
 59 |     </div>
 60 |     <div>
 61 |         <label for="text_field">Metabox Field</label>
 62 |         <input type="text" name="text_field" id="text_field" value="{{ $post->getMetabox('text_field') }}">
 63 |     </div>
 64 |     <button type="submit">Save</button>
 65 | </form>
 66 | ```
 67 | 
 68 | ### Display Metabox Data
 69 | 
 70 | To display metabox data in your views, use the `getMetabox` method:
 71 | 
 72 | ```php
 73 | Text Field: {{ $post->getMetabox('text_field') }}
 74 | ```
 75 | 
 76 | ### Screenshot
 77 | 
 78 | <div align="center">
 79 |     <img src="../screenshots/text.png" alt="Text Field Metabox Laravel">
 80 | </div>
 81 | 
 82 | 
 83 | # File Upload Field
 84 | 
 85 | ### Request
 86 | 
 87 | Request Validation field.
 88 | 
 89 | ```php
 90 | 'img_field' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
 91 | ```
 92 | 
 93 | ### Controller
 94 | 
 95 | To create a `uploadImageMetabox` File Upload field in store and update, do the following.
 96 | 
 97 | ```php
 98 | public function store(Request $request, Post $post)
 99 | {
100 |     $post->update($request->only(['title', 'content']));
101 |     if ($request->hasFile('img_field')) {
102 |        $post->uploadImageMetabox('img_field', $request->file('img_field'));
103 |     }
104 |     return back();
105 | }
106 | 
107 | public function update(Request $request, Post $post)
108 | {
109 |     $post->update($request->only(['title', 'content']));
110 |     if ($request->hasFile('img_field')) {
111 |         $post->uploadImageMetabox('img_field', $request->file('img_field'));
112 |     }
113 |     return back();
114 | }
115 | ```
116 | 
117 | ### Views
118 | 
119 | - create.blade.php
120 | 
121 | ```html
122 | <form action="{{ route('posts.store') }}" method="POST">
123 |     @csrf
124 |     <div>
125 |         <label for="title">Title</label>
126 |         <input type="text" name="title" id="title">
127 |     </div>
128 |     <div>
129 |         <x-ImageUploadMetabox name="img_field" />
130 |     </div>
131 |     <button type="submit">Save</button>
132 | </form>
133 | ```
134 | 
135 | - edit.blade.php
136 | 
137 | ```html
138 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
139 |     @csrf
140 |     @method('PUT')
141 |     <div>
142 |         <label for="title">Title</label>
143 |         <input type="text" name="title" value="{{ $post->title }}">
144 |     </div>
145 |     <div>
146 |         <x-ImageUploadMetabox name="img_field" :value="$post->getMetabox('img_field') ?? null" />
147 |     </div>
148 |     <button type="submit">Save</button>
149 | </form>
150 | ```
151 | ### The Public Disk
152 | 
153 | To create the symbolic link, Enter the following command.
154 | 
155 | ```bash
156 | php artisan storage:link
157 | ```
158 | 
159 | ### Display Metabox Data
160 | 
161 | To display metabox data in your views, use the `getMetabox` method:
162 | 
163 | ```php
164 | @if ($post->getMetabox('img_field'))
165 |     <img src="{{ asset('storage/' . $post->getMetabox('img_field')) }}" alt="Image Preview" style="max-width: 100%;">
166 | @else
167 |     <p>No image available.</p>
168 | @endif
169 | ```
170 | 
171 | ### Screenshot
172 | 
173 | <div align="center">
174 |     <img src="../screenshots/uploadImage.png" alt="Text Field Metabox Laravel">
175 | </div>
176 | 
177 | # Select Field
178 | 
179 | ### Request :
180 | 
181 | Request Validation field.
182 | 
183 | ```php
184 | 'select_field' => 'nullable|string',
185 | ```
186 | ### Controller:
187 | 
188 | To create a `addMetabox` Select field in store and update, do the following.
189 | 
190 | ```php
191 | public function store(Request $request, Post $post)
192 | {
193 |     $post->update($request->only(['title', 'content']));
194 |     
195 |     if ($request->has('select_field')) {
196 |        $post->addMetabox('select_field', $request->input('select_field'));
197 |     }
198 |         
199 |     return back();
200 | }
201 | 
202 | public function update(Request $request, Post $post)
203 | {
204 |     $post->update($request->only(['title', 'content']));
205 |     if ($request->has('select_field')) {
206 |         $post->addMetabox('select_field', $request->input('select_field'));
207 |     }
208 |     return back();
209 | }
210 | ```
211 | 
212 | ### Views
213 | 
214 | - create.blade.php
215 | 
216 | ```html
217 | <form action="{{ route('posts.store') }}" method="POST">
218 |     @csrf
219 |     <div>
220 |         <label for="title">Title</label>
221 |         <input type="text" name="title" id="title">
222 |     </div>
223 |     <div>
224 |         <x-select-metabox
225 |             name="select_field"
226 |             :options="[
227 |                 'news' => 'News',
228 |                 'tutorial' => 'Tutorial',
229 |                 'event' => 'Event',
230 |             ]"
231 |         />
232 |     </div>
233 |     <button type="submit">Save</button>
234 | </form>
235 | ```
236 | 
237 | - edit.blade.php
238 | 
239 | ```html
240 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
241 |     @csrf
242 |     @method('PUT')
243 |     <div>
244 |         <label for="title">Title</label>
245 |         <input type="text" name="title" value="{{ $post->title }}">
246 |     </div>
247 |     <div>
248 |         <x-select-metabox
249 |             name="select_field"
250 |             :options="[
251 |                 'news' => 'News',
252 |                 'tutorial' => 'Tutorial',
253 |                 'event' => 'Event',
254 |             ]"
255 |             :selected="$post->getMetabox('category') ?? null"
256 |         />
257 |     </div>
258 |     <button type="submit">Save</button>
259 | </form>
260 | ```
261 | 
262 | ### Display Metabox Data
263 | 
264 | To display metabox data in your views, use the `getMetabox` method:
265 | 
266 | ```php
267 | {{ $post->getMetabox('select_field') ?? 'No category selected' }}
268 | ```
269 | 
270 | ### Screenshot
271 | 
272 | <div align="center">
273 |     <img src="../screenshots/select.png" alt="Text Field Metabox Laravel">
274 | </div>
275 | 
276 | # Checkbox Field
277 | 
278 | ### Request
279 | 
280 | Request Validation field.
281 | 
282 | ```php
283 | 'checkbox_field' => 'nullable|boolean',
284 | ```
285 | ### Controller
286 | 
287 | To create a `addMetabox` Checkbox field in store and update, do the following.
288 | 
289 | ```php
290 | public function store(Request $request, Post $post)
291 | {
292 |     $post->update($request->only(['title', 'content']));
293 |     
294 |     $post->addMetabox('checkbox_field', $request->has('checkbox_field') ? '1' : '0');
295 |         
296 |     return back();
297 | }
298 | 
299 | public function update(Request $request, Post $post)
300 | {
301 |     $post->update($request->only(['title', 'content']));
302 | 
303 |     $post->addMetabox('checkbox_field', $request->has('checkbox_field') ? '1' : '0');
304 | 
305 |     return back();
306 | }
307 | ```
308 | 
309 | ### Views
310 | 
311 | - create.blade.php
312 | 
313 | ```html
314 | <form action="{{ route('posts.store') }}" method="POST">
315 |     @csrf
316 |     <div>
317 |         <label for="title">Title</label>
318 |         <input type="text" name="title" id="title">
319 |     </div>
320 |     <div>
321 |         <x-CheckboxMetabox
322 |             name="checkbox_field"
323 |             label="Enable / Disable"
324 |             value="1"
325 |         />
326 |     </div>
327 |     <button type="submit">Save</button>
328 | </form>
329 | ```
330 | 
331 | - edit.blade.php
332 | 
333 | ```html
334 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
335 |     @csrf
336 |     @method('PUT')
337 |     <div>
338 |         <label for="title">Title</label>
339 |         <input type="text" name="title" value="{{ $post->title }}">
340 |     </div>
341 |     <div>
342 |         <x-CheckboxMetabox
343 |             name="checkbox_field"
344 |             label="Enable / Disable"
345 |             :checked="$post->getMetabox('checkbox_field') === '1'"
346 |             value="1"
347 |         />
348 |     </div>
349 |     <button type="submit">Save</button>
350 | </form>
351 | ```
352 | 
353 | ### Display Metabox Data
354 | 
355 | To display metabox data in your views, use the `getMetabox` method:
356 | 
357 | ```php
358 | @if($post->getMetabox('checkbox_field') === '1')
359 |     <span class="badge">Enable</span>
360 | @else
361 |     <span class="badge">Disable</span>
362 | @endif
363 | ```
364 | 
365 | ### Screenshot
366 | 
367 | <div align="center">
368 |     <img src="../screenshots/checkbox.png" alt="Text Field Metabox Laravel">
369 | </div>
370 | 
371 | # Toggle Field
372 | 
373 | ### Controller
374 | 
375 | To create a `addMetabox` Toggle field in store and update, do the following.
376 | 
377 | ```php
378 | public function store(Request $request, Post $post)
379 | {
380 |     $post->update($request->only(['title', 'content']));
381 |     
382 |     $post->addMetabox('toggle_field', $request->input('toggle_field'));
383 |         
384 |     return back();
385 | }
386 | 
387 | public function update(Request $request, Post $post)
388 | {
389 |     $post->update($request->only(['title', 'content']));
390 | 
391 |     $post->addMetabox('toggle_field', $request->input('toggle_field'));
392 | 
393 |     return back();
394 | }
395 | ```
396 | 
397 | ### Views
398 | 
399 | - create.blade.php
400 | 
401 | ```html
402 | <form action="{{ route('posts.store') }}" method="POST">
403 |     @csrf
404 |     <div>
405 |         <label for="title">Title</label>
406 |         <input type="text" name="title" id="title">
407 |     </div>
408 |     <div>
409 |         <x-ToggleMetabox
410 |             name="toggle_field"
411 |             label="Enable / Disable"
412 |             on-value="1"
413 |             off-value="0"
414 |         />
415 |     </div>
416 |     <button type="submit">Save</button>
417 | </form>
418 | ```
419 | 
420 | - edit.blade.php
421 | 
422 | ```html
423 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
424 |     @csrf
425 |     @method('PUT')
426 |     <div>
427 |         <label for="title">Title</label>
428 |         <input type="text" name="title" value="{{ $post->title }}">
429 |     </div>
430 |     <div>
431 |         <x-ToggleMetabox
432 |             name="toggle_field"
433 |             label="Enable / Disable"
434 |             :checked="$post->getMetabox('toggle_field') === '1'"
435 |             on-value="1"
436 |             off-value="0"
437 |         />
438 |     </div>
439 |     <button type="submit">Save</button>
440 | </form>
441 | ```
442 | 
443 | ### Display Metabox Data
444 | 
445 | To display metabox data in your views, use the `getMetabox` method:
446 | 
447 | ```php
448 | @if($post->getMetabox('toggle_field') === '1')
449 |     <span class="badge active">Enable</span>
450 | @else
451 |     <span class="badge">Disable</span>
452 | @endif
453 | ```
454 | 
455 | ### Screenshot
456 | 
457 | <div align="center">
458 |     <img src="../screenshots/toggle.png" alt="Text Field Metabox Laravel">
459 | </div>
460 | 
461 | # Radio Field
462 | 
463 | ### Controller
464 | 
465 | To create a `addMetabox` Radio field in store and update, do the following.
466 | 
467 | ```php
468 | public function store(Request $request, Post $post)
469 | {
470 |     $post->update($request->only(['title', 'content']));
471 |     
472 |     $post->addMetabox('radio_field', $request->input('radio_field'));
473 |         
474 |     return back();
475 | }
476 | 
477 | public function update(Request $request, Post $post)
478 | {
479 |     $post->update($request->only(['title', 'content']));
480 | 
481 |     $post->addMetabox('radio_field', $request->input('radio_field'));
482 | 
483 |     return back();
484 | }
485 | ```
486 | 
487 | ### Views
488 | 
489 | - create.blade.php
490 | 
491 | ```html
492 | <form action="{{ route('posts.store') }}" method="POST">
493 |     @csrf
494 |     <div>
495 |         <label for="title">Title</label>
496 |         <input type="text" name="title" id="title">
497 |     </div>
498 |     <div>
499 |         <x-RadioMetabox
500 |             name="radio_field"
501 |             :options="[
502 |                     'draft' => 'Draft',
503 |                     'published' => 'Published',
504 |                     'archived' => 'Archived'
505 |                 ]"
506 |             orientation="horizontal"
507 |         />
508 |     </div>
509 |     <button type="submit">Save</button>
510 | </form>
511 | ```
512 | 
513 | - edit.blade.php
514 | 
515 | ```html
516 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
517 |     @csrf
518 |     @method('PUT')
519 |     <div>
520 |         <label for="title">Title</label>
521 |         <input type="text" name="title" value="{{ $post->title }}">
522 |     </div>
523 |     <div>
524 |         <x-RadioMetabox
525 |             name="radio_field"
526 |             :options="[
527 |                 'draft' => 'Draft',
528 |                 'published' => 'Published',
529 |                 'archived' => 'Archived'
530 |             ]"
531 |             :selected="$post->getMetabox('radio_field')"
532 |             orientation="horizontal"
533 |         />
534 |     </div>
535 |     <button type="submit">Save</button>
536 | </form>
537 | ```
538 | 
539 | ### Display Metabox Data
540 | 
541 | To display metabox data in your views, use the `getMetabox` method:
542 | 
543 | ```php
544 | @php
545 |     $statusLabels = [
546 |         'draft' => 'Draft',
547 |         'published' => 'Published',
548 |         'archived' => 'Archived'
549 |     ];
550 |     $currentStatus = $post->getMetabox('radio_field');
551 | @endphp
552 | 
553 | @if($currentStatus)
554 |     <span class="badge {{ $currentStatus }}">
555 |         {{ $statusLabels[$currentStatus] ?? $currentStatus }}
556 |     </span>
557 | @endif
558 | ```
559 | 
560 | ### Screenshot
561 | 
562 | <div align="center">
563 |     <img src="../screenshots/radio.png" alt="Text Field Metabox Laravel">
564 | </div>
565 | 
566 | # Tabs Field
567 | 
568 | ### Views
569 | 
570 | To create a `x-TabMetabox` Tabs field in store and update, do the following.
571 | 
572 | - create.blade.php and edit.blade.php
573 | 
574 | ```html
575 | <form action="{{ route('posts.store') }}" method="POST">
576 |     @csrf
577 |     <div>
578 |         <label for="title">Title</label>
579 |         <input type="text" name="title" id="title">
580 |     </div>
581 |     <div>
582 |         <x-TabMetabox :tabs="[
583 |             'general' => 'General Settings',
584 |             'advanced' => 'Advanced Options',
585 |             'seo' => 'SEO Settings'
586 |         ]">
587 |         <div id="tab-general" class="MetaboxTabPane active">
588 |             General settings content
589 |         </div>
590 | 
591 |         <div id="tab-advanced" class="MetaboxTabPane">
592 |             Advanced options content
593 |         </div>
594 | 
595 |         <div id="tab-seo" class="MetaboxTabPane">
596 |             SEO settings content
597 |         </div>
598 |     </x-TabMetabox>
599 |     </div>
600 |     <button type="submit">Save</button>
601 | </form>
602 | ```
603 | 
604 | ### Screenshot
605 | 
606 | <div align="center">
607 |     <img src="../screenshots/tabs.png" alt="Text Field Metabox Laravel">
608 | </div>
609 | 
610 | # Gallery Images Field
611 | 
612 | ### Request
613 | 
614 | ```php
615 | 'gallery_field.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048',
616 | ```
617 | 
618 | ### Controller
619 | 
620 | To create a `addMetabox` Gallery Images field in store and update, do the following.
621 | 
622 | ```php
623 | public function store(Request $request, Post $post)
624 | {
625 |     $post->update($request->only(['title', 'content']));
626 |     
627 |     $gallery = json_decode($post->getMetabox('gallery_field'), true) ?? [];
628 | 
629 |     if ($request->hasFile('gallery_field')) {
630 |         foreach ($request->file('gallery_field') as $file) {
631 |             $path = $file->store('gallery', 'public');
632 |             $gallery[] = $path;
633 |         }
634 |     }
635 | 
636 |     if ($request->post_gallery_existing) {
637 |         $existing = array_filter($request->post_gallery_existing);
638 |         $gallery = array_merge($existing, $gallery);
639 |     }
640 | 
641 |     $post->addMetabox('gallery_field', json_encode(array_unique($gallery)));
642 |         
643 |     return back();
644 | }
645 | 
646 | public function update(Request $request, Post $post)
647 | {
648 |     $post->update($request->only(['title', 'content']));
649 | 
650 |     $gallery = json_decode($post->getMetabox('gallery_field'), true) ?? [];
651 | 
652 |     if ($request->hasFile('gallery_field')) {
653 |         foreach ($request->file('gallery_field') as $file) {
654 |             $path = $file->store('gallery', 'public');
655 |             $gallery[] = $path;
656 |         }
657 |     }
658 | 
659 |     if ($request->post_gallery_existing) {
660 |         $existing = array_filter($request->post_gallery_existing);
661 |         $gallery = array_merge($existing, $gallery);
662 |     }
663 | 
664 |     $post->addMetabox('gallery_field', json_encode(array_unique($gallery)));
665 | 
666 |     return back();
667 | }
668 | ```
669 | 
670 | ### Views
671 | 
672 | `limit` : Limit on the number of images displayed
673 | 
674 | - create.blade.php
675 | 
676 | ```html
677 | <form action="{{ route('posts.store') }}" method="POST">
678 |     @csrf
679 |     <div>
680 |         <label for="title">Title</label>
681 |         <input type="text" name="title" id="title">
682 |     </div>
683 |     <div>
684 |         <x-GalleryMetabox
685 |             name="gallery_field"
686 |             :limit="10"
687 |         />
688 |     </div>
689 |     <button type="submit">Save</button>
690 | </form>
691 | ```
692 | 
693 | - edit.blade.php
694 | 
695 | ```html
696 | <form action="{{ route('posts.update', $post->id) }}" method="POST">
697 |     @csrf
698 |     @method('PUT')
699 |     <div>
700 |         <label for="title">Title</label>
701 |         <input type="text" name="title" value="{{ $post->title }}">
702 |     </div>
703 |     <div>
704 |         <x-GalleryMetabox
705 |             name="gallery_field"
706 |             :images="$post->getMetabox('gallery_field')"
707 |             :limit="10"
708 |         />
709 |     </div>
710 |     <button type="submit">Save</button>
711 | </form>
712 | ```
713 | 
714 | ### Display Metabox Data
715 | 
716 | To display metabox data in your views, use the `getMetabox` method:
717 | 
718 | ```php
719 | @php
720 |     $galleryData = json_decode($row->getMetabox('gallery_field'), true) ?? [];
721 | @endphp
722 | 
723 | @foreach($galleryData as $imagePath)
724 |     @if(Storage::disk('public')->exists($imagePath))
725 |         <div class="gallery-item">
726 |             <img src="{{ asset('storage/'.$imagePath) }}" alt="Gallery Image">
727 |         </div>
728 |     @endif
729 | @endforeach
730 | ```
731 | 
732 | ### Screenshot
733 | 
734 | <div align="center">
735 |     <img src="../screenshots/gallery.png" alt="Text Field Metabox Laravel">
736 | </div>
737 | 
738 | 
739 | 
740 | 
741 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |     <a href="https://github.com/Rayiumir/laravel-metabox" target="_blank">
 3 |         <img src="./art/Laravel-Metabox.png" alt="Laravel Metabox Logo">
 4 |     </a>
 5 | </div>
 6 | <br>
 7 | <div align="center">
 8 |     <img alt="Packagist Downloads" src="https://img.shields.io/packagist/dd/rayiumir/laravel-metabox">
 9 |     <img alt="Packagist Downloads" src="https://img.shields.io/packagist/dm/rayiumir/laravel-metabox">
10 |     <img alt="Packagist Downloads" src="https://img.shields.io/packagist/dt/rayiumir/laravel-metabox">
11 |     <img alt="Packagist License" src="https://img.shields.io/packagist/l/rayiumir/laravel-metabox">
12 |     <img alt="GitHub Release" src="https://img.shields.io/github/v/release/rayiumir/laravel-metabox">
13 |     <img alt="Packagist Dependency Version" src="https://img.shields.io/packagist/dependency-v/rayiumir/laravel-metabox/PHP">
14 | </div>
15 | 
16 | <div align="center">
17 |     <h4>Documentation</h4>
18 |     <a href="./Documentation/en.md"><img alt="Static Badge" src="https://img.shields.io/badge/en-lang?style=flat-square&label=Doc"></a>
19 | </div>
20 | 
21 | # Laravel Metabox
22 | 
23 | Metabox is a highly useful feature for retrieving or displaying WordPress information. We decided to bring this Metabox functionality to Laravel. With Laravel Metabox, you can define features such as custom fields for posts without the need to create a custom field table in the database.
24 | 
25 | # Installs
26 | 
27 | Install Package:
28 | 
29 | ```bash
30 | composer require rayiumir/laravel-metabox
31 | ```
32 | 
33 | After Publish Files:
34 | 
35 | ```bash
36 | php artisan vendor:publish --provider="Rayiumir\\LaravelMetabox\\ServiceProvider\\MetaboxServiceProvider"
37 | ```
38 | 
39 | And Migration Database:
40 | 
41 | ```bash
42 | php artisan migrate
43 | ```
44 | 
45 | # How to use
46 | 
47 | Calling `HasMetaboxes` in Models `Post.php`:
48 | 
49 | ```php
50 | use Rayiumir\LaravelMetabox\Traits\HasMetaboxes;
51 | 
52 | use HasMetaboxes;
53 | ```
54 | 
55 | To delete post metabox data, place the following function in `Post.php`:
56 | 
57 | ```php
58 | protected static function boot(): void
59 | {
60 |     parent::boot();
61 | 
62 |     static::deleting(function ($post) {
63 |         $post->metaboxes()->delete();
64 |     });
65 | }
66 | ```
67 | 
68 | # Task Laravel Metabox
69 | 
70 | - [X] Text Field
71 | - [X] Upload Field
72 | - [X] Select Field
73 | - [X] Checkbox Field
74 | - [X] Toggle Field
75 | - [X] Radio ‌Button Field
76 | - [X] Tabs Field
77 | - [X] Gallery Image Field
78 | 
79 | 
80 | 


--------------------------------------------------------------------------------
/art/Laravel-Metabox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/art/Laravel-Metabox.png


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "rayiumir/laravel-metabox",
 3 |     "description": "Easy creation of MetaBox for Laravel",
 4 |     "keywords": [
 5 |         "laravel-metabox",
 6 |         "laravel metabox",
 7 |         "easy metabox",
 8 |         "laravel",
 9 |         "laravel metabox package"
10 |     ],
11 |     "minimum-stability": "stable",
12 |     "license": "MIT",
13 |     "type": "package",
14 |     "authors": [
15 |         {
16 |             "name": "Raymond Baghumian",
17 |             "email": "rayiumir@gmail.com",
18 |             "homepage": "https://github.com/Rayiumir",
19 |             "role": "Developer"
20 |         }
21 |     ],
22 |     "require": {
23 |         "php": "^8.0",
24 |         "laravel/framework": "^9.0|^10.0|^11.0|^12.0"
25 |     },
26 |     "require-dev": {
27 |         "pestphp/pest-plugin-laravel": "^1.4.0|^2.0.0|^3.1.0",
28 |         "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0"
29 |     },
30 |     "autoload": {
31 |         "psr-4": {
32 |             "Rayiumir\\LaravelMetabox\\": "src/"
33 |         }
34 |     },
35 |     "autoload-dev": {
36 |         "psr-4": {
37 |             "Rayiumir\\LaravelMetabox\\Tests\\": "tests/"
38 |         }
39 |     },
40 |     "config": {
41 |         "sort-packages": true,
42 |         "allow-plugins": {
43 |             "pestphp/pest-plugin": true
44 |         }
45 |     },
46 |     "extra": {
47 |         "laravel": {
48 |             "providers": [
49 |                 "Rayiumir\\LaravelMetabox\\ServiceProvider\\MetaboxServiceProvider"
50 |             ]
51 |         }
52 |     },
53 |     "scripts": {
54 |         "test": "vendor/bin/pest",
55 |         "test-coverage": "vendor/bin/pest --coverage-html ./coverage"
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/screenshots/checkbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/checkbox.png


--------------------------------------------------------------------------------
/screenshots/gallery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/gallery.png


--------------------------------------------------------------------------------
/screenshots/radio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/radio.png


--------------------------------------------------------------------------------
/screenshots/select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/select.png


--------------------------------------------------------------------------------
/screenshots/tabs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/tabs.png


--------------------------------------------------------------------------------
/screenshots/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/text.png


--------------------------------------------------------------------------------
/screenshots/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/toggle.png


--------------------------------------------------------------------------------
/screenshots/uploadImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LaraPire/laravel-metabox/b37e3a0f19cc2540fac496187d80e93a219fff7e/screenshots/uploadImage.png


--------------------------------------------------------------------------------
/src/Database/factories/MetaboxFactory.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\Database\factories;
 4 | 
 5 | use App\Models\Post;
 6 | use Illuminate\Database\Eloquent\Factories\Factory;
 7 | 
 8 | /**
 9 |  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Model>
10 |  */
11 | class MetaboxFactory extends Factory
12 | {
13 |     protected $model = Post::class;
14 |     /**
15 |      * Define the model's default state.
16 |      *
17 |      * @return array<string, mixed>
18 |      */
19 |     public function definition(): array
20 |     {
21 |         return [
22 |             'model_type' => 'App\Models\Post',
23 |             'model_id' => Post::factory(),
24 |             'key' => $this->faker->word,
25 |             'value' => $this->faker->sentence,
26 |         ];
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/Database/factories/PostFactory.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\Database\factories;
 4 | 
 5 | use App\Models\Post;
 6 | use App\Models\User;
 7 | use Illuminate\Database\Eloquent\Factories\Factory;
 8 | 
 9 | /**
10 |  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
11 |  */
12 | class PostFactory extends Factory
13 | {
14 |     protected $model = Post::class;
15 |     /**
16 |      * Define the model's default state.
17 |      *
18 |      * @return array<string, mixed>
19 |      */
20 |     public function definition(): array
21 |     {
22 |         return [
23 |             'title' => $this->faker->sentence,
24 |             'slug' => $this->faker->slug,
25 |             'img' => $this->faker->imageUrl(),
26 |             'content' => $this->faker->paragraph,
27 |             'user_id' => User::factory(),
28 |         ];
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/Database/migrations/2025_03_13_233033_create_metaboxes_table.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Database\Migrations\Migration;
 4 | use Illuminate\Database\Schema\Blueprint;
 5 | use Illuminate\Support\Facades\Schema;
 6 | 
 7 | return new class extends Migration
 8 | {
 9 |     /**
10 |      * Run the migrations.
11 |      */
12 |     public function up(): void
13 |     {
14 |         Schema::create('metaboxes', function (Blueprint $table) {
15 |             $table->id();
16 |             $table->string('model_type');
17 |             $table->unsignedBigInteger('model_id');
18 |             $table->string('key');
19 |             $table->text('value')->nullable();
20 |             $table->timestamps();
21 |         });
22 |     }
23 | 
24 |     /**
25 |      * Reverse the migrations.
26 |      */
27 |     public function down(): void
28 |     {
29 |         Schema::dropIfExists('metaboxes');
30 |     }
31 | };
32 | 


--------------------------------------------------------------------------------
/src/Facade/MetaboxFacade.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\Facade;
 4 | 
 5 | use Illuminate\Support\Facades\Facade;
 6 | 
 7 | class MetaboxFacade extends Facade
 8 | {
 9 |     protected static function getFacadeAccessor(): string
10 |     {
11 |         return 'Metabox';
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/Metabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox;
 4 | 
 5 | class metabox
 6 | {
 7 |     public static function index(): string
 8 |     {
 9 |         return "Hello World";
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/Models/Metabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\Models;
 4 | 
 5 | use Illuminate\Database\Eloquent\Model;
 6 | 
 7 | class Metabox extends Model
 8 | {
 9 |     protected $fillable = [
10 |         'model_type',
11 |         'model_id',
12 |         'key',
13 |         'value'
14 |     ];
15 | 
16 |     public function model(): \Illuminate\Database\Eloquent\Relations\MorphTo
17 |     {
18 |         return $this->morphTo();
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/CheckboxMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="CheckboxMetabox">
 3 |         <label>
 4 |             <input
 5 |                 type="checkbox"
 6 |                 name="{{ $name }}"
 7 |                 value="{{ $value }}"
 8 |                 {{ $checked ? 'checked' : '' }}
 9 |             >
10 |             {{ $label }}
11 |         </label>
12 |     </div>
13 | 
14 |     <style>
15 |         .CheckboxMetabox {
16 |             margin: 10px 0;
17 |             padding: 10px;
18 |             background: #f9f9f9;
19 |             border-radius: 4px;
20 |         }
21 |         .CheckboxMetabox label {
22 |             display: flex;
23 |             align-items: center;
24 |             gap: 8px;
25 |             cursor: pointer;
26 |         }
27 |     </style>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/GalleryMetabox.blade.php:
--------------------------------------------------------------------------------
  1 | <div>
  2 |     <div class="GalleryMetabox">
  3 |         <input type="file"
  4 |                name="{{ $name }}[]"
  5 |                id="{{ $name }}_upload"
  6 |                multiple
  7 |                accept="image/*"
  8 |                style="display: none;"
  9 |                @if($limit > 0) data-limit="{{ $limit }}" @endif>
 10 | 
 11 |         <div class="GalleryActions">
 12 |             <button type="button" class="AddGalleryImages">
 13 |                 Add Images
 14 |             </button>
 15 |             @if($limit > 0)
 16 |                 <span class="GalleryCounter">(Max {{ $limit }} images)</span>
 17 |             @endif
 18 |         </div>
 19 | 
 20 |         <div class="GalleryPreview">
 21 |             @foreach($images as $index => $image)
 22 |                 <div class="GalleryItem" data-index="{{ $index }}">
 23 |                     <img src="{{ asset('storage/'.$image) }}" alt="Gallery Image">
 24 |                     <button type="button" class="RemoveImage" title="Remove image">
 25 |                         ×
 26 |                     </button>
 27 |                     <input type="hidden" name="{{ $name }}_existing[]" value="{{ $image }}">
 28 |                 </div>
 29 |             @endforeach
 30 |         </div>
 31 |     </div>
 32 | 
 33 |     <style>
 34 |         .GalleryMetabox {
 35 |             margin: 20px 0;
 36 |         }
 37 | 
 38 |         .GalleryActions {
 39 |             margin-bottom: 15px;
 40 |         }
 41 | 
 42 |         .GalleryPreview {
 43 |             display: flex;
 44 |             flex-wrap: wrap;
 45 |             gap: 10px;
 46 |         }
 47 | 
 48 |         .GalleryItem {
 49 |             position: relative;
 50 |             width: 100px;
 51 |             height: 100px;
 52 |             border: 1px solid #ddd;
 53 |         }
 54 | 
 55 |         .GalleryItem img {
 56 |             width: 100%;
 57 |             height: 100%;
 58 |             object-fit: cover;
 59 |         }
 60 | 
 61 |         .RemoveImage {
 62 |             position: absolute;
 63 |             top: 0;
 64 |             right: 0;
 65 |             background: rgba(0,0,0,0.5);
 66 |             color: white;
 67 |             border: none;
 68 |             width: 20px;
 69 |             height: 20px;
 70 |             line-height: 20px;
 71 |             text-align: center;
 72 |             cursor: pointer;
 73 |         }
 74 | 
 75 |         .GalleryCounter {
 76 |             margin-left: 10px;
 77 |             color: #666;
 78 |             font-size: 0.9em;
 79 |         }
 80 |         .AddGalleryImages {
 81 |             color: #fff;
 82 |             background-color: #0d6efd;
 83 |             border: 0;
 84 |             padding: 3px 10px;
 85 |             border-radius: 8px;
 86 |         }
 87 |     </style>
 88 | 
 89 |     <script>
 90 |         document.addEventListener('DOMContentLoaded', function() {
 91 |             // Use event delegation for dynamic elements
 92 |             document.addEventListener('click', function(e) {
 93 |                 // Remove image button
 94 |                 if (e.target.classList.contains('RemoveImage')) {
 95 |                     e.preventDefault();
 96 |                     e.target.closest('.GalleryItem').remove();
 97 |                 }
 98 | 
 99 |                 // Add images button
100 |                 if (e.target.classList.contains('AddGalleryImages')) {
101 |                     document.getElementById('{{ $name }}_upload').click();
102 |                 }
103 |             });
104 | 
105 |             // File input change handler
106 |             const fileInput = document.getElementById('{{ $name }}_upload');
107 |             if (fileInput) {
108 |                 fileInput.addEventListener('change', function(e) {
109 |                     const files = e.target.files;
110 |                     const galleryPreview = document.querySelector('.GalleryPreview');
111 |                     const maxImages = this.dataset.limit || 0;
112 | 
113 |                     if (maxImages > 0 &&
114 |                         galleryPreview.querySelectorAll('.GalleryItem').length + files.length > maxImages) {
115 |                         alert(`Maximum ${maxImages} images allowed`);
116 |                         return;
117 |                     }
118 | 
119 |                     Array.from(files).forEach(file => {
120 |                         if (!file.type.startsWith('image/')) return;
121 | 
122 |                         const reader = new FileReader();
123 |                         reader.onload = function(event) {
124 |                             const div = document.createElement('div');
125 |                             div.className = 'GalleryItem';
126 |                             div.innerHTML = `
127 |                                 <img src="${event.target.result}">
128 |                                 <button class="RemoveImage">×</button>
129 |                             `;
130 |                             galleryPreview.appendChild(div);
131 |                         };
132 |                         reader.readAsDataURL(file);
133 |                     });
134 |                 });
135 |             }
136 |         });
137 |     </script>
138 | </div>
139 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/ImageUploadMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="imageUploadMetabox">
 3 |         <label for="{{ $name }}">Upload Image</label>
 4 |         <input type="file" name="{{ $name }}" id="{{ $name }}" accept="image/*">
 5 | 
 6 |         @if ($value)
 7 |             <div class="imagePreview">
 8 |                 <img src="{{ asset('storage/' . $value) }}" alt="Image Preview" style="max-width: 100%; height: auto;">
 9 |                 <button type="button" class="removeImage">X</button>
10 |             </div>
11 |         @endif
12 |     </div>
13 | 
14 |     <style>
15 |         .imageUploadMetabox {
16 |             margin-bottom: 20px;
17 |         }
18 | 
19 |         .imagePreview {
20 |             margin-top: 10px;
21 |             position: relative;
22 |             display: inline-block;
23 |         }
24 | 
25 |         .removeImage {
26 |             position: absolute;
27 |             top: 0;
28 |             right: 0;
29 |             background: rgba(0,0,0,0.5);
30 |             color: white;
31 |             border: none;
32 |             width: 20px;
33 |             height: 20px;
34 |             line-height: 20px;
35 |             text-align: center;
36 |             cursor: pointer;
37 |         }
38 | 
39 |         .removeImage:hover {
40 |             background-color: #cc0000;
41 |         }
42 |     </style>
43 | 
44 |     <script>
45 |         document.addEventListener('DOMContentLoaded', function () {
46 |             const fileInput = document.getElementById('imgField');
47 |             const imagePreview = document.querySelector('.imagePreview');
48 |             const removeButton = document.querySelector('.removeImage');
49 | 
50 |             if (fileInput && imagePreview) {
51 |                 fileInput.addEventListener('change', function (e) {
52 |                     const file = e.target.files[0];
53 |                     if (file) {
54 |                         const reader = new FileReader();
55 |                         reader.onload = function (e) {
56 |                             imagePreview.querySelector('img').src = e.target.result;
57 |                         };
58 |                         reader.readAsDataURL(file);
59 |                     }
60 |                 });
61 |             }
62 | 
63 |             if (removeButton) {
64 |                 removeButton.addEventListener('click', function () {
65 |                     fileInput.value = '';
66 |                     imagePreview.style.display = 'none';
67 |                 });
68 |             }
69 |         });
70 |     </script>
71 | </div>
72 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/RadioMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="RadioMetabox RadioOrientation-{{ $orientation ?? 'vertical' }}">
 3 |         @foreach($options as $value => $label)
 4 |             <label class="RadioOption">
 5 |                 <input
 6 |                     type="radio"
 7 |                     name="{{ $name }}"
 8 |                     value="{{ $value }}"
 9 |                     {{ $selected == $value ? 'checked' : '' }}
10 |                     class="RadioInput"
11 |                 >
12 |                 <span class="RadioLabel">{{ $label }}</span>
13 |             </label>
14 |         @endforeach
15 |     </div>
16 | 
17 |     <style>
18 |         .RadioMetabox {
19 |             margin: 15px 0;
20 |             font-family: Arial, sans-serif;
21 |         }
22 | 
23 |         .RadioOption {
24 |             display: flex;
25 |             align-items: center;
26 |             margin-bottom: 8px;
27 |             cursor: pointer;
28 |         }
29 | 
30 |         .RadioInput {
31 |             margin-right: 10px;
32 |             width: 16px;
33 |             height: 16px;
34 |             cursor: pointer;
35 |         }
36 | 
37 |         .RadioLabel {
38 |             font-size: 14px;
39 |             color: #333;
40 |         }
41 | 
42 |         /* Horizontal layout */
43 |         .RadioOrientation-horizontal .RadioOption {
44 |             display: inline-block;
45 |             margin-right: 20px;
46 |             margin-bottom: 0;
47 |         }
48 |     </style>
49 | </div>
50 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/SelectMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="SelectMetabox">
 3 |         <label for="{{ $name }}">{{ ucfirst(str_replace('_', ' ', $name)) }}</label>
 4 |         <select name="{{ $name }}" id="{{ $name }}">
 5 |             @foreach ($options as $value => $label)
 6 |                 <option value="{{ $value }}" {{ $selected == $value ? 'selected' : '' }}>{{ $label }}</option>
 7 |             @endforeach
 8 |         </select>
 9 |     </div>
10 |     <style>
11 |         .SelectMetabox {
12 |             margin-bottom: 20px;
13 |         }
14 | 
15 |         .SelectMetabox label {
16 |             display: block;
17 |             margin-bottom: 5px;
18 |         }
19 | 
20 |         .SelectMetabox select {
21 |             width: 100%;
22 |             padding: 8px;
23 |             border: 1px solid #ccc;
24 |             border-radius: 4px;
25 |             font-size: 14px;
26 |         }
27 |     </style>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/TabMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="MetaboxTabs">
 3 |         <ul class="MetaboxTabsNav">
 4 |             @foreach($tabs as $tabId => $tabLabel)
 5 |                 <li class="{{ $activeTab == $tabId ? 'active' : '' }}">
 6 |                     <a href="#{{ $tabPrefix.$tabId }}" data-tab="{{ $tabId }}">
 7 |                         {{ $tabLabel }}
 8 |                     </a>
 9 |                 </li>
10 |             @endforeach
11 |         </ul>
12 | 
13 |         <div class="MetaboxTabsContent">
14 |             {{ $slot }}
15 |         </div>
16 |     </div>
17 | 
18 |     <style>
19 |         .MetaboxTabs {
20 |             margin: 20px 0;
21 |             border: 1px solid #ddd;
22 |             background: #fff;
23 |         }
24 | 
25 |         .MetaboxTabsNav {
26 |             margin: 0;
27 |             padding: 0;
28 |             list-style: none;
29 |             border-bottom: 1px solid #ddd;
30 |             background: #f5f5f5;
31 |             display: flex;
32 |         }
33 | 
34 |         .MetaboxTabsNav li {
35 |             margin: 0;
36 |         }
37 | 
38 |         .MetaboxTabsNav li a {
39 |             display: block;
40 |             padding: 10px 15px;
41 |             text-decoration: none;
42 |             color: #555;
43 |             border-right: 1px solid #ddd;
44 |         }
45 | 
46 |         .MetaboxTabsNav li.active a {
47 |             background: #fff;
48 |             color: #000;
49 |             border-bottom: 1px solid #fff;
50 |             margin-bottom: -1px;
51 |         }
52 | 
53 |         .MetaboxTabsContent {
54 |             padding: 15px;
55 |         }
56 | 
57 |         .MetaboxTabPane {
58 |             display: none;
59 |         }
60 | 
61 |         .MetaboxTabPane.active {
62 |             display: block;
63 |         }
64 |     </style>
65 | 
66 |     <script>
67 |         document.addEventListener('DOMContentLoaded', function() {
68 |             const tabLinks = document.querySelectorAll('.MetaboxTabsNav a');
69 | 
70 |             tabLinks.forEach(link => {
71 |                 link.addEventListener('click', function(e) {
72 |                     e.preventDefault();
73 | 
74 |                     const tabId = this.getAttribute('data-tab');
75 |                     const tabPrefix = '{{ $tabPrefix }}';
76 | 
77 |                     localStorage.setItem('lastActiveTab', tabId);
78 | 
79 |                     document.querySelectorAll('.MetaboxTabsNav li').forEach(li => {
80 |                         li.classList.remove('active');
81 |                     });
82 |                     this.parentNode.classList.add('active');
83 | 
84 |                     document.querySelectorAll('.MetaboxTabPane').forEach(pane => {
85 |                         pane.classList.remove('active');
86 |                     });
87 |                     document.getElementById(tabPrefix + tabId).classList.add('active');
88 |                 });
89 |             });
90 | 
91 |             if (localStorage.getItem('lastActiveTab')) {
92 |                 const lastTab = localStorage.getItem('lastActiveTab');
93 |                 const tabLink = document.querySelector(`.MetaboxTabsNav a[data-tab="${lastTab}"]`);
94 |                 if (tabLink) tabLink.click();
95 |             }
96 |         });
97 |     </script>
98 | </div>
99 | 


--------------------------------------------------------------------------------
/src/Resources/Views/components/ToggleMetabox.blade.php:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="ToggleMetabox">
 3 |         <label class="ToggleSwitch">
 4 |             <input
 5 |                 type="checkbox"
 6 |                 name="{{ $name }}"
 7 |                 value="{{ $onValue }}"
 8 |                 {{ $checked ? 'checked' : '' }}
 9 |                 class="ToggleInput"
10 |             >
11 |             <span class="ToggleSlider"></span>
12 |         </label>
13 |         <span class="ToggleLabel">{{ $label }}</span>
14 |         <input type="hidden" name="{{ $name }}" value="{{ $offValue }}" disabled>
15 |     </div>
16 |     <style>
17 |         .ToggleMetabox {
18 |             display: flex;
19 |             align-items: center;
20 |             gap: 10px;
21 |             margin: 15px 0;
22 |         }
23 | 
24 |         .ToggleSwitch {
25 |             position: relative;
26 |             display: inline-block;
27 |             width: 50px;
28 |             height: 24px;
29 |         }
30 | 
31 |         .ToggleInput {
32 |             opacity: 0;
33 |             width: 0;
34 |             height: 0;
35 |         }
36 | 
37 |         .ToggleSlider {
38 |             position: absolute;
39 |             cursor: pointer;
40 |             top: 0;
41 |             left: 0;
42 |             right: 0;
43 |             bottom: 0;
44 |             background-color: #ccc;
45 |             transition: .4s;
46 |             border-radius: 24px;
47 |         }
48 | 
49 |         .ToggleSlider:before {
50 |             position: absolute;
51 |             content: "";
52 |             height: 16px;
53 |             width: 16px;
54 |             left: 4px;
55 |             bottom: 4px;
56 |             background-color: white;
57 |             transition: .4s;
58 |             border-radius: 50%;
59 |         }
60 | 
61 |         .ToggleInput:checked + .ToggleSlider {
62 |             background-color: #2196F3;
63 |         }
64 | 
65 |         .ToggleInput:checked + .ToggleSlider:before {
66 |             transform: translateX(26px);
67 |         }
68 | 
69 |         .ToggleLabel {
70 |             font-weight: 500;
71 |             color: #333;
72 |         }
73 |     </style>
74 |     <script>
75 |         document.addEventListener('DOMContentLoaded', function() {
76 |             document.querySelectorAll('.ToggleInput').forEach(toggle => {
77 |                 toggle.addEventListener('change', function() {
78 |                     const hiddenInput = this.closest('.ToggleMetabox')
79 |                         .querySelector('input[type="hidden"]');
80 |                     hiddenInput.disabled = this.checked;
81 |                 });
82 |             });
83 |         });
84 |     </script>
85 | </div>
86 | 


--------------------------------------------------------------------------------
/src/ServiceProvider/MetaboxServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\ServiceProvider;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | use Rayiumir\LaravelMetabox\Metabox;
 7 | 
 8 | class MetaboxServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * Register any application services.
12 |      *
13 |      * @return void
14 |      */
15 |     public function register(): void
16 |     {
17 |         $this->app->bind('Metabox', function() {
18 |             return new Metabox();
19 |         });
20 |     }
21 |     /**
22 |      * Bootstrap any package services.
23 |      *
24 |      * @return void
25 |      */
26 |     public function boot(): void
27 |     {
28 |         $this->_loadMigrations();
29 |         $this->_loadPublished();
30 |     }
31 | 
32 |     private function _loadMigrations(): void
33 |     {
34 |         $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
35 |     }
36 | 
37 |     private function _loadPublished(): void
38 |     {
39 |         $this->publishes([
40 |             __DIR__.'/../Traits' => app_path('Traits/')
41 |         ],'LaravelMetaboxTrait');
42 | 
43 |         $this->publishes([
44 |             __DIR__.'/../Models' => app_path('Models/')
45 |         ],'LaravelMetaboxModel');
46 | 
47 |         $this->publishes([
48 |             __DIR__.'/../View/Components' => app_path('View/Components')
49 |         ], 'LaravelMetaboxViewComponents');
50 | 
51 |         $this->publishes([
52 |             __DIR__.'/../Database/migrations' => database_path('migrations')
53 |         ], 'LaravelMetaboxMigration');
54 | 
55 |         $this->publishes([
56 |             __DIR__.'/../Database/factories' => database_path('factories')
57 |         ], 'LaravelMetaboxFactory');
58 | 
59 |         $this->publishes([
60 |             __DIR__.'/../Resources/Views/components' => resource_path('Resources/views/components')
61 |         ], 'LaravelMetaboxResourceViewComponents');
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/Traits/HasMetaboxes.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\Traits;
 4 | 
 5 | use Illuminate\Support\Facades\Storage;
 6 | use Rayiumir\LaravelMetabox\Models\Metabox;
 7 | 
 8 | trait HasMetaboxes
 9 | {
10 |     public function metaboxes()
11 |     {
12 |         return $this->morphMany(Metabox::class, 'model');
13 |     }
14 | 
15 |     public function addMetabox($key, $value)
16 |     {
17 |         return $this->metaboxes()->updateOrCreate(
18 |             ['key' => $key],
19 |             ['value' => $value]
20 |         );
21 |     }
22 | 
23 |     public function getMetabox($key)
24 |     {
25 |         $metabox = $this->metaboxes()->where('key', $key)->first();
26 |         return $metabox ? $metabox->value : null;
27 |     }
28 | 
29 |     public function uploadImageMetabox($key, $file)
30 |     {
31 |         $oldImage = $this->getMetabox($key);
32 |         if ($oldImage) {
33 |             Storage::disk('public')->delete($oldImage);
34 |         }
35 | 
36 |         $imagePath = $file->store('uploads', 'public');
37 | 
38 |         $this->addMetabox($key, $imagePath);
39 | 
40 |         return $imagePath;
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/View/Components/CheckboxMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class CheckboxMetabox extends Component
10 | {
11 |     public $name;
12 |     public $label;
13 |     public $checked;
14 |     public $value;
15 |     /**
16 |      * Create a new component instance.
17 |      */
18 |     public function __construct($name, $label, $checked = false, $value = '1')
19 |     {
20 |         $this->name = $name;
21 |         $this->label = $label;
22 |         $this->checked = $checked;
23 |         $this->value = $value;
24 |     }
25 | 
26 |     /**
27 |      * Get the view / contents that represent the component.
28 |      */
29 |     public function render(): View|Closure|string
30 |     {
31 |         return view('components.CheckboxMetabox');
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/View/Components/GalleryMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\Support\Facades\Storage;
 8 | use Illuminate\View\Component;
 9 | 
10 | class GalleryMetabox extends Component
11 | {
12 |     public $name;
13 |     public $images;
14 |     public $limit;
15 |     /**
16 |      * Create a new component instance.
17 |      */
18 |     public function __construct($name, $images = [], $limit = 0)
19 |     {
20 |         $this->name = $name;
21 |         $this->images = is_string($images) ? json_decode($images, true) ?? [] : $images;
22 |         $this->limit = $limit;
23 |     }
24 | 
25 |     public function imageExists($path)
26 |     {
27 |         return Storage::disk('public')->exists($path);
28 |     }
29 |     /**
30 |      * Get the view / contents that represent the component.
31 |      */
32 |     public function render(): View|Closure|string
33 |     {
34 |         return view('components.GalleryMetabox', [
35 |             'images' => array_filter($this->images, function($path) {
36 |                 return $this->imageExists($path);
37 |             })
38 |         ]);
39 |     }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/View/Components/ImageUploadMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class ImageUploadMetabox extends Component
10 | {
11 |     public $name;
12 |     public $value;
13 |     /**
14 |      * Create a new component instance.
15 |      */
16 |     public function __construct($name, $value = null)
17 |     {
18 |         $this->name = $name;
19 |         $this->value = $value;
20 |     }
21 | 
22 |     /**
23 |      * Get the view / contents that represent the component.
24 |      */
25 |     public function render(): View|Closure|string
26 |     {
27 |         return view('components.ImageUploadMetabox');
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/View/Components/RadioMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class RadioMetabox extends Component
10 | {
11 |     public $name;
12 |     public $options;
13 |     public $selected;
14 |     public $orientation;
15 |     /**
16 |      * Create a new component instance.
17 |      */
18 |     public function __construct($name, $options, $selected = null, $orientation = 'vertical')
19 |     {
20 |         $this->name = $name;
21 |         $this->options = $options;
22 |         $this->selected = $selected;
23 |         $this->orientation = $orientation;
24 |     }
25 | 
26 |     /**
27 |      * Get the view / contents that represent the component.
28 |      */
29 |     public function render(): View|Closure|string
30 |     {
31 |         return view('components.RadioMetabox');
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/View/Components/SelectMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class SelectMetabox extends Component
10 | {
11 |     public $name;
12 |     public $options;
13 |     public $selected;
14 |     /**
15 |      * Create a new component instance.
16 |      */
17 |     public function __construct($name, $options, $selected = null)
18 |     {
19 |         $this->name = $name;
20 |         $this->options = $options;
21 |         $this->selected = $selected;
22 | 
23 |     }
24 | 
25 |     /**
26 |      * Get the view / contents that represent the component.
27 |      */
28 |     public function render(): View|Closure|string
29 |     {
30 |         return view('components.SelectMetabox');
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/View/Components/TabMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class TabMetabox extends Component
10 | {
11 |     public $tabs;
12 |     public $activeTab;
13 |     public $tabPrefix;
14 |     /**
15 |      * Create a new component instance.
16 |      */
17 |     public function __construct($tabs, $activeTab = null, $tabPrefix = 'tab-')
18 |     {
19 |         $this->tabs = $tabs;
20 |         $this->activeTab = $activeTab ?? array_key_first($tabs);
21 |         $this->tabPrefix = $tabPrefix;
22 |     }
23 | 
24 |     /**
25 |      * Get the view / contents that represent the component.
26 |      */
27 |     public function render(): View|Closure|string
28 |     {
29 |         return view('components.TabMetabox');
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/View/Components/ToggleMetabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Rayiumir\LaravelMetabox\View\Components;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Contracts\View\View;
 7 | use Illuminate\View\Component;
 8 | 
 9 | class ToggleMetabox extends Component
10 | {
11 |     public $name;
12 |     public $label;
13 |     public $checked;
14 |     public $onValue;
15 |     public $offValue;
16 | 
17 |     /**
18 |      * Create a new component instance.
19 |      */
20 |     public function __construct($name, $label, $checked = false, $onValue = '1', $offValue = '0')
21 |     {
22 |         $this->name = $name;
23 |         $this->label = $label;
24 |         $this->checked = $checked;
25 |         $this->onValue = $onValue;
26 |         $this->offValue = $offValue;
27 |     }
28 |     /**
29 |      * Get the view / contents that represent the component.
30 |      */
31 |     public function render(): View|Closure|string
32 |     {
33 |         return view('components.ToggleMetabox');
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/tests/Feature/MetaboxTest.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use App\Models\Post;
 4 | use Illuminate\Foundation\Testing\RefreshDatabase;
 5 | use Tests\TestCase;
 6 | 
 7 | class MetaboxTest extends TestCase
 8 | {
 9 |     use RefreshDatabase;
10 | 
11 |     public function test_post_deletion()
12 |     {
13 |         $post = Post::factory()->create();
14 |         $post->addMetabox('metabox_field', 'Test Value');
15 | 
16 |         $this->assertDatabaseHas('posts', ['id' => $post->id]);
17 |         $this->assertDatabaseHas('metaboxes', [
18 |             'model_type' => Post::class,
19 |             'model_id' => $post->id,
20 |             'key' => 'metabox_field',
21 |             'value' => 'Test Value',
22 |         ]);
23 | 
24 |         $post->delete();
25 | 
26 |         $this->assertDatabaseMissing('posts', ['id' => $post->id]);
27 |         $this->assertDatabaseMissing('metaboxes', [
28 |             'model_type' => Post::class,
29 |             'model_id' => $post->id,
30 |             'key' => 'metabox_field',
31 |             'value' => 'Test Value',
32 |         ]);
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------