StepperView

Źródło: views/StepperView.js

StepperView

Kontrolka liczbowa z przyciskami „−” i „+”: ilość w koszyku, liczba miejsc, korekta stanu magazynowego. Wartość widoku w VarStore to zawsze liczba z zakresu min–max, wyrównana do step.

W odróżnieniu od input z inputType: number stepper nie pokazuje natywnych strzałek przeglądarki, sam pilnuje zakresu (przyciski wyłączają się na krańcach) i rozróżnia dwa zdarzenia: onChange — „jaka jest wartość” oraz onDelta — „o ile się zmieniła”.

Schema

type: stepper
id: qty
name: quantity
label: Ilość
min: 1
max: 20
step: 1
value: 1
unit: szt.
size: sm
onChange:
  action: reload
  target: cartSummary

Parametry

• type - Typ widoku: "stepper"
• id - Identyfikator widoku (wymagane dla onChange / odczytu wartości)
• name - Nazwa zmiennej do zbierania danych
• label [template] - Etykieta kontrolki (opcjonalne)
• min - Wartość minimalna (domyślnie: brak ograniczenia)
• max - Wartość maksymalna (domyślnie: brak ograniczenia)
• step - Krok zmiany (domyślnie: 1; any wyłącza wyrównywanie do kroku)
• value [template] - Wartość początkowa (domyślnie: min, a bez min — 0)
• decimals - Liczba miejsc po przecinku w prezentacji (opcjonalne)
• unit - Jednostka pokazywana obok wartości, np. szt., kg (opcjonalne)
• editable - Czy wartość można wpisać z klawiatury (domyślnie: true)
• wrap - Czy po przekroczeniu krańca wartość przechodzi na drugi koniec zakresu (domyślnie: false; wymaga min i max)
• size - Rozmiar kontrolki: sm, md, lg (opcjonalne)
• variant - Wariant przycisków, np. secondary, primary (domyślnie: secondary outline)
• inputVariant - Wariant pola wartości: default, borderless, plaintext, rounded
• icons - Ikony przycisków: { decrement: minus, increment: plus } (opcjonalne)
• disabled - Czy kontrolka jest wyłączona (opcjonalne)
• readonly - Czy wartość jest tylko do odczytu (przyciski nieaktywne)
• debounce - Opóźnienie w ms przed wywołaniem onChange (opcjonalne)
• onChange - Akcja po zmianie wartości; w zakresie akcji $value (opcjonalne)
• onDelta - Akcja po zmianie przez użytkownika; w zakresie akcji $delta, $direction i $value (opcjonalne)

onChange vs onDelta

onChange opisuje stan — uruchamia się po każdej zmianie użytkownika i respektuje debounce, więc trzymanie „+” wywoła jedno przeładowanie listy. onDelta opisuje operację — uruchamia się natychmiast przy każdej zmianie użytkownika i zna różnicę:

onDelta:
  action: callMethod
  module: core/cart
  method: adjust
  params:
    productId: "{{ $props.id }}"
    delta:
      valueFrom: $delta

Programowa zmiana (setValue, akcja setValue) nie uruchamia żadnej z nich — zgodnie z kontraktem kontrolki wartości.

Klawiatura

• ArrowUp / ArrowDown — zmiana o jeden krok
• PageUp / PageDown — zmiana o dziesięć kroków
• Home / End — skok do min / max (gdy zdefiniowane)

Publiczne API (kontrakt kontrolki wartości)

view.getValue()                               // liczba z zakresu min–max, wyrównana do step
view.setValue(value, { emitChange = false })  // ustawia wartość i synchronizuje VarStore
view.increment()                              // zmiana o jeden krok w górę (jak klik „+”)
view.decrement()                              // zmiana o jeden krok w dół
view.stepBy(steps)                            // zmiana o `steps` kroków (liczba ujemna = w dół)

Przykład użycia

type: stepper
id: seats
name: seats
label: Liczba miejsc
min: 1
max: 8
unit: os.
onChange:
  action: setPageVar
  key: seats
  value:
    valueFrom: $value