اختيار شجري TreeSelect

مزيج من مُشغِّل منسدل ولوحة Tree. يُعيد التحديد الفردي string، بينما يُعيد التحديد المتعدد (بخانات الاختيار) string[].

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

تحديد فردي

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'الواجهات', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'الخوادم' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'الواجهات', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'الخوادم' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

التحديد المتعدد

تحديد متعدد

<script setup>
import { ref } from 'vue'
const treeMulti = ref([])
</script>

<template>
  <!-- تحديد متعدد -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="اختر حزمة التقنيات" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'الواجهات', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'الخوادم' },
      ],
    }
  },
}
</script>

<template>
  <!-- تحديد متعدد -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="اختر حزمة التقنيات" />
</template>

التعطيل والتركيب

يعطّل disabled المنتقي؛ وعند ضبط teleported على false تُركَّب اللوحة المنسدلة في مكانها (دون نقلها إلى body).

تعطيل / لوحة محلية

<script setup>
import { ref } from 'vue'
const treeDisabled = ref([])
const treeLocal = ref([])
</script>

<template>
  <!-- تعطيل -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- لوحة محلية -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: 'الواجهات', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'الخوادم' },
      ],
    }
  },
}
</script>

<template>
  <!-- تعطيل -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- لوحة محلية -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

اسم الخاصية	الوصف	النوع	القيمة الافتراضية
data	بيانات الشجرة	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	القيمة الحالية (فردي string / متعدد string[]، متحكَّم بها عبر v-model)	string | string[]	—
multiple	تحديد متعدد (يُظهر خانات اختيار، والقيمة مصفوفة مفاتيح محدَّدة)	boolean	false
disabled	التعطيل	boolean	false
placeholder	النص النائب	string	—
teleported	تركيب اللوحة على body (افتراضي true)	boolean	true
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	يُطلَق عند تغيُّر قيمة التحديد، ويُستخدم مع v-model (فردي string، متعدد string[])	(value: string | string[] | undefined)
change	يُطلَق بعد تغيُّر التحديد	(value: string | string[] | undefined)

إتاحة الوصول

• المُشغِّل عنصر <button> حقيقي، وaria-haspopup="tree" + aria-expanded يُعلنان حالة التوسيع؛ واللوحة role="listbox" (ويُضاف aria-multiselectable في التحديد المتعدد)
• داخل اللوحة يُعاد استخدام التنقّل بلوحة المفاتيح وفق نمط APG tree في Tree بالكامل
• تُغلق اللوحة عند النقر خارج المكوّن أو الضغط على Escape، ويُعاد التركيز إلى المُشغِّل بعد الإغلاق

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

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

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** بيانات الشجرة */
  data: LhTreeNode[]
  /** القيمة الحالية (فردي string / متعدد string[]، متحكَّم بها عبر v-model) */
  modelValue?: string | string[]
  /** تحديد متعدد (يُظهر خانات اختيار، والقيمة مصفوفة مفاتيح محدَّدة) */
  multiple?: boolean
  /** تعطيل */
  disabled?: boolean
  /** النص النائب */
  placeholder?: string
  /** تركيب اللوحة على body (افتراضي true) */
  teleported?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhTreeNode _{(من @lh-ui/share/core/tree)}

/** بيانات عقدة الشجرة */
export interface LhTreeNode {
  /** مفتاح فريد */
  key: string
  /** النص الظاهر */
  label: string
  /** العقد الفرعية */
  children?: LhTreeNode[]
  /** تعطيل */
  disabled?: boolean
  /** هل هي ورقة (عند عدم التمرير يُستدلَّ عليها من children) */
  isLeaf?: boolean
}