Merge pull request vuejs#73 from boussadjra/feat/custom-directives

translate custom directives

Author: Abdelaziz18003

glossary.md

@@ -72,3 +72,6 @@
 | url                   |                 عنوان محدد الموارد |
 | mixin                 |                              مخلوط |
 | renderless            |                        عديمة تصيير |
+| argument              |                               وسيط |
+| parameter             |                              معامل |
+| suspense              |                               تعليق |

src/guide/built-ins/keep-alive-demos/CompA.vue

@@ -3,7 +3,7 @@ let count = $ref(0)
 </script>
 
 <template>
-  <p>Current component: A</p>
-  <span style="margin-right: 20px">count: {{ count }}</span>
+  <p>المكون الحالي: A</p>
+  <span style="margin-right: 20px">العداد: {{ count }}</span>
   <button @click="count++">+</button>
 </template>

src/guide/built-ins/keep-alive-demos/CompB.vue

@@ -3,7 +3,7 @@ let msg = $ref('')
 </script>
 
 <template>
-  <p>Current component: B</p>
-  <span style="margin-right: 20px">Message is: {{ msg }}</span>
+  <p>المكون الحالي: B</p>
+  <span style="margin-right: 20px">الرسالة: {{ msg }}</span>
   <input v-model="msg">
 </template>

src/guide/built-ins/keep-alive.md

@@ -2,143 +2,143 @@
 import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 </script>
 
-# KeepAlive {#keepalive}
+# مكون KeepAlive {#keepalive}
 
-`<KeepAlive>` is a built-in component that allows us to conditionally cache component instances when dynamically switching between multiple components.
+`<KeepAlive>` هو مكون مدمج يسمح لنا بتخزين مؤقت لنسخ المكونات عند التبديل بين مكونات متعددة بشكل ديناميكي.
 
-## Basic Usage {#basic-usage}
+## استعمال أساسي {#basic-usage}
 
