نقل Transfer

قائمتان + تحديد ونقل، مع إنجاز منطق تقسيم البيانات ونقلها في الطبقة الأساسية core بأسلوب غير قابل للتعديل (immutable). كلتا القائمتين role="listbox" (وفق نمط APG listbox).

الاستخدام الأساسي

الاستخدام الأساسي

القائمة الأولى1 / 3

• العنصر الأول

القائمة الثانية2 / 3

• العنصر الثاني
• العنصر الثالث

<script setup>
import { ref } from 'vue'
const source = ref(['a'])
const items = [
  { key: 'a', label: 'العنصر الأول' },
  { key: 'b', label: 'العنصر الثاني' },
  { key: 'c', label: 'العنصر الثالث', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'العنصر الأول' },
        { key: 'b', label: 'العنصر الثاني' },
        { key: 'c', label: 'العنصر الثالث', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

التعطيل

يعطّل disabled مكوّن النقل بالكامل.

تعطيل مكوّن النقل

القائمة الأولى1 / 3

• العنصر الأول

القائمة الثانية2 / 3

• العنصر الثاني
• العنصر الثالث

<script setup lang="ts">
import { ref } from 'vue'

const source = ref(['a'])
const items = [
  { key: 'a', label: 'العنصر الأول' },
  { key: 'b', label: 'العنصر الثاني' },
  { key: 'c', label: 'العنصر الثالث', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'العنصر الأول' },
        { key: 'b', label: 'العنصر الثاني' },
        { key: 'c', label: 'العنصر الثالث', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

API

LhTransfer Props

اسم الخاصية	الوصف	النوع	القيمة الافتراضية
data	البيانات الكاملة	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	قائمة مفاتيح جهة المصدر (متحكَّم بها عبر v-model)	(string | number)[]	() => []
disabled	التعطيل	boolean	false
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	يُطلَق عند تغيُّر قائمة مفاتيح جهة الهدف، ويُستخدم مع v-model	(keys: Array<string | number>)
change	يُطلَق بعد إتمام نقل البيانات	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

الحقل	الوصف	النوع
key	مفتاح فريد	string | number
label	النص الظاهر	string
disabled	التعطيل (لا يمكن نقله)	boolean

إتاحة الوصول

• كلتا القائمتين role="listbox" + aria-multiselectable، والعناصر role="option" + aria-selected / aria-disabled
• أزرار النقل هي عناصر <button> حقيقية تحمل تسميات (النقل إلى جهة المصدر / النقل إلى جهة الهدف)؛ وتحديد الكل عبر خانة أصلية (الحالة الوسيطة indeterminate حقيقية)
• لكل جهة مربع بحث مستقل يحمل aria-label؛ وتُعترَض العناصر المعطّلة على كامل السلسلة (التحديد، وتحديد الكل، والنقل)

تعريفات الأنواع

بنية الأنواع التي يُصدِّرها هذا المكوّن بلغة TypeScript كالتالي (مستخرجة آليًا من packages/components/transfer/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhTransferProps

export interface LhTransferProps {
  /** البيانات الكاملة */
  data: LhTransferItem[]
  /** قائمة مفاتيح جهة المصدر (متحكَّم بها عبر v-model) */
  modelValue?: Array<string | number>
  /** تعطيل */
  disabled?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhTransferSide _{(من @lh-ui/share/core/transfer)}

/** جهة اللوحة */
export type LhTransferSide = 'left' | 'right'

LhTransferItem _{(من @lh-ui/share/core/transfer)}

/** عنصر بيانات مكوّن النقل */
export interface LhTransferItem {
  /** مفتاح فريد */
  key: string | number
  /** النص الظاهر */
  label: string
  /** تعطيل (لا يمكن نقله) */
  disabled?: boolean
}