منتقي Select

اختيار منسدل. يُركَّب المنسدل افتراضياً على body (تموضع fixed يتبع المُشغِّل)، ويمكن تحديد الحاوية عبر popperContainer أو تمرير قيمة فارغة ليرسم في مكانه؛ مع تنقّل كامل بلوحة المفاتيح (مفاتيح الاتجاه / Enter / ESC).

منتقي

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="يرجى اختيار الموضوع" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="لا توجد بيانات">
        <template #empty>
          <span class="demo-note">فتحة empty: لا يوجد موضوع مطابق</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">القيمة الحالية: {{ value || '(غير محدد)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: 'رسم الحبر' },
      { value: 'paper', label: 'ورق الأرز' },
      { value: 'seal', label: 'ختم' },
      { value: 'blank', label: 'فراغ' },
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة المحددة (تطابق option.value؛ الخاصية modelValue المُتحكَّم بها)	unknown	—
options	قائمة الخيارات { value, label, disabled? }	LhSelectOption[]	[]
placeholder	نص العنصر النائب، يُؤخَذ من حزمة اللغة عند غيابه	string	t('select.placeholder')
clearable	إظهار زر المسح	boolean	false
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
disabled	تعطيل	boolean	false
popperContainer	هدف تركيب المنسدل	'body' \| HTMLElement \| string	'body'
name / ariaLabel	وسم إمكانية الوصول	string	—
sx	تخطيط سريع عبر sx	—	—

Events

حدث	الوصف	معامل الاستدعاء
input	حدث v-model	—
change	يُطلق عند تغيّر القيمة المحددة	(value, option)
clear	يُطلق عند المسح	—

Slots

فتحة	الوصف
empty	المحتوى عند عدم وجود بيانات (افتراضياً «لا توجد بيانات»)

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

المُشغِّل role="combobox" + aria-expanded/haspopup، والمنسدل role="listbox"، والخيارات role="option"؛ وعند وضعه داخل LhFormItem وفشل التحقق يُضاف aria-invalid تلقائياً.