SelectView

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

SelectView

Widok selecta z obsługą TomSelect. Obsługuje dwa tryby pozyskania opcji: statyczne i dynamiczne.

Schema

type: select
id: mySelect
name: category
label: Kategoria
placeholder: "Wybierz..."
value: ""
multiple: false
disabled: false
className: ""
allowClear: true
maxItems: null
options:
  - id: "1"
    label: Opcja 1
  - id: "2"
    label: Opcja 2
onChange:
  action: reload
  target: listId

Parametry

• type - Typ widoku: "select"
• id - Identyfikator widoku (wymagane dla onChange)
• name - Nazwa zmiennej do zbierania danych
• label - Etykieta selecta (opcjonalne)
• placeholder - Placeholder (opcjonalne)
• value - Wartość początkowa (id lub tablica id dla multiple)
• multiple - Czy wielokrotny wybór (domyślnie: false)
• disabled - Czy zablokowany (opcjonalne)
• className - Dodatkowe klasy CSS (opcjonalne)
• allowClear - Czy można wyczyścić wybór (domyślnie: true)
• maxItems - Maksymalna liczba wybranych dla multiple (opcjonalne)
• options - Opcje statyczne (tablica obiektów z id i label)
• optionsSource - Konfiguracja dynamicznego pobierania opcji z API
• tomSelectOptions - Dodatkowe opcje TomSelect (opcjonalne)
• onChange - Akcja na zmianę wartości (opcjonalne)
• onEvent - Nasłuchiwanie na zewnętrzne eventy (opcjonalne)

Tryb statyczny

type: select
id: categorySelect
name: category
label: Wybierz kategorię
options:
  - id: electronics
    label: Elektronika
  - id: books
    label: Książki
  - id: clothing
    label: Odzież

Tryb dynamiczny

type: select
id: productSelect
name: productId
label: Wybierz produkt
optionsSource:
  module: core/products
  method: getAll
  params:
    active: true
  labelKey: name
  idKey: _id
  responsePath: data

Wielokrotny wybór

type: select
id: tagsSelect
name: tags
label: Tagi
multiple: true
maxItems: 5
options:
  - id: tag1
    label: Tag 1
  - id: tag2
    label: Tag 2

Publiczne API (kontrakt kontrolki wartości)

view.getValue()                               // string, a dla multiple tablica stringów
view.setValue(value, { emitChange = false })  // ustawia wybór i synchronizuje VarStore

Wartość spoza listy opcji jest odrzucana — wybór zostaje wyczyszczony ('' / []), a VarStore zawsze odzwierciedla to, co faktycznie pokazuje kontrolka.

Reaktywne zdarzenia zewnętrzne (onEvent)

Pole onEvent pozwala reagować na eventy EventBus i wykonywać akcje na instancji TomSelect. Każdy wpis: { event, source?, action, clearValue? }

Pole source opcjonalnie zawęża event do konkretnego widoku (eventName = {event}:{source}).

type: select
id: productSelect
name: productId
label: Produkt
optionsSource:
  module: core/products
  method: getAll
  labelKey: name
  idKey: _id
onEvent:
  - event: viewVar:changed
    source: categorySelect
    action: reload
    clearValue: true

Powyższy przykład przeładuje opcje gdy zmienią się dane widoku categorySelect (VarStore emituje viewVar:changed:categorySelect po każdej zmianie jego wartości).