> For the complete documentation index, see [llms.txt](https://docs.norisk.group/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.norisk.group/plugins/foundation/entwickler-ressourcen.md).

# Entwickler-Ressourcen

### Conditonal Config Fields

Standardmäßig lassen sich Plugin-Einstellungen, die über eine `config.xml` oder `customConfig.xml` definiert sind, nicht nach Bedingungen steuern.

Beispiel: Eine Plugin-Einstellung ist abhängig von einer anderen, d.h. sie soll nur dann im Admin-UI angezeigt werden, wenn die übergeordnete Einstellung "true" ist.

<figure><img src="/files/VPZgjLdFJdAP5QsJ8LSE" alt=""><figcaption></figcaption></figure>

Die "Conditional Config Fields" in der norisk Foundation erweitern den Standard hier mit den dafür notwendigen Markern und Attributen.

#### 1. Opt-in Signal in config.xml eintragen

Um das "Conditional Config Fields"-System generell zu aktivieren, fügst du in **genau einem** `<card>`-Block den Signal-Marker `noriskToggleProvider` ein.

```xml
<card>
    <component name="norisk-toggle-provider">
        <name>noriskToggleProvider</name>
    </component>
    <!-- weitere Felder -->
</card>
```

#### 2. Abhängige Felder markieren

Über das Attribut `<noriskConditionalField>` knüpfst du nun Felder an Bedingungen, wie in diesem Beispiel verdeutlicht:

```xml
<!-- Einfach: nur sichtbar wenn "active" true ist -->
<input-field type="text">
    <name>apiKey</name>
    <noriskConditionalField>active</noriskConditionalField>
</input-field>

<!-- AND: beide müssen true sein -->
<noriskConditionalField>active+showDetails</noriskConditionalField>

<!-- OR: mindestens eines muss true sein -->
<noriskConditionalField>modeA;modeB</noriskConditionalField>

<!-- Kombiniert: AND hat Vorrang vor OR → (a AND b) OR c -->
<noriskConditionalField>active+showDetails;legacyMode</noriskConditionalField>
```

#### Operatoren

| Operator | Bedeutung | Priorität |
| -------- | --------- | --------- |
| `+`      | AND       | höher     |
| `;`      | OR        | niedriger |

#### Einschränkungen

* Kein Wertevergleich möglich, nur Truthy/Falsy (`!!value`)
* Keine Klammerung, komplexe Ausdrücke ggfs. über ein Zwischentoggle-Feld lösen
* Felder bleiben im DOM (`v-show`, nicht `v-if`), Werte werden auch bei ausgeblendeten Feldern gespeichert

### Config Section Headings

Zur Strukturierung und Gliederung umfangreicher Konfigurationsmasken, können Bereichsüberschriften innerhalb von Cards eine gute Wahl sein.

Mit den "Config Section Headings" der norisk Foundation teilst du Cards mit fett formatierten Abschnittsüberschriften und Trennlinien in visuell getrennte Abschnitte auf.

<figure><img src="/files/lFjb11LVmUlYt23NVSGi" alt=""><figcaption></figcaption></figure>

Füge dazu eine `norisk-config-heading`-Komponente an beliebiger Stelle innerhalb eines `-Blocks` ein. Alle nachfolgenden Felder gehören visuell zu diesem Abschnitt.

#### Hinweise

* Die erste Überschrift einer Card hat keine obere Trennlinie, jede folgende Überschrift erhält eine durchgehende Trennlinie darüber.
* Verwende \<heading> statt \<label>\
  sw-system-config entnimmt Labels bei benutzerdefinierten \<component>-Elementen und übergibt sie an den umgebenden Inherit-Wrapper; ein Label würde daher stets leer ankommen.
* Die Komponente ist rein darstellend und speichert keinen Konfigurationswert.

### Loading Spinner

{% hint style="info" icon="traffic-cone" %}
norisk Foundation v1.2.0
{% endhint %}

Die Komponente `norisk-loading-spinner` wrapped den SW-nativen mt-loader und gibt die Möglichkeit, einen optionalen Text unter dem animierten Loading-Indikator auszugeben.

<figure><img src="/files/7pc1GgSo4jC8Xz2kzITA" alt=""><figcaption></figcaption></figure>

#### Verwendung

| Prop      | Typ     | Default | Beschreibung                                                                  |
| --------- | ------- | ------- | ----------------------------------------------------------------------------- |
| isLoading | Boolean | true    | false → Komponente wird nicht gerendert                                       |
| label     | String  | ''      | Text unterhalb des Spinners. Wird ignoriert wenn der Default-Slot befüllt ist |
| size      | String  | '48px'  | Größe des Spinners, z.B. '16px', '32px', '48px'                               |
| minHeight | String  | ''      | Min-Höhe des Containers, z.B. '320px'. Standard ist padding-basiert           |

| Slot    | Beschreibung                                                         |
| ------- | -------------------------------------------------------------------- |
| default | Inhalt unterhalb des Spinners. Fällt auf label-Prop zurück wenn leer |

#### Beispiele

Nur Spinner

```xml
<norisk-loading-spinner v-if="isLoading" />
```

Spinner mit Label

```xml
<norisk-loading-spinner v-if="isLoading" :label="$tc('my-plugin.loading')" />
```

Steuerung per Prop statt v-if

```xml
<norisk-loading-spinner :is-loading="isLoading" :label="$tc('my-plugin.loading')" />
```

Fixe Höhe (z.B. in einer Listing-Area)

```xml
<norisk-loading-spinner v-if="isLoading" min-height="320px" />
```

Custom Slot-Inhalt (z.B. mit Abbrechen-Button)

```xml
<norisk-loading-spinner v-if="isLoading">
    <p>{{ $tc('my-plugin.loading') }}</p>
    <mt-button @click="cancel">{{ $tc('global.default.cancel') }}</mt-button>
</norisk-loading-spinner>
```