Alpine.js HTML

<!-- تحميل Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- عداد بسيط -->
<div x-data="{ count: 0 }">
  <button @click="count++">Increment</button>
  <span x-text="count"></span>
</div>

<!-- قائمة منسدلة (Dropdown) -->
<div x-data="{ open: false }" @click.outside="open = false">
  <button @click="open = !open">القائمة</button>
  <ul x-show="open" x-transition>
    <li x-for="item in ['عنّا', 'خدمات', 'اتصل']" :key="item">
      <a href="#" x-text="item"></a>
    </li>
  </ul>
</div>

<!-- نافذة منبثقة (Modal) -->
<div x-data="{ show: false }">
  <button @click="show = true">فتح النافذة</button>

  <div x-show="show" x-transition.opacity>
    <div class="modal">
      <h2>عنوان</h2>
      <p>محتوى النافذة</p>
      <button @click="show = false">إغلاق</button>
    </div>
  </div>
</div>

<!-- تبويبات (Tabs) -->
<div x-data="{ tab: 'home' }">
  <nav>
    <button :class="{ 'active': tab === 'home' }" @click="tab = 'home'">الرئيسية</button>
    <button :class="{ 'active': tab === 'about' }" @click="tab = 'about'">عنّا</button>
  </nav>

  <div x-show="tab === 'home'">محتوى الرئيسية</div>
  <div x-show="tab === 'about'">محتوى عنّا</div>
</div>

<!-- نموذج مع تحقق -->
<form x-data="{ name: '', email: '', submitted: false }" @submit.prevent="submitted = true">
  <input x-model="name" placeholder="الاسم" required>
  <input x-model="email" type="email" placeholder="البريد" required>
  <button type="submit" :disabled="!name || !email">إرسال</button>

  <div x-show="submitted">
    <p>مرحباً <span x-text="name"></span>!</p>
  </div>
</form>

<!-- Stores مشتركة -->
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('cart', {
      items: [],
      add(item) { this.items.push(item) },
      remove(id) { this.items = this.items.filter(i => i.id !== id) },
      get total() { return this.items.reduce((sum, i) => sum + i.price, 0) }
    });
  });
</script>

<div x-data>
  <button @click="$store.cart.add({id: 1, name: 'منتج', price: 100})">
    أضف إلى السلة
  </button>
  <p>الإجمالي: <span x-text="$store.cart.total"></span></p>
</div>

<!-- Directives الرئيسية: -->
<!-- x-data ← تعريف component مع state -->
<!-- x-bind / : ← ربط attribute -->
<!-- x-on / @ ← الاستماع لأحداث -->
<!-- x-model ← two-way binding -->
<!-- x-show ← إظهار/إخفاء -->
<!-- x-if ← شرط (يحتاج template) -->
<!-- x-for ← تكرار (يحتاج template) -->
<!-- x-transition ← رسوم متحركة -->
<!-- x-init ← تهيئة -->

<!-- Magic Properties: -->
<!-- $el ← العنصر الحالي -->
<!-- $refs ← العناصر المرجعية -->
<!-- $store ←stores المشتركة -->
<!-- $dispatch ← إطلاق أحداث -->
<!-- $nextTick ← الانتظار للتالي -->
<!-- $watch ← مراقبة تغييرات -->