fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...
Some checks failed
Deploy Application / deploy (push) Has been cancelled
Some checks failed
Deploy Application / deploy (push) Has been cancelled
This commit is contained in:
213
docs/components/README.md
Normal file
213
docs/components/README.md
Normal file
@@ -0,0 +1,213 @@
|
||||
# Component System
|
||||
|
||||
Das Component-System ermöglicht wiederverwendbare UI-Komponenten mit konsistenter Syntax und Design-Token-Integration.
|
||||
|
||||
## Syntax
|
||||
|
||||
Alle Components verwenden die `<x-*>` Syntax:
|
||||
|
||||
```html
|
||||
<x-button variant="primary" size="sm">Click me</x-button>
|
||||
```
|
||||
|
||||
## Verfügbare Components
|
||||
|
||||
### Button
|
||||
|
||||
Vielseitige Button-Komponente mit verschiedenen Varianten und Größen.
|
||||
|
||||
**Syntax:**
|
||||
```html
|
||||
<x-button variant="primary|secondary|danger|success|ghost"
|
||||
size="sm|md|lg"
|
||||
href="/url"
|
||||
disabled>
|
||||
Button Text
|
||||
</x-button>
|
||||
```
|
||||
|
||||
**Attribute:**
|
||||
- `variant` (optional): `primary`, `secondary`, `danger`, `success`, `ghost` (Standard: `primary`)
|
||||
- `size` (optional): `sm`, `md`, `lg` (Standard: `md`)
|
||||
- `href` (optional): Wenn gesetzt, wird ein `<a>`-Tag statt `<button>` verwendet
|
||||
- `disabled` (optional): Deaktiviert den Button
|
||||
- `type` (optional): Button-Typ (`button`, `submit`, `reset`) - nur bei `<button>` relevant
|
||||
- `full-width` (optional): Button nimmt volle Breite ein
|
||||
- `icon` (optional): Icon-HTML für Icon-Button
|
||||
|
||||
**Beispiele:**
|
||||
|
||||
```html
|
||||
<!-- Primary Button -->
|
||||
<x-button variant="primary">Save</x-button>
|
||||
|
||||
<!-- Secondary Button als Link -->
|
||||
<x-button variant="secondary" href="/admin">Back</x-button>
|
||||
|
||||
<!-- Small Danger Button -->
|
||||
<x-button variant="danger" size="sm">Delete</x-button>
|
||||
|
||||
<!-- Disabled Button -->
|
||||
<x-button variant="primary" disabled>Processing...</x-button>
|
||||
|
||||
<!-- Full Width Button -->
|
||||
<x-button variant="primary" full-width>Submit Form</x-button>
|
||||
```
|
||||
|
||||
### Card
|
||||
|
||||
Card-Komponente für strukturierte Inhaltsblöcke.
|
||||
|
||||
**Syntax:**
|
||||
```html
|
||||
<x-card variant="default|highlighted|success|warning|error"
|
||||
title="Card Title"
|
||||
subtitle="Subtitle"
|
||||
footer="Footer Content">
|
||||
Card content here
|
||||
</x-card>
|
||||
```
|
||||
|
||||
**Attribute:**
|
||||
- `variant` (optional): `default`, `highlighted`, `success`, `warning`, `error` (Standard: `default`)
|
||||
- `title` (optional): Card-Titel
|
||||
- `subtitle` (optional): Card-Untertitel
|
||||
- `footer` (optional): Footer-Text
|
||||
- `image-src` (optional): Bild-URL für Card-Header
|
||||
- `image-alt` (optional): Alt-Text für Bild
|
||||
|
||||
**Beispiele:**
|
||||
|
||||
```html
|
||||
<!-- Einfache Card -->
|
||||
<x-card>
|
||||
<p>Card content</p>
|
||||
</x-card>
|
||||
|
||||
<!-- Card mit Titel -->
|
||||
<x-card title="Welcome">
|
||||
<p>Welcome to our platform!</p>
|
||||
</x-card>
|
||||
|
||||
<!-- Card mit Variante -->
|
||||
<x-card variant="success" title="Success" subtitle="Operation completed">
|
||||
<p>Your changes have been saved.</p>
|
||||
</x-card>
|
||||
|
||||
<!-- Card mit Bild -->
|
||||
<x-card image-src="/images/hero.jpg" image-alt="Hero Image" title="Featured">
|
||||
<p>Featured content here</p>
|
||||
</x-card>
|
||||
```
|
||||
|
||||
### Badge
|
||||
|
||||
Kleine Status-Indikatoren und Labels.
|
||||
|
||||
**Syntax:**
|
||||
```html
|
||||
<x-badge variant="default|success|warning|error|info"
|
||||
size="sm|md|lg"
|
||||
pill>
|
||||
Badge Text
|
||||
</x-badge>
|
||||
```
|
||||
|
||||
**Attribute:**
|
||||
- `variant` (optional): `default`, `success`, `warning`, `error`, `info` (Standard: `default`)
|
||||
- `size` (optional): `sm`, `md`, `lg` (Standard: `md`)
|
||||
- `pill` (optional): Rundet die Badge ab (pill-Form)
|
||||
|
||||
**Beispiele:**
|
||||
|
||||
```html
|
||||
<!-- Default Badge -->
|
||||
<x-badge>New</x-badge>
|
||||
|
||||
<!-- Success Badge -->
|
||||
<x-badge variant="success">Active</x-badge>
|
||||
|
||||
<!-- Warning Badge -->
|
||||
<x-badge variant="warning">Pending</x-badge>
|
||||
|
||||
<!-- Pill Badge -->
|
||||
<x-badge variant="info" pill>Beta</x-badge>
|
||||
|
||||
<!-- Small Badge -->
|
||||
<x-badge variant="error" size="sm">Error</x-badge>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Konsistente Verwendung
|
||||
|
||||
1. **Immer Components verwenden**: Verwende `<x-button>` statt `<button class="btn">`
|
||||
2. **Varianten statt Custom CSS**: Nutze `variant` Attribute statt eigene CSS-Klassen
|
||||
3. **Design Tokens**: Components nutzen automatisch Design Tokens für konsistente Styles
|
||||
|
||||
### Performance
|
||||
|
||||
- Components werden server-side gerendert
|
||||
- Keine JavaScript-Dependencies für statische Components
|
||||
- Caching für bessere Performance
|
||||
|
||||
### Accessibility
|
||||
|
||||
- Components generieren semantisch korrektes HTML
|
||||
- ARIA-Attribute werden automatisch gesetzt wo nötig
|
||||
- Keyboard-Navigation wird unterstützt
|
||||
|
||||
## Migration von alten Templates
|
||||
|
||||
### Von direkten CSS-Klassen
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--primary btn--sm">Click</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary" size="sm">Click</x-button>
|
||||
```
|
||||
|
||||
### Von admin-* Klassen
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="admin-btn admin-btn--secondary">Click</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="secondary">Click</x-button>
|
||||
```
|
||||
|
||||
### Von <component> Syntax
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<component name="button" variant="primary">Click</component>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary">Click</x-button>
|
||||
```
|
||||
|
||||
## Template Linting
|
||||
|
||||
Verwende den `design:lint-templates` Command um Templates auf Component-Verwendung zu prüfen:
|
||||
|
||||
```bash
|
||||
php console.php design:lint-templates
|
||||
```
|
||||
|
||||
Der Linter erkennt:
|
||||
- Direkte CSS-Klassen-Verwendung
|
||||
- Deprecated `admin-*` Klassen
|
||||
- Alte `<component>` Syntax
|
||||
|
||||
## Modern Web Features
|
||||
|
||||
- [Search Component](./search.md) - Semantisches `<search>` Element (Baseline 2023)
|
||||
- [Popover Component](./popover.md) - Native Popover API (Baseline 2025)
|
||||
|
||||
## Weitere Components
|
||||
|
||||
Weitere Components werden kontinuierlich hinzugefügt. Siehe die einzelnen Component-Dateien in `src/Framework/View/Components/` für Details.
|
||||
|
||||
229
docs/components/migration-guide.md
Normal file
229
docs/components/migration-guide.md
Normal file
@@ -0,0 +1,229 @@
|
||||
# Component Migration Guide
|
||||
|
||||
Anleitung zur Migration von Templates auf die neue Component-Syntax.
|
||||
|
||||
## Übersicht
|
||||
|
||||
Dieser Guide hilft dabei, bestehende Templates von direkter CSS-Klassen-Verwendung auf die neue `<x-*>` Component-Syntax zu migrieren.
|
||||
|
||||
## Schritt-für-Schritt Migration
|
||||
|
||||
### Schritt 1: Template analysieren
|
||||
|
||||
Verwende den Linter um Probleme zu finden:
|
||||
|
||||
```bash
|
||||
php console.php design:lint-templates src/Application/Admin/templates/admin-index.view.php
|
||||
```
|
||||
|
||||
### Schritt 2: Button-Migration
|
||||
|
||||
**Pattern 1: Einfacher Button**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--primary">Save</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary">Save</x-button>
|
||||
```
|
||||
|
||||
**Pattern 2: Button als Link**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<a href="/admin" class="btn btn--secondary">Back</a>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="secondary" href="/admin">Back</x-button>
|
||||
```
|
||||
|
||||
**Pattern 3: Button mit Größe**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--primary btn--sm">Small Button</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary" size="sm">Small Button</x-button>
|
||||
```
|
||||
|
||||
**Pattern 4: Disabled Button**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--primary" disabled>Processing</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary" disabled>Processing</x-button>
|
||||
```
|
||||
|
||||
**Pattern 5: Admin-Button**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="admin-btn admin-btn--secondary">Click</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="secondary">Click</x-button>
|
||||
```
|
||||
|
||||
### Schritt 3: Card-Migration
|
||||
|
||||
**Pattern 1: Einfache Card**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<div class="card">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-card>
|
||||
<p>Content</p>
|
||||
</x-card>
|
||||
```
|
||||
|
||||
**Pattern 2: Card mit Header**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<div class="admin-card">
|
||||
<div class="admin-card__header">
|
||||
<h2 class="admin-card__title">Title</h2>
|
||||
</div>
|
||||
<div class="admin-card__body">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-card title="Title">
|
||||
<p>Content</p>
|
||||
</x-card>
|
||||
```
|
||||
|
||||
**Pattern 3: Card mit Variante**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<div class="admin-card admin-card--success">
|
||||
<p>Success message</p>
|
||||
</div>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-card variant="success">
|
||||
<p>Success message</p>
|
||||
</x-card>
|
||||
```
|
||||
|
||||
### Schritt 4: Badge-Migration
|
||||
|
||||
**Pattern 1: Einfache Badge**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<span class="badge badge--success">Active</span>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-badge variant="success">Active</x-badge>
|
||||
```
|
||||
|
||||
**Pattern 2: Admin-Badge**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<span class="admin-badge admin-badge--error">Error</span>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-badge variant="error">Error</x-badge>
|
||||
```
|
||||
|
||||
**Pattern 3: Pill Badge**
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<span class="badge badge--info badge--pill">Beta</span>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-badge variant="info" pill>Beta</x-badge>
|
||||
```
|
||||
|
||||
## Häufige Patterns
|
||||
|
||||
### In Loops
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<for items="{{$actions}}" as="action">
|
||||
<a href="{{$action['url']}}" class="btn btn--primary">
|
||||
{{$action['label']}}
|
||||
</a>
|
||||
</for>
|
||||
|
||||
<!-- Nachher -->
|
||||
<for items="{{$actions}}" as="action">
|
||||
<x-button variant="primary" href="{{$action['url']}}">
|
||||
{{$action['label']}}
|
||||
</x-button>
|
||||
</for>
|
||||
```
|
||||
|
||||
### Mit Bedingungen
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--primary" if="{{can_edit}}">Edit</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="primary" if="{{can_edit}}">Edit</x-button>
|
||||
```
|
||||
|
||||
### Mit zusätzlichen Attributen
|
||||
|
||||
```html
|
||||
<!-- Vorher -->
|
||||
<button class="btn btn--secondary" data-toggle="modal" aria-label="Open">
|
||||
Open Modal
|
||||
</button>
|
||||
|
||||
<!-- Nachher -->
|
||||
<x-button variant="secondary" data-toggle="modal" aria-label="Open">
|
||||
Open Modal
|
||||
</x-button>
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Problem: Component wird nicht gerendert
|
||||
|
||||
**Lösung:** Stelle sicher, dass die Component registriert ist:
|
||||
- Component-Klasse existiert in `src/Framework/View/Components/`
|
||||
- Component hat `#[ComponentName('...')]` Attribut
|
||||
- Component implementiert `StaticComponent` Interface
|
||||
|
||||
### Problem: Attribute werden nicht übernommen
|
||||
|
||||
**Lösung:**
|
||||
- Prüfe ob das Attribut in der Component-Klasse unterstützt wird
|
||||
- Verwende `class` Attribut für zusätzliche CSS-Klassen falls nötig
|
||||
|
||||
### Problem: Alte Syntax funktioniert noch
|
||||
|
||||
**Lösung:**
|
||||
- Die alte `<component name="...">` Syntax wird noch unterstützt, sollte aber migriert werden
|
||||
- Verwende den Linter um alte Syntax zu finden
|
||||
|
||||
## Migration-Checkliste
|
||||
|
||||
- [ ] Template mit Linter analysiert
|
||||
- [ ] Alle Buttons migriert
|
||||
- [ ] Alle Cards migriert
|
||||
- [ ] Alle Badges migriert
|
||||
- [ ] Template getestet
|
||||
- [ ] Keine Linter-Fehler mehr
|
||||
|
||||
## Automatische Migration (Zukünftig)
|
||||
|
||||
Ein `--fix` Flag für automatische Migration ist geplant, aber noch nicht implementiert. Bitte migriere Templates manuell nach diesem Guide.
|
||||
|
||||
174
docs/components/popover.md
Normal file
174
docs/components/popover.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Popover Component
|
||||
|
||||
Wiederverwendbare Popover-Komponente mit nativer Popover API.
|
||||
|
||||
## Baseline Status
|
||||
|
||||
**Baseline 2025**: Popover API ist Baseline Newly available.
|
||||
|
||||
## Verwendung
|
||||
|
||||
### Basis-Verwendung
|
||||
|
||||
```html
|
||||
<button popovertarget="my-popover">Open Popover</button>
|
||||
|
||||
<x-popover id="my-popover" type="auto">
|
||||
<p>Popover content</p>
|
||||
</x-popover>
|
||||
```
|
||||
|
||||
### Mit Positionierung
|
||||
|
||||
```html
|
||||
<button popovertarget="user-menu-popover">User Menu</button>
|
||||
|
||||
<x-popover id="user-menu-popover" type="auto" position="bottom-end">
|
||||
<ul role="menu">
|
||||
<li><a href="/profile">Profile</a></li>
|
||||
<li><a href="/settings">Settings</a></li>
|
||||
</ul>
|
||||
</x-popover>
|
||||
```
|
||||
|
||||
## Attribute
|
||||
|
||||
| Attribut | Typ | Standard | Beschreibung |
|
||||
|----------|-----|----------|-------------|
|
||||
| `id` | string | `auto-generated` | Popover ID (erforderlich für popovertarget) |
|
||||
| `type` | string | `auto` | Popover-Typ: `auto` oder `manual` |
|
||||
| `popover` | string | `auto` | Alias für `type` |
|
||||
| `position` | string | `null` | Position: `bottom-start`, `bottom-end`, `top-start`, `top-end` |
|
||||
| `anchor` | string | `null` | CSS Anchor Element ID (für Anchor Positioning) |
|
||||
| `aria-label` | string | `null` | ARIA label für accessibility |
|
||||
| `aria-labelledby` | string | `null` | ARIA labelledby für accessibility |
|
||||
|
||||
## Popover-Typen
|
||||
|
||||
### Auto Popover (`type="auto"`)
|
||||
|
||||
- Automatisches Dismissal beim Klick außerhalb
|
||||
- Automatisches Dismissal beim ESC-Key
|
||||
- Automatisches Dismissal beim Klick auf einen anderen Popover-Trigger
|
||||
- Automatisches Focus-Management
|
||||
|
||||
### Manual Popover (`type="manual"`)
|
||||
|
||||
- Manuelles Management erforderlich
|
||||
- Kein automatisches Dismissal
|
||||
- Für komplexe Interaktionen geeignet
|
||||
|
||||
## Positionierung
|
||||
|
||||
Die Komponente unterstützt verschiedene Positionierungen:
|
||||
|
||||
- `bottom-start` - Unten links
|
||||
- `bottom-end` - Unten rechts
|
||||
- `top-start` - Oben links
|
||||
- `top-end` - Oben rechts
|
||||
|
||||
## Trigger-Button
|
||||
|
||||
Der Trigger-Button benötigt das `popovertarget` Attribut:
|
||||
|
||||
```html
|
||||
<button popovertarget="my-popover" aria-haspopup="true" aria-expanded="false">
|
||||
Open Popover
|
||||
</button>
|
||||
```
|
||||
|
||||
Das `aria-expanded` Attribut wird automatisch aktualisiert, wenn der Popover geöffnet/geschlossen wird.
|
||||
|
||||
## Accessibility
|
||||
|
||||
Die Komponente ist vollständig accessibility-konform:
|
||||
|
||||
- Native Browser-Support für Keyboard-Navigation
|
||||
- Automatisches Focus-Management
|
||||
- ESC-Key Support (native)
|
||||
- ARIA-Attribute unterstützt
|
||||
- Screen Reader Support
|
||||
|
||||
## JavaScript Integration
|
||||
|
||||
Die Popover API funktioniert ohne JavaScript, aber für erweiterte Features kann JavaScript verwendet werden:
|
||||
|
||||
```javascript
|
||||
const popover = document.getElementById('my-popover');
|
||||
const trigger = document.querySelector('[popovertarget="my-popover"]');
|
||||
|
||||
// Popover öffnen
|
||||
popover.showPopover();
|
||||
|
||||
// Popover schließen
|
||||
popover.hidePopover();
|
||||
|
||||
// Popover togglen
|
||||
popover.togglePopover();
|
||||
|
||||
// Event Listener
|
||||
popover.addEventListener('toggle', (e) => {
|
||||
const isOpen = popover.matches(':popover-open');
|
||||
trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
```
|
||||
|
||||
## View Transitions
|
||||
|
||||
Die Komponente unterstützt View Transitions für animierte Übergänge:
|
||||
|
||||
```css
|
||||
[popover].admin-popover {
|
||||
view-transition-name: admin-popover;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS-Klassen
|
||||
|
||||
Die Komponente verwendet folgende CSS-Klassen:
|
||||
|
||||
- `.admin-popover` - Basis-Klasse
|
||||
- `.admin-popover--auto` - Auto Popover Variante
|
||||
- `.admin-popover--manual` - Manual Popover Variante
|
||||
- `.admin-popover--bottom-start` - Position bottom-start
|
||||
- `.admin-popover--bottom-end` - Position bottom-end
|
||||
- `.admin-popover--top-start` - Position top-start
|
||||
- `.admin-popover--top-end` - Position top-end
|
||||
|
||||
## Browser-Support
|
||||
|
||||
- Chrome 125+
|
||||
- Firefox 129+
|
||||
- Safari 18+
|
||||
- Edge 125+
|
||||
|
||||
## Migration
|
||||
|
||||
### Von Custom Dropdown migrieren
|
||||
|
||||
**Vorher:**
|
||||
```html
|
||||
<div class="dropdown" data-dropdown>
|
||||
<button data-dropdown-trigger="menu">Menu</button>
|
||||
<ul class="dropdown-menu" data-dropdown-content="menu">
|
||||
<li><a href="/item1">Item 1</a></li>
|
||||
<li><a href="/item2">Item 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Nachher:**
|
||||
```html
|
||||
<button popovertarget="menu-popover">Menu</button>
|
||||
|
||||
<x-popover id="menu-popover" type="auto" position="bottom-start">
|
||||
<ul role="menu">
|
||||
<li><a href="/item1">Item 1</a></li>
|
||||
<li><a href="/item2">Item 2</a></li>
|
||||
</ul>
|
||||
</x-popover>
|
||||
```
|
||||
|
||||
**JavaScript entfernen:**
|
||||
Das Custom Dropdown-Management JavaScript kann entfernt werden, da die Popover API native Funktionalität bietet.
|
||||
|
||||
150
docs/components/search.md
Normal file
150
docs/components/search.md
Normal file
@@ -0,0 +1,150 @@
|
||||
# Search Component
|
||||
|
||||
Wiederverwendbare Search-Komponente mit semantischem `<search>` Element.
|
||||
|
||||
## Baseline Status
|
||||
|
||||
**Baseline 2023**: `<search>` Element ist Baseline Newly available.
|
||||
|
||||
## Verwendung
|
||||
|
||||
### Basis-Verwendung
|
||||
|
||||
```html
|
||||
<x-search
|
||||
action="/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
```
|
||||
|
||||
### Mit Varianten
|
||||
|
||||
```html
|
||||
<!-- Header Variante -->
|
||||
<x-search
|
||||
action="/admin/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
variant="header"
|
||||
/>
|
||||
|
||||
<!-- Sidebar Variante -->
|
||||
<x-search
|
||||
action="/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
variant="sidebar"
|
||||
/>
|
||||
|
||||
<!-- Standalone Variante -->
|
||||
<x-search
|
||||
action="/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
variant="standalone"
|
||||
/>
|
||||
```
|
||||
|
||||
## Attribute
|
||||
|
||||
| Attribut | Typ | Standard | Beschreibung |
|
||||
|----------|-----|----------|-------------|
|
||||
| `action` | string | `/search` | Form action URL |
|
||||
| `method` | string | `get` | HTTP method (get/post) |
|
||||
| `name` | string | `q` | Input name attribute |
|
||||
| `placeholder` | string | `Search...` | Placeholder text |
|
||||
| `value` | string | `null` | Initial input value |
|
||||
| `variant` | string | `standalone` | Variant: `header`, `sidebar`, `standalone` |
|
||||
| `autocomplete` | boolean | `true` | Enable/disable autocomplete |
|
||||
| `aria-label` | string | `null` | ARIA label for accessibility |
|
||||
| `aria-describedby` | string | `null` | ARIA describedby for accessibility |
|
||||
| `id` | string | `auto-generated` | Input ID |
|
||||
|
||||
## Varianten
|
||||
|
||||
### Header Variante
|
||||
Für die Verwendung im Header-Bereich. Automatisch angepasste Breite und Positionierung.
|
||||
|
||||
### Sidebar Variante
|
||||
Für die Verwendung in der Sidebar. Optimiert für schmale Bereiche.
|
||||
|
||||
### Standalone Variante
|
||||
Für eigenständige Search-Formulare. Maximale Breite 600px, zentriert.
|
||||
|
||||
## Accessibility
|
||||
|
||||
Die Komponente ist vollständig accessibility-konform:
|
||||
|
||||
- Semantisches `<search>` Element
|
||||
- Visuell verstecktes Label für Screen Reader
|
||||
- ARIA-Attribute unterstützt
|
||||
- Keyboard-Navigation unterstützt
|
||||
- Focus-Management
|
||||
|
||||
## Beispiele
|
||||
|
||||
### Mit Autocomplete deaktiviert
|
||||
|
||||
```html
|
||||
<x-search
|
||||
action="/admin/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
autocomplete="false"
|
||||
/>
|
||||
```
|
||||
|
||||
### Mit ARIA-Label
|
||||
|
||||
```html
|
||||
<x-search
|
||||
action="/search"
|
||||
method="get"
|
||||
placeholder="Search..."
|
||||
aria-label="Search the website"
|
||||
/>
|
||||
```
|
||||
|
||||
## CSS-Klassen
|
||||
|
||||
Die Komponente verwendet folgende CSS-Klassen:
|
||||
|
||||
- `.admin-search` - Basis-Klasse
|
||||
- `.admin-search--header` - Header Variante
|
||||
- `.admin-search--sidebar` - Sidebar Variante
|
||||
- `.admin-search--standalone` - Standalone Variante
|
||||
- `.admin-search__input` - Input-Element
|
||||
- `.admin-search__submit` - Submit-Button
|
||||
- `.admin-search__icon` - Search-Icon
|
||||
|
||||
## Browser-Support
|
||||
|
||||
- Chrome 125+
|
||||
- Firefox 129+
|
||||
- Safari 18+
|
||||
- Edge 125+
|
||||
|
||||
## Migration
|
||||
|
||||
### Von `<form role="search">` migrieren
|
||||
|
||||
**Vorher:**
|
||||
```html
|
||||
<form class="admin-search" role="search" action="/search" method="get">
|
||||
<input type="search" name="q" placeholder="Search..." />
|
||||
</form>
|
||||
```
|
||||
|
||||
**Nachher:**
|
||||
```html
|
||||
<x-search
|
||||
action="/search"
|
||||
method="get"
|
||||
name="q"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
```
|
||||
|
||||
Die Komponente generiert automatisch das semantische `<search>` Element mit korrektem HTML-Struktur.
|
||||
|
||||
Reference in New Issue
Block a user