FyneJS Directives

<div x-data="{ status: 'loading' }">
  <div x-if="status === 'loading'">Loading...</div>
  <div x-else-if="status === 'error'">Error occurred!</div>
  <div x-else>Content loaded successfully</div>
</div>

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
  <ul>
    <!-- Basic array loop with index -->
    <li x-for="(item, index) in items" :key="index">
      <span x-text="`${index + 1}. ${item}`"></span>
    </li>
  </ul>
</div>

<!-- Numeric range: iterate n times -->
<div x-data>
  <template x-for="star in 5">
    <span>⭐</span>  <!-- Renders 5 stars -->
  </template>
</div>

<!-- Object iteration: (value, key, index) -->
<div x-data="{ user: { name: 'Alice', role: 'Admin', status: 'Active' } }">
  <template x-for="(value, key, index) in user">
    <p><strong x-text="key"></strong>: <span x-text="value"></span></p>
  </template>
</div>

<!-- Advanced: Using x-key for stable diffing with objects -->
<div x-data="{ 
  users: [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' }
  ]
}">
  <template x-for="user in users" x-key="user.id">
    <div class="user-card">
      <h3 x-text="user.name"></h3>
      <p x-text="user.email"></p>
    </div>
  </template>
</div>

<div x-data="{ name: '', email: '', agree: false }">
  <input x-model="name" placeholder="Your name">
  <input x-model="email" type="email" placeholder="Your email">
  <label><input x-model="agree" type="checkbox"> I agree</label>
  
  <p>Name: <span x-text="name"></span></p>
</div>

<div x-data="{ time: '' }" 
     x-init="time = new Date().toLocaleTimeString()">
  <p>Page loaded at: <span x-text="time"></span></p>
</div>

<div x-data="{ visible: false, count: 0 }">
  <!-- Trigger when entering viewport -->
  <div x-intersect:enter="visible = true; console.log('Element entered!')"
       class="h-64 bg-blue-100 flex items-center justify-center">
    <span x-text="visible ? 'I am visible!' : 'Scroll to see me'"></span>
  </div>
  
  <!-- Trigger when leaving viewport -->
  <div x-intersect:leave="console.log('Element left viewport')"
       class="h-32 bg-red-100">
    Scroll past me!
  </div>
  
  <!-- With modifiers -->
  <div x-intersect:enter.once.rootMargin-100px="count++"
       class="h-48 bg-green-100">
    <p>Triggered <span x-text="count"></span> times</p>
    <p>(Only once, with 100px margin)</p>
  </div>
</div>

<div x-data="{ focusInput() { $refs.myInput.focus(); } }">
  <input x-ref="myInput" type="text" placeholder="Click button to focus me">
  <button x-on:click="focusInput()">Focus Input</button>
  
  <!-- Access ref in expressions -->
  <p x-text="$refs.myInput?.value || 'Empty'"></p>
</div>