NumberInput

Числові поля з обмеженнями min/max і необов'язковими кнопками кроку. Доступні у трьох варіантах.

Живе демо

Базове (без кнопок)

Кількість

Значення: 10

Вертикальні кнопки

Кількість

Значення: 5

Горизонтальні кнопки

Товари

Значення: 1

Десяткові значення

Ціна

Значення: 9.99

Горизонтальне розміщення

Сума

Внутрішнє розміщення

Кількість

Запас

Лічильник

Варіанти

Компонент	Опис
orio-number-input	Базове числове поле без кнопок
orio-number-input-vertical	Кнопки розташовані вертикально праворуч
orio-number-input-horizontal	Кнопки «мінус»/«плюс» ліворуч і праворуч

Використання

Базове

<template>
  <orio-number-input v-model="value" :min="0" :max="100" />
</template>

<script setup>
const value = ref(0)
</script>

Вертикальні кнопки

<orio-number-input-vertical
  v-model="quantity"
  :min="1"
  :max="99"
  :step="1"
  label="Quantity"
/>

Горизонтальні кнопки

<orio-number-input-horizontal
  v-model="count"
  :min="0"
  :max="10"
  :step="1"
  label="Count"
/>

Десяткові значення

<orio-number-input-horizontal
  v-model="price"
  :min="0"
  :max="1000"
  :step="0.01"
  :decimal-places="2"
  label="Price"
/>

Горизонтальне розміщення

<orio-number-input v-model="value" label="Amount" layout="horizontal" />

Внутрішнє розміщення

<orio-number-input v-model="value" label="Quantity" layout="inner" />

Можливості

• Перевірка меж — під час втрати фокусу значення обмежується діапазоном min/max
• Кнопки збільшення/зменшення — клік змінює значення на величину кроку (Vertical і Horizontal)
• Натиснути й утримувати — утримання кнопки безперервно змінює значення після затримки 500 мс (Vertical і Horizontal)
• Десяткова точність — кількість знаків після коми задається пропом decimalPlaces

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	number	0	Значення поля (v-model)
layout	"vertical" | "horizontal" | "inner"	"vertical"	Позиція підпису відносно поля
min	number	undefined	Мінімальне допустиме значення
max	number	undefined	Максимальне допустиме значення
step	number	1	Величина зміни за один крок
decimalPlaces	number	0	Кількість знаків після коми
label	string	undefined	Текст підпису
placeholder	string	undefined	Текст-заповнювач

Усі стандартні HTML-атрибути input підтримуються через v-bind="$attrs".

Події

Подія	Дані	Опис
update:modelValue	number	Генерується під час зміни значення поля

Стилізація

--color-bg           /* Input background */
--color-border       /* Border color */
--color-text         /* Text color */
--color-accent       /* Focus border color */