تتبع الحالة المتغيرة في Livewire v4

<form wire:submit="save">
    <input wire:model="name" placeholder="الاسم">
    <input wire:model="email" placeholder="البريد">
    
    <!-- إظهار رسالة عند تغيير أي حقل -->
    <div wire:dirty class="text-yellow-600 text-sm">
        لديك تغييرات غير محفوظة
    </div>
    
    <!-- تغيير نمط الزر عند التغيير -->
    <button 
        type="submit"
        wire:dirty.class="bg-yellow-500 animate-pulse"
        wire:dirty.class.remove="bg-gray-300"
    >
        حفظ التغييرات
    </button>
</form>

<div>
    <label>اسم المستخدم</label>
    <input wire:model="username">
    <span wire:dirty.target="username" class="text-orange-500">
        تم تعديل اسم المستخدم
    </span>
</div>

<div>
    <label>السيرة الذاتية</label>
    <textarea wire:model="bio"></textarea>
    <span wire:dirty.target="bio" class="text-orange-500">
        تم تعديل السيرة
    </span>
</div>

<div 
    x-data="{ dirty: false }"
    x-on:livewire-dirty.window="dirty = true"
    x-on:beforeunload.window="if(dirty) return 'لديك تغييرات غير محفوظة'"
>
    <form wire:submit="save">
        <input wire:model="title" x-on:input="dirty = true">
        <button x-on:click="dirty = false">حفظ</button>
    </form>
</div>