InlineEditView

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

InlineEditView

Sekcja „podgląd ↔ edycja”: lista pól, przełącznik ✎ / ✓, anulowanie i zapis przez API.

Zastępuje ręczne składanie tego wzorca z setVar + renderIf + dwóch wariantów nagłówka

ukrytych kontrolek. Widok trzyma roboczą kopię danych (FormDraft), więc anulowanie przywraca stan wyjściowy bez pobierania danych, a zapis wysyła tylko to, co trzeba.

Schema

type: inlineedit
id: customerSection
title: Dane klienta
icon: user
source: orderDetail.customer        # ścieżka do obiektu ze stanu
fields:
  - key: name
    label: Nazwa
    required: true
  - key: email
    label: E-mail
    type: text
    pattern: '.+@.+'
    message: Podaj poprawny adres e-mail
  - key: vip
    label: Klient VIP
    type: switch
save:
  module: core/orders
  method: customer.update
  params:
    orderId: { valueFrom: $page.orderId }
  onlyChanged: true                 # wyślij wyłącznie zmienione pola
  refresh: [orderDetail]            # odśwież widoki po zapisie
  successMessage: Zapisano dane klienta

Parametry

type - Typ widoku: "inlineedit"
id - Identyfikator widoku
title - Tytuł sekcji (opcjonalne)
icon - Ikona Tabler przy tytule (opcjonalne)
source - Ścieżka do obiektu z danymi (orderDetail.customer, $page.customer); można też podać source: { varPath: ... }
fields - Lista pól (patrz formFields.js): key, label, type, from, as, required, min, max, minLength, maxLength, pattern, message, options / optionsSource
save - Konfiguracja zapisu: module, method, params, withData, onlyChanged, refresh, successMessage, onSuccess, onError
card - false renderuje sekcję bez obudowy karty (domyślnie true)
labelWidth - Szerokość kolumny etykiet w podglądzie (domyślnie col-4)
editLabel / saveLabel / cancelLabel - Podpowiedzi przycisków
readOnly - Ukrywa przycisk edycji (opcjonalne)

Zachowanie

Edycję otwiera przycisk ✎, zamyka ✓ (zapis) albo ✕ (anulowanie).
Escape anuluje edycję, Ctrl+Enter zapisuje.
Walidacja pól wykonuje się przed wysłaniem; błędne pola dostają komunikat.
Wartości pól trafiają do API dosłownie — nie są interpretowane jako templatki.
Zmiana danych źródłowych odświeża podgląd; podczas edycji jest ignorowana, żeby nie skasować tego, co użytkownik właśnie wpisał.

Emitowane zdarzenia

inlineedit:edit:${id} - po wejściu w tryb edycji
inlineedit:cancel:${id} - po anulowaniu
inlineedit:saved:${id} - po udanym zapisie ({ values })