README

Modern ve responsive modal component'i. Alpine.js ile çalışır.

✅ Kurulum

1. Paketi Yükle

composer require sslah/modal

2. Paketi Kur

php artisan modal:install

3. Alpine.js Kurulumu (ÖNEMLİ!)

Modal paketi Alpine.js gerektiriyor. İki yöntemle kurabilirsiniz:

Yöntem 1: CDN (Önerilen)

<!-- layout.blade.php head'e ekle -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- x-cloak CSS'i ekle -->
<style>
    [x-cloak] { display: none !important; }
</style>

Yöntem 2: NPM

npm install alpinejs

// resources/js/app.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

🎯 Kullanım

Basit Modal

<!-- Modal Butonu -->
<button x-data="" x-on:click="$dispatch('open-modal', 'my-modal')">
    Modalı Aç
</button>

<!-- Modal -->
<x-modal name="my-modal" focusable>
    <div class="p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Başlık</h2>
        <p class="text-gray-600 mb-4">Modal içeriği</p>
        
        <div class="flex justify-end">
            <button x-on:click="$dispatch('close-modal', 'my-modal')"
                    class="px-4 py-2 bg-gray-500 text-white rounded-md">
                Kapat
            </button>
        </div>
    </div>
</x-modal>

Onay Modal'ı

<x-modal name="confirm-delete" focusable>
    <div class="p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Silme Onayı</h2>
        <p class="text-gray-600 mb-4">Bu işlem geri alınamaz!</p>
        
        <div class="flex justify-end space-x-2">
            <button x-on:click="$dispatch('close-modal', 'confirm-delete')"
                    class="px-4 py-2 bg-gray-500 text-white rounded-md">
                İptal
            </button>
            <button x-on:click="$dispatch('close-modal', 'confirm-delete'); deleteItem()"
                    class="px-4 py-2 bg-red-500 text-white rounded-md">
                Sil
            </button>
        </div>
    </div>
</x-modal>

⚙️ Özellikler

Modal Seçenekleri

<x-modal 
    name="my-modal"           <!-- Gerekli: Modal adı -->
    size="lg"                 <!-- Boyut: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl -->
    focusable                 <!-- Focusable özelliği -->
    title="Modal Başlığı"     <!-- Başlık -->
>
    <!-- Modal içeriği -->
</x-modal>

Keyboard Shortcuts

ESC - Modal'ı kapat
Tab - Modal içinde navigasyon

Modal Açma/Kapama

// Modal aç
$dispatch('open-modal', 'modal-name')

// Modal kapat
$dispatch('close-modal', 'modal-name')

🔧 Konfigürasyon

// config/modal.php
return [
    'default_size' => 'md',
    'sizes' => [
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        // ...
    ],
    'backdrop' => [
        'closable' => true,
        'class' => 'bg-gray-500 bg-opacity-75',
    ],
];

🚨 Troubleshooting

Modal Açılmıyor

Sorun: Modal butonu çalışmıyor. Çözüm: Alpine.js yüklü olduğundan emin olun.

Modal Açılıp Kayboluyor

Sorun: Modal açılır ama içerik görünmez, sadece gri arkaplan kalır. Çözüm: x-cloak CSS'i ekleyin:

<style>
    [x-cloak] { display: none !important; }
</style>

Console Hataları

Sorun: Alpine.js hataları. Çözüm: Alpine.js'in CDN'den yüklendikten sonra:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Modal Backdrop Tıklanmıyor

Sorun: Backdrop'a tıklayınca modal kapanmıyor. Çözüm: Config'te backdrop.closable true olmalı:

'backdrop' => [
    'closable' => true,
],

📝 Örnekler

Alert Modal

<x-modal name="alert-modal" focusable>
    <div class="p-6">
        <div class="flex items-center mb-4">
            <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-lg font-medium text-gray-900">Dikkat!</h3>
            </div>
        </div>
        <p class="text-gray-600 mb-4">Bu önemli bir uyarı mesajıdır.</p>
        <div class="flex justify-end">
            <button x-on:click="$dispatch('close-modal', 'alert-modal')"
                    class="px-4 py-2 bg-yellow-500 text-white rounded-md">
                Anladım
            </button>
        </div>
    </div>
</x-modal>

🎨 Styling

Modal'lar Tailwind CSS kullanıyor. Özel stil vermek için:

<x-modal name="custom-modal" class="custom-modal">
    <!-- Custom styled modal -->
</x-modal>

📄 Lisans

MIT License

🤝 Katkıda Bulunma

Fork yapın
Feature branch oluşturun
Değişikliklerinizi commit edin
Pull request gönderin

🔗 Bağlantılar

GitHub: https://github.com/ahmetsuslu/modal-package
Packagist: https://packagist.org/packages/sslah/modal

sslah / modal

Maintainers

Details