-In the Component Basics chapter, we introduced the syntax for [Dynamic Components](/guide/essentials/component-basics.html#dynamic-components), using the `<component>` special element:
+في فصل أساسيات المكونات ، أدرجنا صيغة [المكونات الديناميكية](/guide/essentials/component-basics.html#dynamic-components) باستخدام عنصر `<component>` الخاص:
 
 ```vue-html
 <component :is="activeComponent" />
 ```
 
-By default, an active component instance will be unmounted when switching away from it. This will cause any changed state it holds to be lost. When this component is displayed again, a new instance will be created with only the initial state.
+افتراضيا، ستُفصل نسخة المكون النشط عند التبديل عنه. سيؤدي ذلك إلى فقدان أي حالة غُيِّرت عند عرض هذا المكون مرة أخرى، ستنشأ نسخة جديدة من المكون مع حالته الأولية فقط.
 
-In the example below, we have two stateful components - A contains a counter, while B contains a message synced with an input via `v-model`. Try updating the state of one of them, switch away, and then switch back to it:
+في المثال أدناه، لدينا مكونين ذوي حالة - يحتوي المكون A على عداد، بينما يحتوي B على رسالة متزامنة مع إدخال عبر `v-model`. حاول تحديث حالة أحدهما، والتبديل عنه، ثم الرجوع مرة أخرى إليه:
 
 <SwitchComponent />
 
-You'll notice that when switched back, the previous changed state would have been reset.
+ستلاحظ أنه عند الرجوع إليه، سيُعاد تعيين الحالة السابقة التي غُيِّرت.
 
-Creating fresh component instance on switch is normally useful behavior, but in this case, we'd really like the two component instances to be preserved even when they are inactive. To solve this problem, we can wrap our dynamic component with the `<KeepAlive>` built-in component:
+إن إنشاء نسخة جديدة من المكون عند التبديل هو سلوك مفيد عادة، لكن في هذه الحالة، نود حقا أن يحتفظ بنسختين من المكون حتى عندما تكونا غير نشطتين. لحل هذه المشكلة، يمكننا تغليف المكون الديناميكي بمكون `<KeepAlive>` المدمج:
 
 ```vue-html
-<!-- Inactive components will be cached! -->
+<!-- المكونات غير النشطة ستُخزن مؤقتا! -->
 <KeepAlive>
   <component :is="activeComponent" />
 </KeepAlive>
 ```
 
-Now, the state will be persisted across component switches:
+الآن، سيحتفظ بالحالة عبر التبديل بين المكونات:
 
 <SwitchComponent use-KeepAlive />
 
 <div class="composition-api">
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHNoYWxsb3dSZWYgfSBmcm9tICd2dWUnXG5pbXBvcnQgQ29tcEEgZnJvbSAnLi9Db21wQS52dWUnXG5pbXBvcnQgQ29tcEIgZnJvbSAnLi9Db21wQi52dWUnXG5cbmNvbnN0IGN1cnJlbnQgPSBzaGFsbG93UmVmKENvbXBBKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImRlbW9cIj5cbiAgICA8bGFiZWw+PGlucHV0IHR5cGU9XCJyYWRpb1wiIHYtbW9kZWw9XCJjdXJyZW50XCIgOnZhbHVlPVwiQ29tcEFcIiAvPiBBPC9sYWJlbD5cbiAgICA8bGFiZWw+PGlucHV0IHR5cGU9XCJyYWRpb1wiIHYtbW9kZWw9XCJjdXJyZW50XCIgOnZhbHVlPVwiQ29tcEJcIiAvPiBCPC9sYWJlbD5cbiAgICA8S2VlcEFsaXZlPlxuICAgICAgPGNvbXBvbmVudCA6aXM9XCJjdXJyZW50XCI+PC9jb21wb25lbnQ+XG4gICAgPC9LZWVwQWxpdmU+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJDb21wQS52dWUiOiI8c2NyaXB0IHNldHVwPlxuaW1wb3J0IHsgcmVmIH0gZnJvbSAndnVlJ1xuXG5jb25zdCBjb3VudCA9IHJlZigwKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPHA+Q3VycmVudCBjb21wb25lbnQ6IEE8L3A+XG4gIDxzcGFuPmNvdW50OiB7eyBjb3VudCB9fTwvc3Bhbj5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJjb3VudCsrXCI+KzwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cbiIsIkNvbXBCLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5jb25zdCBtc2cgPSByZWYoJycpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cD5DdXJyZW50IGNvbXBvbmVudDogQjwvcD5cbiAgPHNwYW4+TWVzc2FnZSBpczoge3sgbXNnIH19PC9zcGFuPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiPlxuPC90ZW1wbGF0ZT5cbiJ9)
+[اختبرها في حقل التجارب](https://sfc.vuejs.org/#eNqtU81u1DAQfhXLly3ablxxjNKIXY7cOPuSTby7Lv6T7aRUq5z4EeJFKg6oQpx4k+RtGDshbFpUVMEpmZlvvhl/M3PEa2OSpmY4xZkrLTceOeZrk1PFpdHWoyNyh0IIff2a7VCLdlZLtICMxYR4qaVZj4GERCtQzgGbGWAzAqgqtXIelbW1THl0eVLsLDI9oyojQ2fQExieSSMKz8BCKKt4g0pROHdJccWkpjj6ISKKLRN5xpWpPfI3hgHCFhUHCGpWUldMgGcsDL60KUQdQLEsOEiO1hkZaP4H52bg3NzjfMWYWQveDA+KrhLQWgU9Uh4eNhHmGZliv/LJnCAjIAn8ZeREKHyOh1GsZGGSK6cVzPsY4HQMOIpTFD3BB8MJNsUH741LCXG7MkzsyiXa7gn8JbZWnkuWMCdXW6uvHbNATPH5CQcBZ8PsCpqvmGX2Mc570Ae8gbalqoWnTBv22NLaB9s67ZqG1mHTAHF28Zf1Mnl327/vP/Tv+k/9RxSM7mt0fU7DdoSSAHOmUMj5GxFmLQu752pl+f7gU/T8wryFwcXMH91dd9vdgdDHsYu2heqQPNBsa++1Qi9Kwcs3Ye4Bs1xC+jIjQ/APk53u6WlyDGJItx+lWCz+RQvY6qdp8a37Hr9fohqhjbkWw439PipAxNuev779CQyxulo=)
 
 </div>
 <div class="options-api">
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmltcG9ydCBDb21wQSBmcm9tICcuL0NvbXBBLnZ1ZSdcbmltcG9ydCBDb21wQiBmcm9tICcuL0NvbXBCLnZ1ZSdcbiAgXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHsgQ29tcEEsIENvbXBCIH0sXG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGN1cnJlbnQ6ICdDb21wQSdcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJkZW1vXCI+XG4gICAgPGxhYmVsPjxpbnB1dCB0eXBlPVwicmFkaW9cIiB2LW1vZGVsPVwiY3VycmVudFwiIHZhbHVlPVwiQ29tcEFcIiAvPiBBPC9sYWJlbD5cbiAgICA8bGFiZWw+PGlucHV0IHR5cGU9XCJyYWRpb1wiIHYtbW9kZWw9XCJjdXJyZW50XCIgdmFsdWU9XCJDb21wQlwiIC8+IEI8L2xhYmVsPlxuICAgIDxLZWVwQWxpdmU+XG4gICAgICA8Y29tcG9uZW50IDppcz1cImN1cnJlbnRcIj48L2NvbXBvbmVudD5cbiAgICA8L0tlZXBBbGl2ZT5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuIiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXBBLnZ1ZSI6IjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGNvdW50OiAwXG4gICAgfVxuICB9XG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cD5DdXJyZW50IGNvbXBvbmVudDogQTwvcD5cbiAgPHNwYW4+Y291bnQ6IHt7IGNvdW50IH19PC9zcGFuPlxuICA8YnV0dG9uIEBjbGljaz1cImNvdW50KytcIj4rPC9idXR0b24+XG48L3RlbXBsYXRlPlxuIiwiQ29tcEIudnVlIjoiPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgbXNnOiAnJ1xuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cblxuPHRlbXBsYXRlPlxuICA8cD5DdXJyZW50IGNvbXBvbmVudDogQjwvcD5cbiAgPHNwYW4+TWVzc2FnZSBpczoge3sgbXNnIH19PC9zcGFuPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiPlxuPC90ZW1wbGF0ZT5cbiJ9)
+[اختبرها في حقل التجارب](https://sfc.vuejs.org/#eNqtVEtu2zAQvcqAG7ewLQZdCqpRu8teQRtaoh2m4gck5SYwvOoHRS8SdFEERVe9iXybDklbrdwggZEAhqUZvnkk37zRlsyNyTYtJzkpXGWF8bNSCWm09fBWSzOHldUSRhmNUYCOBoDFALA4AABKxa8jqOYr1jYetiFbIUYrrrzLYZs2mBxodpMAqJlnL14mMIDlvrXqGGF5ay0W5zCKpXEjgF144B/+CtpfAgPPpWmY5xgBFLXYQNUw516XpOZSlyTmcaVhS97MCqFM68HfGI4Iy2qBENhMpa55g5nD5iHHmjZg4iEwpjOYFzSxPAPlIlEuTijfcW7mjdik68RULyfkIlyr55sVtF871tMhQUFREHwr6D8ykQlJvZ1KZrIrpxUaI8pfHhZcSbB1ibIk2O0Ql+TSe+NySt2qCha4cpm2a4pvmW2VF5Jn3Mnp0uoPjlskLkls94GDYnLD7RQPX3PL7UOcJ9D/eI9mwKv0lh24+z5fPmI7jXfI4eIsu5lZd7v/tP+8/7j/uv8CIeh+xNS3PNjFJJgzTIHzN03ovmR2LdTUivUl7vfqwlxjK2Pl7+6uu+3uUPptOg7sdrg7FieaZeu9VvCmakT1PjghYMZjLB8XNC3e0+t+ZJ8okHRrnMlHxvE8hdD95yn0s/sVn9+jRniiE4XSKP6dPUTEL8BQk90fzkvNng==)
 
 </div>
 
-:::tip
-When used in [DOM templates](/guide/essentials/component-basics.html#dom-template-parsing-caveats), it should be referenced as `<keep-alive>`.
+:::tip ملاحظة
+عند استخدامها في [قوالب الـDOM](/guide/essentials/component-basics.html#dom-template-parsing-caveats)، يجب إشارة إليها باستخدام `<keep-alive>`.
 :::
 
-## Include / Exclude {#include-exclude}
+## التضمين / استبعاد {#include-exclude}
 
-By default, `<KeepAlive>` will cache any component instance inside. We can customize this behavior via the `include` and `exclude` props. Both props can be a comma-delimited string, a `RegExp`, or an array containing either types:
+افتراضيا، ستخزن أي نسخة للمكون داخل `<KeepAlive>`، ويمكننا تخصيص هذا السلوك عبر التوابع `include` و `exclude`. يمكن أن تكون كلتا الخاصيتين عبارة عن سلسلة نصية مفصولة بفواصل، تعبير نمطي `RegExp`، أو مصفوفة تحتوي كلا النوعين:
 
 ```vue-html
-<!-- comma-delimited string -->
+<!-- سلسلة نصية مفصولة بفواصل -->
 <KeepAlive include="a,b">
   <component :is="view" />
 </KeepAlive>
 
-<!-- regex (use `v-bind`) -->
+<!-- تعبير نمطي (استخدم `v-bind`) -->
 <KeepAlive :include="/a|b/">
   <component :is="view" />
 </KeepAlive>
 
-<!-- Array (use `v-bind`) -->
+<!-- مصفوفة (استخدم `v-bind`) -->
 <KeepAlive :include="['a', 'b']">
   <component :is="view" />
 </KeepAlive>
 ```
 
-The match is checked against the component's [`name`](/api/options-misc.html#name) option, so components that need to be conditionally cached by `KeepAlive` must explicitly declare a `name` option.
+يُتحقق من التطابق عبر خيار [`name`](/api/options-misc.html#name) للمكون، لذا يجب على المكونات التي تحتاج إلى التخزين الشرطي عبر `KeepAlive` التعريف بخيار `name` بشكل صريح.
 
-:::tip
-Since version 3.2.34, a single-file component using `<script setup>` will automatically infer its `name` option based on the filename, removing the need to manually declare the name.
+:::tip ملاحظة
+من الإصدار 3.2.34، سيتم تلقائيا تحديد خيار `name` للمكون المستخدم في `<script setup>` بناءً على اسم الملف، مما يزيل الحاجة إلى تعريف الاسم يدويا.
 :::
 
-## Max Cached Instances {#max-cached-instances}
+## الحد الأقصى للنسخ المخزنة {#max-cached-instances}
 
-We can limit the maximum number of component instances that can be cached via the `max` prop. When `max` is specified, `<KeepAlive>` behaves like an [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>): if the number of cached instances is about to exceed the specified max count, the least recently accessed cached instance will be destroyed to make room for the new one.
+يمكننا تحديد الحد الأقصى لعدد النسخ المخزنة عبر خاصية `max`. عند تحديد `max`، ستتصرف `<KeepAlive>` كـ[ذاكرة تخزين مؤقت](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>): إذا كان عدد النسخ المخزنة قريبًا من الوصول إلى الحد الأقصى المحدد، ستُفصل النسخة الأقدم المخزنة لإنشاء مساحة للنسخة الجديدة.
 
 ```vue-html
 <KeepAlive :max="10">
   <component :is="activeComponent" />
 </KeepAlive>
 ```
 
-## Lifecycle of Cached Instance {#lifecycle-of-cached-instance}
+## دورة حياة النسخة المخزنة {#lifecycle-of-cached-instance}
 
-When a component instance is removed from the DOM but is part of a component tree cached by `<KeepAlive>`, it goes into a **deactivated** state instead of being unmounted. When a component instance is inserted into the DOM as part of a cached tree, it is **activated**.
+عندما  تُزال نسخة للمكون من الـDOM ولكنها عبارة عن جزء من شجرة مكونات مخزنة بواسطة `<KeepAlive>`، ستتحول إلى حالة **خاملة** بدلاً من إزالتها من الـDOM. عندما تُضاف نسخة للمكون إلى الـDOM كجزء من شجرة مكونات مخزنة، ستتحول إلى حالة **مفعلة**.
 
 <div class="composition-api">
 
-A kept-alive component can register lifecycle hooks for these two states using [`onActivated()`](/api/composition-api-lifecycle.html#onactivated) and [`onDeactivated()`](/api/composition-api-lifecycle.html#ondeactivated):
+مكون مخزن يمكنه تسجيل دوال دورة حياة لهذين الحالتين باستخدام [`()onActivated`](/api/composition-api-lifecycle.html#onactivated) و[`()onDeactivated`](/api/composition-api-lifecycle.html#ondeactivated):
 
 ```vue
 <script setup>
 import { onActivated, onDeactivated } from 'vue'
 
 onActivated(() => {
-  // called on initial mount
-  // and every time it is re-inserted from the cache
+  // يستدعى عند الوصل 
+  // وكل مرة يتم إدراجه من الذاكرة المؤقتة
 })
 
 onDeactivated(() => {
-  // called when removed from the DOM into the cache
-  // and also when unmounted
+  // يستدعى عند إزالته من الـDOM إلى الذاكرة المؤقتة
+  // وكذلك عند إزالته
 })
 </script>
 ```
 
 </div>
 <div class="options-api">
 
-A kept-alive component can register lifecycle hooks for these two states using [`activated`](/api/options-lifecycle.html#activated) and [`deactivated`](/api/options-lifecycle.html#deactivated) hooks:
+مكون مخزن يمكنه تسجيل دوال دورة حياة لهذين الحالتين باستخدام دوال [`activated`](/api/options-lifecycle.html#activated) و[`deactivated`](/api/options-lifecycle.html#deactivated):
 
 ```js
 export default {
   activated() {
-    // called on initial mount
-    // and every time it is re-inserted from the cache
+    // يستدعى عند الوصل 
+    // وكل مرة يتم إدراجه من الذاكرة المؤقتة
   },
   deactivated() {
-    // called when removed from the DOM into the cache
-    // and also when unmounted
+    // يستدعى عند إزالته من الـDOM إلى الذاكرة المؤقتة
+    // وكذلك عند إزالته
   }
 }
 ```
 
 </div>
 
-Note that:
+تجدر الإشارة إلى:
 
-- <span class="composition-api">`onActivated`</span><span class="options-api">`activated`</span> is also called on mount, and <span class="composition-api">`onDeactivated`</span><span class="options-api">`deactivated`</span> on unmount.
+- <span class="composition-api">`onActivated`</span><span class="options-api">`activated`</span> يستدعى أيضًا عند الوصل، و<span class="composition-api">`onDeactivated`</span><span class="options-api">`deactivated`</span> عند الفصل.
 
-- Both hooks work for not only the root component cached by `<KeepAlive>`, but also descendant components in the cached tree.
+- تعمل كل من الدوال على جذر المكون المخزن بواسطة `<KeepAlive>`، ولكنها تعمل أيضًا على المكونات الفرعية في شجرة المكونات المخزنة.
 
 ---
 
-**Related**
+**ذات علاقة**
 
-- [`<KeepAlive>` API reference](/api/built-in-components.html#keepalive)
+- [ مرجع الواجهة البرمجية لـ`<KeepAlive>`](/api/built-in-components.html#keepalive)