Skip to content

Commit

Permalink
Update component events documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdvg
sdvg committed Dec 20, 2024
1 parent 5db2c1f commit 25b55e5
Show file tree
Hide file tree
Showing 32 changed files with 333 additions and 269 deletions.
39 changes: 39 additions & 0 deletions docs/20-concepts/03-events.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: Events
description: todo
tags:
- Events
- Callbacks
---

Events in KoliBri can be processed as DOM Events or as Callbacks.

### DOM Events

The component's events can be handled using event listeners, which may be called with a `details` parameter:

```js
kolibriElement.addEventListener('kolFocus', (event) => {
/* Do something on focus */
});

kolibriElement.addEventListener('kolInput', (event, { detail: value }) => {
/* Do something with value or event */
});
```


### Callbacks

The component's callbacks can be handled using an `_on` property, which consists of an object with various callback functions:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
}
};
```
8 changes: 8 additions & 0 deletions docs/30-components/accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,14 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
</div>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|---------|-------------------------|-------|
| `click` | Element wird angeklickt | - |

### Beispiel

<div class="grid gap-2">
Expand Down
8 changes: 8 additions & 0 deletions docs/30-components/alert.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|---------|-----------------------------|-------|
| `close` | Komponente wird geschlossen | - |

### Beispiel

<kol-alert _label="Überschrift im Alert" _level="1" _type="success" >Textbereich im Alert</kol-alert>
Expand Down
9 changes: 9 additions & 0 deletions docs/30-components/badge.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|---------------|----------------------------------------------------------------------------------------------------------|-------|
| `click` | Smart Button wird angeklickt | - |
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Smart Buttons befindet | - |

### Beispiel

<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
Expand Down
24 changes: 5 additions & 19 deletions docs/30-components/button-link.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,12 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onClick: (event, value) => {
/* Do something with value or event */
},
// ...
};
```
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
| ----------- | -------------------------------------------------------------- | -------------------- |
| onFocus | Element wird fokussiert | - |
| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | - |
| onClick | Element wird angeklickt (entspricht nativem `click`-Event) | Definierter `_value` |
| onBlur | Element verliert Fokus | - |
| Event | Auslöser | Value |
|---------------|-----------------------------------------------------------------------------------------------------|-------------------|
| `click` | Element wird angeklickt | `_value`-Property |
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Elements befindet | - |

### Beispiel

Expand Down
24 changes: 5 additions & 19 deletions docs/30-components/button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,12 @@ import { ExampleLink } from '@site/src/components/ExampleLink';

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onClick: (event, value) => {
/* Do something with value or event */
},
// ...
};
```
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
| ----------- | -------------------------------------------------------------- | -------------------- |
| onFocus | Element wird fokussiert | - |
| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | - |
| onClick | Element wird angeklickt (entspricht nativem `click`-Event) | Definierter `_value` |
| onBlur | Element verliert Fokus | - |
| Event | Auslöser | Value |
|---------------|-----------------------------------------------------------------------------------------------------|-------------------|
| `click` | Element wird angeklickt | `_value`-Property |
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Elements befindet | - |

### Beispiel

Expand Down
8 changes: 8 additions & 0 deletions docs/30-components/card.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ Der **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalt
</kol-card>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|---------|-----------------------------|-------|
| `close` | Komponente wird geschlossen | - |

### Beispiel

<kol-card _label="Testtitel">
Expand Down
12 changes: 12 additions & 0 deletions docs/30-components/combobox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@ Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit e
<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|----------|----------------------------------|---------------------------------|
| `click` | Eingabefeld wird angeklickt | - |
| `focus` | Eingabefeld wird fokussiert | - |
| `blur` | Eingabefeld verliert Fokus | - |
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |

### Beispiel

<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
Expand Down
25 changes: 7 additions & 18 deletions docs/30-components/input-checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,15 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
```
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
| -------- | ------------------------------------------------------------------- | --------------------------------------------------- |
| onFocus | Element wird fokussiert | - |
| onInput | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
| onChange | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
| onBlur | Element verliert Fokus | - |
|----------|---------------------------------------------------------------------|-----------------------------------------------------|
| `focus` | Eingabefeld wird fokussiert | - |
| `click` | Eingabefeld wird angeklickt | - |
| `input` | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
| `change` | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
| `blur` | Eingabefeld verliert Fokus | - |

## Verwendung

Expand Down
12 changes: 12 additions & 0 deletions docs/30-components/input-color.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,18 @@ Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer belieb
<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|----------|----------------------------------|---------------------------------|
| `click` | Eingabefeld wird angeklickt | - |
| `focus` | Eingabefeld wird fokussiert | - |
| `blur` | Eingabefeld verliert Fokus | - |
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |

### Beispiel

<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
Expand Down
12 changes: 12 additions & 0 deletions docs/30-components/input-date.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>
```

### Events

Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|----------|----------------------------------|---------------------------------|
| `click` | Eingabefeld wird angeklickt | - |
| `focus` | Eingabefeld wird fokussiert | - |
| `blur` | Eingabefeld verliert Fokus | - |
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |

### Beispiel

<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>
Expand Down
30 changes: 9 additions & 21 deletions docs/30-components/input-email.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,15 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
```

| Event | Auslöser | Value |
| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
| onFocus | Element wird fokussiert | - |
| onClick | Element wird angeklickt | - |
| onInput | Eine Eingabe erfolgt (entspricht nativem `input`-Event) | Eingegebener Wert als String |
| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
| onBlur | Element verliert Fokus | - |
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|----------|----------------------------------|---------------------------------|
| `click` | Eingabefeld wird angeklickt | - |
| `focus` | Eingabefeld wird fokussiert | - |
| `blur` | Eingabefeld verliert Fokus | - |
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |

## Verwendung

Expand Down
26 changes: 7 additions & 19 deletions docs/30-components/input-file.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,15 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es kö

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
```
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
| -------- | ------------------------------------------------------------------------------- | ------------------------------- |
| onFocus | Element wird fokussiert | - |
| onClick | Element wird angeklickt | - |
| onInput | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event) | Ausgwählte Dateien als FileList |
| onChange | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
| onBlur | Element verliert Fokus | - |
|----------|---------------------------------------------------------------------------------|---------------------------------|
| `focus` | Eingabefeld wird fokussiert | - |
| `click` | Eingabefeld wird angeklickt | - |
| `input` | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event) | Ausgwählte Dateien als FileList |
| `change` | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
| `blur` | Eingabefeld verliert Fokus | - |

### Beispiel

Expand Down
30 changes: 9 additions & 21 deletions docs/30-components/input-number.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,27 +27,15 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.

### Events

Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

```js
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
```

| Event | Auslöser | Value |
| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
| onFocus | Element wird fokussiert | - |
| onClick | Element wird angeklickt | - |
| onInput | Eine Eingabe erfolgt (entspricht nativem `input`-Event) | Eingegebener Wert als String |
| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
| onBlur | Element verliert Fokus | - |
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.

| Event | Auslöser | Value |
|----------|----------------------------------|---------------------------------|
| `click` | Eingabefeld wird angeklickt | - |
| `focus` | Eingabefeld wird fokussiert | - |
| `blur` | Eingabefeld verliert Fokus | - |
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |

### Beispiel

Expand Down
Loading

0 comments on commit 25b55e5

Please sign in to comment.