InputNumber (عدّاد)

حقل إدخال رقمي. يدعم حدّي min/max، والخطو بقيمة step مع قيد مضاعفات stepStrictly، وعدد المنازل العشرية precision، وإظهار زرّي الجمع والطرح بثلاثة أحجام؛ كما يقوم اختصارا لوحة المفاتيح ↑/↓ بالخطو أيضاً.

العدّاد

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="count" :min="1" :max="99" :step="1" placeholder="الكمية" name="count" />
      <span class="demo-note">min=1 max=99، القيمة المتحكَّم بها: {{ count }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="price" :step="0.5" :precision="2" :min="0" />
      <span class="demo-note">step=0.5 precision=2: {{ price }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="strict" :step="10" step-strictly />
      <span class="demo-note">stepStrictly: عند فقدان الحقل للتركيز تُضبَّط القيمة على مضاعف 10</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="بدون خطّوة" />
      <LhInputNumber v-model="disabledVal" disabled />
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="sized" size="small" />
      <LhInputNumber v-model="sized" size="medium" />
      <LhInputNumber v-model="sized" size="large" />
    </div>
    <p class="demo-note">controls=false يخفي زرّي الجمع والطرح؛ وعند تركيز الحقل يمكن أيضاً الخطو بمفتاحَي الاتجاه (↑/↓).</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 6,
    price: 12.5,
    strict: 20,
    noControls: undefined,
    disabledVal: 3,
    sized: 8,
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة المرتبطة (model: modelValue/input)	number \| null	null
min	الحد الأدنى (إذا نقصت القيمة تُضبَّط على min)	number	—
max	الحد الأقصى (إذا زادت القيمة تُضبَّط على max)	number	—
step	قيمة الخطو	number	1
stepStrictly	يجب أن تكون القيمة المدخلة من مضاعفات step (تُضبَّط عند فقدان التركيز)	boolean	false
precision	عدد المنازل العشرية (يُقرَّب للقربى عند تجاوزه)	number	—
controls	إظهار زرّي الجمع والطرح	boolean	true
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
disabled	تعطيل	boolean	false
placeholder	نص العنصر النائب	string	—
name	name أصلي	string	—
sx	خصائص تخطيط سريعة عبر sx	—	—

Events

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

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

زرّا الجمع والطرح هما button أصليان؛ وعند تركيز الحقل يعمل الخطو بـ ↑/↓؛ وإذا وُضع داخل LhFormItem وفشل التحقق يُضاف aria-invalid.