Enhance user communication and improve UI components
- Update CLAUDE.md to mandate informal "Du" form for user communication in all UI text and emails. - Modify LoginForm and RegisterForm components to reflect informal language in validation messages and placeholders. - Add secure connection indicators in LoginForm for user awareness. - Update alert component styles for better visual feedback. - Introduce experimenta company information document for user reference.
This commit is contained in:
Bastian Masanek
@@ -32,6 +32,14 @@ Dieses Design System definiert die visuelle Identität und Komponenten-Bibliothe
|
||||
2. [Typografie](#typografie)
|
||||
3. [Spacing & Layout](#spacing--layout)
|
||||
4. [Komponenten](#komponenten)
|
||||
- [Buttons](#1-buttons)
|
||||
- [Cards](#2-cards)
|
||||
- [Status Messages](#3-status-messages)
|
||||
- [Progress Bar](#4-progress-bar)
|
||||
- [Forms](#5-forms)
|
||||
- [Links](#6-links)
|
||||
- [Logo](#7-logo)
|
||||
- [Icons](#8-icons)
|
||||
5. [Animationen & Transitions](#animationen--transitions)
|
||||
6. [Accessibility](#accessibility)
|
||||
|
||||
@@ -806,6 +814,263 @@ Wird in den Design-Vorlagen verwendet. Sollte als Vue-Komponente gespeichert wer
|
||||
|
||||
---
|
||||
|
||||
### 8. Icons
|
||||
|
||||
**Icon Library:** [Lucide Vue Next](https://lucide.dev) (bereits installiert)
|
||||
|
||||
Das Projekt verwendet **lucide-vue-next** für alle Icons. Lucide bietet über 1.500+ hochwertige, konsistente Icons, die perfekt mit shadcn-nuxt und unserem Design System harmonieren.
|
||||
|
||||
#### Installation
|
||||
|
||||
```bash
|
||||
# Bereits installiert in package.json
|
||||
pnpm add lucide-vue-next
|
||||
```
|
||||
|
||||
#### Verwendung
|
||||
|
||||
**Import:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// Named imports für tree-shaking (empfohlen)
|
||||
import { Mail, Lock, CheckCircle, AlertCircle, Info, X } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Icon mit Standard-Größe -->
|
||||
<Mail />
|
||||
|
||||
<!-- Icon mit Custom-Größe und Farbe -->
|
||||
<Mail :size="24" class="text-accent" />
|
||||
|
||||
<!-- Icon mit Tailwind-Klassen -->
|
||||
<CheckCircle class="w-6 h-6 text-success" />
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Häufig verwendete Icons
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
// Auth & User
|
||||
Mail,
|
||||
Lock,
|
||||
User,
|
||||
UserCircle,
|
||||
LogIn,
|
||||
LogOut,
|
||||
|
||||
// Shopping
|
||||
ShoppingCart,
|
||||
CreditCard,
|
||||
Package,
|
||||
|
||||
// Navigation
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
|
||||
// Status & Feedback
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
Info,
|
||||
XCircle,
|
||||
|
||||
// Actions
|
||||
Trash2,
|
||||
Edit,
|
||||
Plus,
|
||||
Minus,
|
||||
Search,
|
||||
} from 'lucide-vue-next'
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Icons in Komponenten
|
||||
|
||||
**Alert mit Icon:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert variant="error">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
<AlertTitle>Fehler</AlertTitle>
|
||||
<AlertDescription> Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut. </AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Button mit Icon:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ShoppingCart } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="btn-primary flex items-center gap-2">
|
||||
<ShoppingCart :size="20" />
|
||||
<span>In den Warenkorb</span>
|
||||
</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Login Form mit Icons:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Mail, Lock } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-6">
|
||||
<!-- E-Mail Input -->
|
||||
<div class="form-field">
|
||||
<label for="email" class="form-label flex items-center gap-2">
|
||||
<Mail :size="18" class="text-accent" />
|
||||
<span>E-Mail-Adresse</span>
|
||||
</label>
|
||||
<input type="email" id="email" class="form-input" />
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="form-field">
|
||||
<label for="password" class="form-label flex items-center gap-2">
|
||||
<Lock :size="18" class="text-accent" />
|
||||
<span>Passwort</span>
|
||||
</label>
|
||||
<input type="password" id="password" class="form-input" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Icon-Größen
|
||||
|
||||
```vue
|
||||
<!-- Extra Small (16px) -->
|
||||
<Mail :size="16" />
|
||||
|
||||
<!-- Small (20px) - Standard für Buttons -->
|
||||
<Mail :size="20" />
|
||||
|
||||
<!-- Medium (24px) - Standard für Inputs -->
|
||||
<Mail :size="24" />
|
||||
|
||||
<!-- Large (32px) - Status Icons -->
|
||||
<CheckCircle :size="32" />
|
||||
|
||||
<!-- Custom mit Tailwind -->
|
||||
<Mail class="w-8 h-8" />
|
||||
```
|
||||
|
||||
#### Icon-Farben
|
||||
|
||||
```vue
|
||||
<!-- Experimenta Colors -->
|
||||
<Mail class="text-experimenta-primary" />
|
||||
<CheckCircle class="text-experimenta-accent" />
|
||||
<AlertTriangle class="text-experimenta-red" />
|
||||
|
||||
<!-- Semantic Colors -->
|
||||
<CheckCircle class="text-success" />
|
||||
<AlertCircle class="text-error" />
|
||||
<AlertTriangle class="text-warning" />
|
||||
<Info class="text-info" />
|
||||
|
||||
<!-- White/Muted -->
|
||||
<Mail class="text-white" />
|
||||
<Mail class="text-white/90" />
|
||||
<Mail class="text-white/70" />
|
||||
```
|
||||
|
||||
#### Status Icons Pattern
|
||||
|
||||
Für Status-Meldungen verwenden wir konsistente Icons:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Success -->
|
||||
<div class="flex items-center gap-3 text-success">
|
||||
<CheckCircle :size="24" />
|
||||
<span>Erfolgreich!</span>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div class="flex items-center gap-3 text-error">
|
||||
<XCircle :size="24" />
|
||||
<span>Fehler aufgetreten</span>
|
||||
</div>
|
||||
|
||||
<!-- Warning -->
|
||||
<div class="flex items-center gap-3 text-warning">
|
||||
<AlertTriangle :size="24" />
|
||||
<span>Achtung!</span>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex items-center gap-3 text-info">
|
||||
<Info :size="24" />
|
||||
<span>Hinweis</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Best Practices
|
||||
|
||||
1. **Tree-Shaking:** Nutze Named Imports statt `import * as Icons`
|
||||
|
||||
```vue
|
||||
✅ import { Mail, Lock } from 'lucide-vue-next'
|
||||
❌ import * as Icons from 'lucide-vue-next'
|
||||
```
|
||||
|
||||
2. **Accessibility:** Verwende `aria-label` wenn Icons ohne Text stehen
|
||||
|
||||
```vue
|
||||
<button aria-label="Schließen">
|
||||
<X :size="20" />
|
||||
</button>
|
||||
```
|
||||
|
||||
3. **Konsistenz:** Verwende innerhalb einer Komponente einheitliche Icon-Größen
|
||||
|
||||
4. **Farben:** Nutze Tailwind-Klassen für Farben statt inline-Styles
|
||||
|
||||
5. **Stroke Width:** Lucide Icons haben eine Standardstärke von 2. Für dünnere/dickere Linien:
|
||||
```vue
|
||||
<Mail :size="24" :stroke-width="1.5" />
|
||||
```
|
||||
|
||||
#### Icon-Übersicht
|
||||
|
||||
Alle verfügbaren Icons: [https://lucide.dev/icons/](https://lucide.dev/icons/)
|
||||
|
||||
**Kategorien:**
|
||||
|
||||
- **Arrows & Chevrons:** ChevronRight, ArrowRight, ChevronDown
|
||||
- **Shopping:** ShoppingCart, CreditCard, Package, Truck
|
||||
- **User & Auth:** User, UserCircle, LogIn, LogOut, Lock, Key
|
||||
- **Status:** CheckCircle, XCircle, AlertTriangle, Info
|
||||
- **Actions:** Plus, Minus, Edit, Trash2, Search, Filter
|
||||
- **Media:** Image, File, FileText, Download, Upload
|
||||
- **Navigation:** Menu, X, Home, Settings, HelpCircle
|
||||
|
||||
---
|
||||
|
||||
## Animationen & Transitions
|
||||
|
||||
### Pulse (für Status Icons)
|
||||
|
||||
Reference in New Issue
Block a user