Added Table-Stateful & Table-Stateless

docs/30-components/popover.mdx

@@ -7,8 +7,6 @@ tags:
   - Spezifikation
 ---
 
-import Readme from '../../readmes/popover/readme.md';
-
 # Popover
 
 <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
@@ -17,5 +15,3 @@ Die **Popover**-Komponente stellt eine Möglichkeit dar zusätzliche Inhalte in
 Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 
 <kol-alert _type="info" _variant="card">Die **Popover**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden.</kol-alert>
-
-<Readme />

docs/30-components/span.mdx

@@ -7,7 +7,6 @@ tags:
   - Spezifikation
   - Beispiele
 ---
-import Readme from '../../readmes/span/readme.md';
 
 # Span
 
@@ -28,5 +27,3 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 ### Beispiel
 
 <kol-span _icons="codicon codicon-home" _label="Text inside the span."></kol-span>
-
-<Readme />

docs/30-components/table-stateful.mdx

@@ -0,0 +1,208 @@
+---
+title: TableStateful
+description: Beschreibung, Spezifikation und Beispiele für die TableStateful-Komponente.
+tags:
+  - Table
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../readmes/table-stateful/readme.md';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+Synonyme: Data Table, Details List, Data Grid
+
+<kol-alert _type="warning" _variant="card">
+	<kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
+</kol-alert>
+
+Die **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
+
+<kol-indented-text _summary="Backend-seitige Pagination">
+	Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise "manuell" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine "eigene" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe [KolTableStateless](./table-stateless).
+</kol-indented-text>
+
+## Konstruktion
+
+Die Table-Komponente ist so konstruiert, dass nicht der gesamte Tabellenaufbau im Markup selbst beschrieben werden muss. Wie genau die Tabelle Markup-spezifisch aufgebaut werden muss, um barrierefrei zu sein, übernimmt die Komponente selbst.
+
+Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch zusammenbaut, kann die komplexe Auszeichnung für die assistive Systeme dem/der Entwickler:in abgenommen werden.
+
+### Funktionalitäten
+
+Die Table-Komponente unterstützt folgende Funktionalitäten:
+
+- Tabellenbeschreibung durch ein **`label`**-Attribut.
+- Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
+- Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
+- Unterschiedliche Render-Funktion für die Zellen.
+- Pagination für die Tabelle.
+
+Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
+
+- Das Filtern der Tabelle ist aktuell nicht innerhalb der Tabelle vorgesehen.
+- Das Auswählen von Zeilen ist aktuell in der Tabelle nicht vorgesehen.
+
+> Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.
+
+### Pagination
+
+Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="../pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
+
+#### KoliBriTableHeaders
+
+```ts
+{
+  horizontal: [
+    [
+      {
+        label: string,
+        key?: string,
+        colsSpan?: number,
+        rowSpan?: number,
+        useTdInsteadOfTh?: boolean,
+        render?: (data) => string,
+        sort?: (data) => data,
+      },
+      …
+    ],
+    …
+  ],
+  vertical: [
+    [
+      {
+        label: string,
+        key?: string,
+        colsSpan?: number,
+        rowSpan?: number,
+        useTdInsteadOfTh?: boolean,
+        render?: (data) => string,
+        sort?: (data) => data,
+      },
+      …
+    ],
+    …
+  ],
+};
+```
+
+### Code
+
+```html
+<kol-table-stateful
+	_label="Tabellenbeschreibung"
+	_headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}'
+	_pagination='[{"page":2}]'
+></kol-table-stateful>
+```
+
+### Beispiel
+
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table-stateful>
+
+### Footer
+
+Durch die Verwendung des **`_dataFoot_`**-Attribut können zusammenfassende Informationen oder zusätzliche Details am Ende der Tabelle angezeigt werden. Die Informationen sind hierbei an die Spaltendefinitionen gebunden.
+
+### Beispiel
+
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table-stateful>
+
+## Verwendung
+
+### Sortierung
+
+- Zu jedem Header kann man eine Sortierfunktion definieren.
+- Es ist exakt eine oder keine Sortierfunktion aktiviert.
+- **Multi-Sort-Funktionalität**: Wenn die Multi-Sort-Option (`_allowMultiSort`) aktiviert ist, kann der Benutzer mehrere Spalten gleichzeitig sortieren. Standardmäßig ist diese Funktion deaktiviert, und nur eine Spalte kann auf einmal sortiert werden. Die Sortierung wechselt zwischen aufsteigend, absteigend und ohne Sortierung. Wenn Multi-Sort deaktiviert ist, wird die Sortierung der vorherigen Spalte aufgehoben, sobald eine neue Spalte sortiert wird.
+- Aktuell wird nicht unterstützt, dass bei zweidimensionalen Headern, die Header der jeweils anderen Header-Seite mit sortiert werden. Bei der Anforderung der Sortierung empfehlen wir die Verwendung nur einer Header-Dimension (entweder horizontal oder vertikal).
+
+### Render Funktion
+
+Render-Funktionen werden als Teil der Tabellen-Header definiert. Siehe Abschnitt "KoliBriTableHeaders". Gibt es sowohl horizontale als auch vertikale Header, muss die Render-Funktion für die _horizontalen_ Header definiert werden. Gibt es nur vertikale Header, können die Render-Funktionen dort definiert werden.
+
+Die `render` Funktion kann auf verschiedene Arten wie folgt verwendet werden.
+Alle Methoden sind auch in diesem Beispiel demonstriert: [render-cell.tsx](https://github.com/public-ui/kolibri/blob/23ebb42d1ce3c8d1e4c74a5c7972842d5e4203fe/packages/samples/react/src/components/table/render-cell.tsx#L34)
+
+1. String Rückgabewert:
+
+```tsx
+{
+  render: (_el, cell) => `Index: ${cell.label}`,
+}
+```
+
+2. Node mit textContent füllen
+
+```tsx
+{
+  render: (el, cell) => {
+    el.textContent = `Index: ${cell.label}`;
+  },
+}
+```
+
+3. Node mit innerHTML füllen - ⚠️ Hierbei unbedingt darauf achten, Werte zu sanitizen, um XXS vermeiden.
+
+```tsx
+{
+  render: (el, cell) => {
+    el.innerHTML = `<strong>${cell.label}</strong>`;
+  },
+}
+```
+
+4. React render-function verwenden
+
+```tsx
+import { createReactRenderElement } from '@public-ui/react';
+{
+  render: (el) => {
+    getRoot(createReactRenderElement(el)).render(
+      <div>
+        <KolInputText _label="Input" />
+        <KolButton _label="Save" />
+      </div>,
+    );
+  },
+}
+```
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+Bei der Table-Komponente werden zahlreiche Attribut-Definitionen dem Tabellen-Markup hinzugefügt, um die Screenreader bestmöglich zu unterstützen.
+
+Aktuell werden folgende Attribute von der Komponente verwaltet: `role`, `scope` und `aria-\*`.
+
+Das heißt beispielsweise, dass bei den Spaltenüberschriften automatisch entweder die Rolle `colheader` oder `rowheader` gesetzt wird. Darüber hinaus wird der Scope entweder auf `col`/`colgroup` oder `row`/`rowgroup` gesetzt. Ähnlich dieser Automatismen werden auch die `aria-\*`-Attribute je nach Relevanz gesetzt.
+
+Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: <kol-link _href="" _label=""></kol-link>https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
+
+## Links und Referenzen
+
+- <kol-link _href="https://www.w3.org/WAI/tutorials/tables/" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.digitala11y.com/aria-sort-properties/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/library/aria/table-sortable" _target="_blank"></kol-link>
+- <kol-link _href="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://stackoverflow.com/questions/1312236/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _target="_blank"></kol-link>
+
+<Readme />
+
+<ExampleLink component="table-stateful" />
+
+## Live-Editor
+
+<LiveEditorCompact component="table-stateful" />

docs/30-components/table-stateless.mdx

@@ -0,0 +1,92 @@
+---
+title: TableStateless
+description: Beschreibung, Spezifikation und Beispiele für die TableStateless-Komponente.
+tags:
+  - Table
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../readmes/table-stateless/readme.md';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+Synonyme: Data Table, Details List, Data Grid
+
+<kol-alert _type="warning" _variant="card">
+	<kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
+</kol-alert>
+
+Die **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](./table-stateful).
+
+TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
+
+## Selektion
+
+Über die `_selection`-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist `_selection` definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
+
+```ts
+const data = [
+	{ id: '1001', name: 'Marianne Musterfrau' },
+	{ id: '1002', name: 'Max Mustermann' },
+];
+const selection: KoliBriTableSelection = {
+	/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
+	label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
+
+	/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
+	selectedKeys: ['1002'],
+
+	/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
+	keyPropertyName: 'id',
+};
+```
+
+## Beispiel
+
+```jsx
+<KolTableStateless
+  _label="Table for demonstration purposes"
+  _headerCells={{
+    horizontal: [
+      [
+        { key: 'value', label: 'Value', sortDirection: 'ASC' },
+      ],
+    ],
+  }}
+  _data={DATA}
+  _selection={{
+    label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
+    selectedKeys: ['1002'],
+    keyPropertyName: 'id',
+  }}
+  _on={{
+    /**
+     * @param {MouseEvent} _
+     * @param {SortEventPayload} payload
+     * @param {string} payload.key
+     * @param {KoliBriSortDirection} payload.currentSortDirection
+     */
+    onSort: (_: MouseEvent, payload: SortEventPayload) => {
+      /* Perform sort, update `DATA` and headers `sortDirection` */
+    },
+
+    /**
+     * @param {Event} _
+     * @param {string[]} selection - Array of selected keys
+     */
+    onSelectionChange: (_: Event, selection: string[]) => {
+      /* Update selection.selectedKeys state */
+    }
+  }}
+/>
+```
+
+<Readme />
+
+<ExampleLink component="table-stateless" />
+
+## Live-Editor
+
+<LiveEditorCompact component="table-stateless" />

