ComponentView

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

ComponentView

Instancja komponentu — nazwanego, reużywalnego fragmentu schemy z parametrami (props) i opcjonalnymi slotami. Komponenty eliminują kopiowanie tych samych fragmentów schemy w wielu miejscach widoku.

Definiowanie komponentów

Komponenty definiuje się w sekcji components na najwyższym poziomie schemy widoku (obok głównego type). Każda definicja zawiera:

• props - Obiekt z nazwami parametrów i ich wartościami domyślnymi
• template - Schema widoku; propsy dostępne są jako {{ $props.<nazwa> }}
• actionDefinitions - Nazwane akcje komponentu, dostępne dla action: run w jego szablonie (opcjonalne; przesłaniają akcje o tej samej nazwie ze strony)

components:
  infoRow:
    props:
      label: ""
      value: ""
    template:
      type: flex
      direction: column
      childs:
        - type: text
          content: "{{ $props.label }}"
          className: text-muted small text-uppercase
        - type: text
          content: "{{ $props.value }}"
          className: fw-medium
type: card
title: Zamówienie
content:
  - type: component
    component: infoRow
    props:
      label: Klient
      value: "{{ order001.customer.name }}"
  - type: component
    component: infoRow
    props:
      label: Status
      value: "{{ order001.status }}"

Parametry instancji

• type - Typ widoku: "component"
• component - Nazwa zarejestrowanego komponentu (wymagane, chyba że podano definition)
• props [template] - Wartości parametrów przekazywane do komponentu; niepodane propsy przyjmują wartości domyślne z definicji (opcjonalne)
• definition - Inline'owa definicja komponentu { props, template } — alternatywa dla component, przydatna do lokalnych, jednorazowych komponentów (opcjonalne)
• childs - Zawartość domyślnego slotu (opcjonalne)
• slots - Mapa { nazwaSlotu: [schematy widoków] } dla slotów nazwanych (opcjonalne)

Propsy — {{ $props.<nazwa> }}

Wewnątrz template komponentu propsy są dostępne w szablonach Handlebars pod kluczem $props — we wszystkich polach oznaczonych [template], w warunkach renderIf oraz w varPath widoku listvar.

Wartości propsów są parsowane w miejscu użycia instancji, więc mogą korzystać z notacji .$ (bieżący element listy) oraz zmiennych $page / $global:

type: listvar
varPath: ordersTable
template:
  type: component
  component: infoRow
  props:
    label: Klient
    value: "{{ ordersTable.$.customer.name }}"

Propsy mogą być też tablicami lub obiektami — np. do iterowania w listvar:

components:
  tagList:
    props:
      items: []
    template:
      type: listvar
      varPath: "$props.items"
      template:
        type: badge
        label: "{{ $props.items.$ }}"

Sloty

Definicja komponentu może zawierać widok { type: slot } — w to miejsce zostanie wstawiona zawartość childs (slot domyślny) lub slots.<nazwa> (slot nazwany) z instancji. Zawartość slotu jest ewaluowana w kontekście zewnętrznym (miejsca użycia), nie wewnątrz komponentu.

components:
  panel:
    props:
      title: ""
    template:
      type: card
      title: "{{ $props.title }}"
      content:
        - type: slot           # tu trafi `childs` instancji
        - type: slot
          name: footer         # tu trafi `slots.footer` instancji
type: component
component: panel
props:
  title: Podsumowanie
childs:
  - type: text
    content: Treść panelu
slots:
  footer:
    - type: button
      label: Zapisz

Rejestracja programowa

Komponenty można też rejestrować z kodu JS:

import { registerComponents } from '@/viewengine';
registerComponents({ infoRow: { props: {...}, template: {...} } });