نقل Transfer

تحديد بنقل بين قائمتين. يربط v-model بمفاتيح القائمة اليمنى (المصدر) — وهي القائمة التي تظهر يمينًا في تخطيط RTL — وعند خلو القائمة تكون جميع البيانات في القائمة اليسرى (الهدف)، والنقل هو إضافة المفاتيح إلى المصدر أو حذفها منه؛ والعناصر disabled غير قابلة للنقل.

نقل

<template>
  <div style="max-width: 640px">
    <LhTransfer v-model="sourceKeys" :data="data" />
    <p class="demo-note">v-model يحتوي على مفاتيح القائمة اليمنى (المصدر): {{ sourceKeys.join('، ') || '(فارغ)' }}</p>
    <LhTransfer v-model="sourceKeys" :data="data" disabled />
    <p class="demo-note">disabled يُعطِّل المجموعة كاملة (الأزرار ومربعات الاختيار غير قابلة للنقر)</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    sourceKeys: ['ink', 'paper'],
    data: [
      { key: 'ink', label: 'رسم الحبر' },
      { key: 'paper', label: 'ورق الأرز' },
      { key: 'brush', label: 'فرشة الذئب' },
      { key: 'seal', label: 'الختم', disabled: true },
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
data	البيانات الكاملة	LhTransferItem[]	[]
v-model	قائمة مفاتيح القائمة اليمنى، أي المصدر (prop يتحكم في value)؛ عند عدم تمريرها يكون السلوك الافتراضي الداخلي قائمة فارغة، أي جميع العناصر في القائمة اليسرى	Array<string \| number>	—
disabled	معطّل	boolean	false
sx	خاصية sx المختصرة للتخطيط	—	—

Events

input (v-model), change (sourceKeys, direction)

إمكانية الوصول

كلتا القائمتين role="listbox" + خيارات role="option" + aria-selected؛ تحمل أزرار النقل aria-label يُبيِّن الاتجاه والعدد، وتُضبط الحالة المعطّلة بـ aria-disabled، مع دعم التحديد عبر لوحة المفاتيح وتشغيل النقل.