InputView

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

InputView

Widok pola input z obsługą reaktywnych akcji.

Schema

type: input
id: myInput
name: searchInput
inputType: text
placeholder: "Szukaj..."
label: Wyszukiwanie
value: ""
debounce: 300
onChange:
  action: reload
  target: listId

Parametry

type - Typ widoku: "input"
id - Identyfikator widoku (wymagane dla onChange)
name - Nazwa zmiennej do zbierania danych (używaj kropki dla zagnieżdżonych obiektów)
inputType - Typ inputa HTML: text, number, email, password, date, etc. (domyślnie: text)
placeholder - Placeholder (opcjonalne)
label - Etykieta inputa (opcjonalne)
value - Wartość początkowa (opcjonalne)
debounce - Opóźnienie w ms przed wywołaniem onChange (opcjonalne)
disabled - Czy input jest wyłączony (opcjonalne)
onChange - Akcja na zmianę wartości (opcjonalne)
variant - Wygląd pola: default, borderless (bez ramki i tła — edycja inline), plaintext, rounded (opcjonalne)
size - Rozmiar pola: sm, md, lg (opcjonalne)

Publiczne API (kontrakt kontrolki wartości)

view.getValue()                               // string, a dla inputType number/range liczba
                                              // (pusta lub niepoprawna wartość liczbowa: '')
view.setValue(value, { emitChange = false })  // ustawia wartość i synchronizuje VarStore

Wartość początkowa trafia do VarStore już przy budowie widoku, więc withData działa bez interakcji użytkownika.

Przykład użycia

type: input
id: searchInput
name: query
inputType: text
placeholder: "Wpisz nazwę produktu..."
label: Szukaj produktu
debounce: 500
onChange:
  action: reload
  target: productsTable