Form koruması
Kaydedilmemiş değişiklik koruması olan form. dirty-check açıkken alanlar değiştiyse sayfadan ayrılmak onay ister: tarayıcı çıkışlarında tarayıcının kendi uyarısı, wire:navigate geçişlerinde acun:form-guard-dialog penceresi.
Temel kullanım
acun:form normal bir <form> çizer; dirty-check korumayı açar. Koruma, alanların şimdiki değerlerini sayfa açıldığındaki değerlerle karşılaştırır: bir alanı değiştirip eski değerine döndürürseniz form yeniden "temiz" sayılır. Aşağıdaki durum satırı bu karşılaştırmanın sonucunu (AcunUI.pro.formGuard.dirty) gösterir. Eski ad window.formDirty de aynı değeri verir.
<acun:form dirty-check class="space-y-4"
x-data="{ degisti: false }"
x-on:input="setTimeout(() => degisti = AcunUI.pro.formGuard.dirty)"
x-on:change="setTimeout(() => degisti = AcunUI.pro.formGuard.dirty)">
<acun:input name="musteri_adi" label="Müşteri adı" value="Ayşe Yılmaz" />
<acun:checkbox name="aktif" label="Aktif müşteri" checked />
<p class="text-sm text-gray-500 dark:text-zinc-400" x-text="degisti ? 'Kaydedilmemiş değişiklik var' : 'Değişiklik yok'"></p>
</acun:form>| Prop | Değerler |
|---|---|
dirty-check | true | false |
Livewire formu
Livewire formlarında wire:submit gibi öznitelikler doğrudan forma geçer. Livewire güncellemesiyle sonradan eklenen korumalı formlar da kendiliğinden izlenmeye başlar.
<acun:form wire:submit="kaydet" dirty-check class="space-y-4">
<acun:input wire:model="musteri_adi" label="Müşteri adı" />
<acun:select wire:model="ilce_id" label="İlçe" :options="$ilceler" />
<acun:button type="submit">Kaydet</acun:button>
</acun:form>Kayıttan sonra
Kayıt başarıyla bittiğinde ya da forma başka bir kayıt yüklendiğinde form-saved olayını gönderin; formların o anki değerleri yeni başlangıç kabul edilir. acun:modal kapanırken yalnızca kendi içindeki formlar kendiliğinden sıfırlanır.
public function kaydet(): void
{
$this->validate();
$this->musteri->update($this->only(['musteri_adi', 'ilce_id']));
$this->dispatch('form-saved');
}| Prop | Değerler |
|---|---|
form-saved | Olay; tüm korumalı formları temiz kabul eder |
acun:modal:closed | Olay; acun:modal kapanınca gönderir (eski adı modal-closed da gönderilir), içindeki formları sıfırlar |
İşlem çubuğu
acun:form-actions (PRO) forma konunca kendini içindeki forma bağlar; ek nitelik gerekmez. Kaydet yalnızca bir alan değişince, Önceki/Sonraki/Ekle/Sil yalnızca kayıtlı ve temiz bir kayıtta açılır. Vazgeç formu son temiz değerlerine döndürür (wire:model değerleri, seçim kutusu ve etiket girişi dahil); cancel="vazgec" verilirse bunun yerine o Livewire metodu çağrılır ve dönen değerler yeni temiz durum sayılır. sticky uzun formlarda çubuğu ekranın altında tutar; formun sonunda yer kapladığı için yapıştığında sayfada hiçbir şey kaymaz. Forma id verirseniz InteractsWithFormModal olayları (formRecordLoaded('urun-formu'), formSaved('urun-formu')) çubuğun durumunu günceller ve korumanın başlangıç değerlerini de yeniler.
<acun:form id="urun-formu" wire:submit="kaydet" dirty-check class="space-y-6">
<acun:input wire:model="ad" label="Ürün adı" required />
<acun:combobox wire:model="etiketler" label="Etiketler" multiple :options="$etiketListesi" />
<acun:form-actions sticky cancel="vazgec">
<p class="text-xs text-gray-500 dark:text-zinc-400">{{ $ad }}</p>
</acun:form-actions>
</acun:form>| Prop | Değerler |
|---|---|
sticky | Ekranın altında kalan çubuk |
cancel | true: son temiz değerler · "vazgec": Livewire metodu |
slot | Çubuğun başındaki durum satırı |
Neler sayılır
Karşılaştırmaya formdaki alanlar girer; data-dirty-ignore taşıyan alanlar (ya da bu niteliği taşıyan bir kapsayıcının içindekiler) sayılmaz. Gerçek bir form alanı olmayan bileşenler (acun:combobox, acun:tag-input, acun:rating, acun:input-otp) wire:model ile bağlandığında değeri özelliğin adıyla gizli alanlarda tutar ve kullanıcı değiştirince change olayı yayınlar; arama ve yazı kutuları ile kod kutuları sayılmaz.
<acun:form wire:submit="kaydet" dirty-check>
<acun:tag-input wire:model="anahtarKelimeler" label="Anahtar kelimeler" />
<input type="search" placeholder="Listede ara" data-dirty-ignore>
</acun:form>| Prop | Değerler |
|---|---|
data-dirty-ignore | Alan ya da kapsayıcı; değişikliği sayılmaz |
Onay penceresi
Değişiklik varken wire:navigate ile başka bir sayfaya geçilmek istenirse geçiş durdurulur ve acun:form-guard-dialog açılır; "Devam Et" geçişi tamamlar. acun:layout.sidebar ve acun:layout.horizontal bu pencereyi zaten içerir; kendi düzeninizde bir kez ekleyin. Yenileme, sekme kapatma gibi tarayıcı çıkışlarında tarayıcının kendi uyarısı çıkar. Bu örnekte pencere düğmeyle açılıyor.
<acun:button variant="white" x-data x-on:click="$dispatch('form-guard-confirm', { url: null })">Pencereyi göster</acun:button>
<acun:form-guard-dialog />Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
form: dirty-check | false | Kaydedilmemiş değişiklik korumasını açar (data-dirty-check) |
form-actions: sticky | false | PRO: çubuk ekranın altında kalır (yer kaydırmadan) |
form-actions: cancel | true | PRO: Vazgeç son temiz değerlere döner; metot adı verilirse o Livewire metodu çağrılır |
form-guard-dialog | — | Prop almaz; düzene bir kez eklenir (hazır düzenlerde ekli) |