docs/30-components/table.mdx

@@ -1,5 +1,5 @@
 ---
-title: Table
+title: Table (Deprecated)
 description: Beschreibung, Spezifikation und Beispiele für die Table-Komponente.
 tags:
   - Table
@@ -8,16 +8,14 @@ tags:
   - Beispiele
 ---
 
-import Readme from '../../readmes/popover/readme.md';
+import Readme from '../../readmes/table-stateful/readme.md';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
 
-# Table
-
 Synonyme: Data Table, Details List, Data Grid
 
 <kol-alert _type="warning" _variant="card">
-	<kol-badge _color="#fb4509" _label="Deprecated"></kol-badge>KolTable ist veraltet, bitte stattdessen <kol-link _label="KolTableStateful" _href="https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateful/readme.md"></kol-link> verwenden, die API und Funktionalität sind identisch.
+	<kol-badge _color="#fb4509" _label="Deprecated"></kol-badge>KolTable ist veraltet, bitte stattdessen <kol-link _label="KolTableStateful" _href="table-stateful"></kol-link> verwenden, die API und Funktionalität sind identisch.
 </kol-alert>
 
 Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
@@ -51,7 +49,7 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 
 ### Pagination
 
-Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="../components/pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
+Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="../pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
 
 #### KoliBriTableHeaders
 

docs/30-components/tooltip.mdx

@@ -7,8 +7,6 @@ tags:
   - Spezifikation
 ---
 
-import Readme from '../../readmes/tooltip/readme.md';
-
 # Tooltip
 
 Synonyme: Inline Dialog, Popover
@@ -43,5 +41,3 @@ Um die Breite eines Tooltips zu konfigurieren, kann auf dem umgebenden Container
 ## Links und Referenzen
 
 - <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips" _target="_blank"></kol-link>
-
-<Readme />

package.json

@@ -41,9 +41,9 @@
 		"@leanup/form": "1.3.54",
 		"@mdx-js/react": "3.1.0",
 		"@monaco-editor/react": "4.6.0",
-		"@public-ui/components": "2.2.0",
-		"@public-ui/react": "2.2.0",
-		"@public-ui/themes": "2.2.0",
+		"@public-ui/components": "3.0.0-alpha.0",
+		"@public-ui/react": "3.0.0-alpha.0",
+		"@public-ui/themes": "3.0.0-alpha.0",
 		"classnames": "2.5.1",
 		"docusaurus-lunr-search": "3.5.0",
 		"mermaid": "10.9.3",