المكونات

// Create a simple, functional فيو جي إس (Vue.js) example demonstrating المكونات
// This example is built for Vue 3 with <script setup> and runs in a Vite project
// Focus: syntax, data structures, reactive state, props, emits, lifecycle cleanup

// File: src/components/TodoItem.vue <template>

<li class="todo-item">
<input type="checkbox" :checked="todo.completed" @change="toggle" />
<span :class="{ done: todo.completed }">{{ todo.title }}</span>
<button @click="remove">حذف</button>
</li>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
todo: { type: Object, required: true } // { id, title, completed }
})
const emit = defineEmits(['toggle', 'remove'])

function toggle() {
emit('toggle', props.todo.id)
}
function remove() {
emit('remove', props.todo.id)
}
</script>

<style scoped>
.todo-item { display:flex; gap:8px; align-items:center; }
.done { text-decoration: line-through; color: #888; }
</style>

// File: src/App.vue <template>

<main>
<h1>قائمة المهام</h1>
<form @submit.prevent="addTodo">
<input v-model="newTitle" placeholder="أضف مهمة" />
<button type="submit">إضافة</button>
</form>

<ul>
<TodoItem
v-for="t in todos"
:key="t.id"
:todo="t"
@toggle="onToggle"
@remove="onRemove"
/>
</ul>

</main>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import TodoItem from './components/TodoItem.vue'

// بيانات تفاعلية باستخدام هياكل مناسبة
const todos = ref([
{ id: 1, title: 'تعلم المكونات', completed: false },
{ id: 2, title: 'كتابة اختبار', completed: false }
])

const newTitle = ref('')

// وظائف آمنة وخالية من تسريبات الذاكرة
function addTodo() {
const title = newTitle.value && newTitle.value.trim()
if (!title) return
const id = Date.now()
todos.value.push({ id, title, completed: false })
newTitle.value = ''
}

function onToggle(id) {
const item = todos.value.find(t => t.id === id)
if (item) item.completed = !item.completed
}

function onRemove(id) {
const idx = todos.value.findIndex(t => t.id === id)
if (idx !== -1) todos.value.splice(idx, 1)
}
</script>

<style>
main { max-width:640px; margin:1rem auto; font-family:system-ui; }
form { display:flex; gap:8px; margin-bottom:12px; }
</style>

// More advanced فيو جي إس (Vue.js) example building on the previous one
// Real-world: قائمة مهام متزامنة مع API مزيف، يستخدم composable لإدارة الطلبات، OOP model، وملفات مكوّنات متعددة.
// Shows algorithms (debounce, memoization), OOP (class TodoModel), provide/inject, and cleanup via AbortController.

// File: src/models/TodoModel.js
export default class TodoModel {
constructor({ id, title, completed = false }) {
this.id = id
this.title = title
this.completed = completed
}
toggle() { this.completed = !this.completed }
toJSON() { return { id: this.id, title: this.title, completed: this.completed } }
}

// File: src/composables/useTodos.js
import { ref } from 'vue'

export function useTodos() {
const todos = ref([])
let controller = null

async function fetchTodos(signal) {
// simulated fetch - replace with real fetch in production
await new Promise(r => setTimeout(r, 300))
todos.value = [
{ id: 1, title: 'مهمة من الخادم', completed: false }
]
}

async function load() {
if (controller) controller.abort()
controller = new AbortController()
try {
await fetchTodos(controller.signal)
} catch (err) {
if (err.name === 'AbortError') return
console.error('خطأ في جلب البيانات', err)
}
}

function add(title) {
const id = Date.now()
todos.value.push({ id, title, completed: false })
}

function remove(id) {
todos.value = todos.value.filter(t => t.id !== id)
}

function toggle(id) {
const t = todos.value.find(x => x.id === id)
if (t) t.completed = !t.completed
}

function cleanup() {
if (controller) controller.abort()
}

return { todos, load, add, remove, toggle, cleanup }
}

// File: src/AppAdvanced.vue <template>

<section>
<h2>قائمة متقدمة</h2>
<input v-model="q" @input="onSearch" placeholder="بحث (debounced)" />
<button @click="load">إعادة تحميل</button>
<ul>
<li v-for="t in filtered" :key="t.id">
<span>{{ t.title }}</span>
<button @click="toggle(t.id)">تبديل</button>
</li>
</ul>
</section>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useTodos } from './composables/useTodos'

const { todos, load, toggle, cleanup } = useTodos()
onMounted(load)
onBeforeUnmount(cleanup)

// simple debounce implementation
let timer = null
const q = ref('')
function onSearch() {
if (timer) clearTimeout(timer)
timer = setTimeout(() => { /* could call server search */ }, 300)
}

const filtered = computed(() => {
const term = q.value.trim().toLowerCase()
if (!term) return todos.value
return todos.value.filter(t => t.title.toLowerCase().includes(term))
})
</script>

<style scoped>
section { padding:1rem; border:1px solid #eee; border-radius:8px; }
</style>