System

Strict Component Hierarchy

provide/inject + walidacja w onBeforeMount blokująca renderowanie poza dozwolonym rodzicem
Wymuszone hierarchie:
  • LayoutSekcja → LayoutSiatka → LayoutKolumna
  • FormSection → FormRow
Klucze są Symbol-ami z src/lib/hierarchy.ts; każde dziecko rzuca Error w onBeforeMount, gdy zostanie użyte poza rodzicem — komponent w ogóle się nie wyrenderuje.

Przykład 1: Layout (Sekcja → Siatka → Kolumna)

Kolumna A

Dowolna treść — np. metryki, lista, formularz.

Kolumna B

Kolumny mogą być zagnieżdżone tylko w <LayoutSiatka>.

Kolumna C

Spróbuj wyciąć którykolwiek poziom — Vue rzuci błąd.

Przykład 2: Formularz (Section → Row → pola)

Dane podstawowe

FormRow zadziała tylko tutaj — inaczej throw.
Co się stanie przy złym zagnieżdżeniu?

Każde poniższe użycie wywoła throw new Error(...) w onBeforeMount:

<!-- BŁĄD: LayoutSiatka poza LayoutSekcja -->
<LayoutSiatka>
  <LayoutKolumna>...</LayoutKolumna>
</LayoutSiatka>

<!-- BŁĄD: LayoutKolumna bez LayoutSiatka -->
<LayoutSekcja>
  <LayoutKolumna>...</LayoutKolumna>
</LayoutSekcja>

<!-- BŁĄD: FormRow poza FormSection -->
<AppCard>
  <FormRow>
    <TextField label="..." />
  </FormRow>
</AppCard>

Otwórz konsolę DevTools i zobacz log błędu — element o złym zagnieżdżeniu jest po prostu pomijany w drzewie DOM.