bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Select Component Variants and Styles for Improved Consistency

Browse Source 
- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.
This commit is contained in:
Bastian Masanek
2025-11-06 10:25:35 +01:00
parent 58fd2fd64a
commit 68395951dc
8 changed files with 211 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
app/pages/internal/styleguide.vue
View File

@@ -5,8 +5,10 @@
* Protected by Basic Auth via server/middleware/internal-auth.ts
*/
import { ref } from 'vue'
import { AlertCircle, CheckCircle } from 'lucide-vue-next'
import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
definePageMeta({
layout: 'styleguide',
@@ -26,6 +28,12 @@ const copyCode = async (code: string) => {
console.error('Failed to copy:', err)
}
}
// Select component examples state
const selectBasic = ref('')
const selectError = ref('')
const selectDisabled = ref('disabled-option')
const selectCountry = ref('DE')
</script>
<template>
@@ -33,7 +41,7 @@ const copyCode = async (code: string) => {
<div class="max-w-7xl mx-auto">
<!-- Header -->
<header class="mb-12">
<h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experimenta Design System</h1>
<h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experience Design System</h1>
<p class="text-xl text-white/90 mb-6">
Component library and design tokens for my.experimenta.science
</p>
@@ -477,6 +485,106 @@ const copyCode = async (code: string) => {
</div>
</div>
<!-- Select / Dropdown -->
<div>
<h4 class="text-xl font-semibold text-white mb-4">Select / Dropdown</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Basic Select -->
<div>
<label class="form-label">Basic Select</label>
<Select v-model="selectBasic">
<SelectTrigger>
<SelectValue placeholder="Bitte wählen" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
</SelectContent>
</Select>
</div>
<!-- Select with Error -->
<div>
<label class="form-label">Select mit Fehler *</label>
<Select v-model="selectError">
<SelectTrigger variant="error">
<SelectValue placeholder="Bitte wählen" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
</SelectContent>
</Select>
<p class="form-error">
<AlertCircle class="w-4 h-4" />
Bitte wähle eine Option
</p>
</div>
<!-- Disabled Select -->
<div>
<label class="form-label">Disabled Select</label>
<Select v-model="selectDisabled" disabled>
<SelectTrigger>
<SelectValue placeholder="Nicht verfügbar" />
</SelectTrigger>
<SelectContent>
<SelectItem value="disabled-option">Option</SelectItem>
</SelectContent>
</Select>
</div>
<!-- Real-World Example (Country) -->
<div>
<label class="form-label">Land *</label>
<Select v-model="selectCountry">
<SelectTrigger>
<SelectValue placeholder="Land auswählen" />
</SelectTrigger>
<SelectContent>
<SelectItem value="DE">Deutschland</SelectItem>
<SelectItem value="AT">Österreich</SelectItem>
<SelectItem value="CH">Schweiz</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Select Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Import --&gt;
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
&lt;!-- Basic Select --&gt;
&lt;Select v-model="selectedValue"&gt;
&lt;SelectTrigger&gt;
&lt;SelectValue placeholder="Bitte wählen" /&gt;
&lt;/SelectTrigger&gt;
&lt;SelectContent&gt;
&lt;SelectItem value="option1"&gt;Option 1&lt;/SelectItem&gt;
&lt;SelectItem value="option2"&gt;Option 2&lt;/SelectItem&gt;
&lt;/SelectContent&gt;
&lt;/Select&gt;
&lt;!-- Error State --&gt;
&lt;SelectTrigger variant="error"&gt;
&lt;SelectValue placeholder="Bitte wählen" /&gt;
&lt;/SelectTrigger&gt;
&lt;!-- Disabled --&gt;
&lt;Select v-model="value" disabled&gt;
...
&lt;/Select&gt;
&lt;!-- Size Variants --&gt;
&lt;SelectTrigger size="sm"&gt;...&lt;/SelectTrigger&gt;
&lt;SelectTrigger size="default"&gt;...&lt;/SelectTrigger&gt;
&lt;SelectTrigger size="lg"&gt;...&lt;/SelectTrigger&gt;</code></pre>
</details>
</div>
<!-- Error Messages -->
<div>
<label class="form-label">Form mit Fehlermeldung</label>
@@ -491,15 +599,33 @@ const copyCode = async (code: string) => {
Orange Border (WCAG AA konform) mit Icon für bessere Barrierefreiheit. Icon optional.
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-warning flex-shrink-0">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Dies ist eine Fehlermeldung mit gutem Kontrast
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-warning flex-shrink-0">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Dieses Feld ist erforderlich
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-warning flex-shrink-0">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Das Passwort muss mindestens 8 Zeichen lang sein
</p>
</div>
@@ -553,27 +679,51 @@ const copyCode = async (code: string) => {
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3>
<p class="text-sm text-white/70 mb-6">
Einheitlicher Stil mit orange/grünem Border für bessere Barrierefreiheit. Alle verwenden den gleichen Hintergrund mit farbigem Icon.
Einheitlicher Stil mit orange/grünem Border für bessere Barrierefreiheit. Alle verwenden den gleichen
Hintergrund mit farbigem Icon.
</p>
<div class="space-y-4">
<div class="status-message status-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="status-icon">
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
<span>Erfolgsmeldung - Aktion wurde ausgeführt</span>
</div>
<div class="status-message status-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="status-icon">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
<path d="M12 9v4" />
<path d="M12 17h.01" />
</svg>
<span>Warnung - Bitte beachten</span>
</div>
<div class="status-message status-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="status-icon">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<span>Fehlermeldung - Etwas ist schiefgelaufen</span>
</div>
<div class="status-message status-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="status-icon">
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<span>Information - Nützlicher Hinweis</span>
</div>
</div>
@@ -595,7 +745,8 @@ const copyCode = async (code: string) => {
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">shadcn-nuxt Alert Variants</h3>
<p class="text-sm text-white/70 mb-6">
Alert-Komponenten für Benachrichtigungen und Fehlermeldungen. Die "error" Variante verwendet Orange für bessere Barrierefreiheit (WCAG AA konform).
Alert-Komponenten für Benachrichtigungen und Fehlermeldungen. Die "error" Variante verwendet Orange für
bessere Barrierefreiheit (WCAG AA konform).
</p>
<div class="space-y-4">
@@ -746,7 +897,8 @@ const copyCode = async (code: string) => {
<h3 class="text-2xl font-semibold mb-4 text-white">Role Switcher Dropdown</h3>
<p class="text-white/90 mb-6">
Rollen-Auswahl-Dropdown für Benutzer. Ermöglicht das Wechseln zwischen verschiedenen Benutzerrollen
(Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen verfügbaren Optionen.
(Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen
verfügbaren Optionen.
</p>
<!-- Live Example -->
@@ -763,7 +915,8 @@ const copyCode = async (code: string) => {
<ul class="space-y-2 text-white/90 text-sm">
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border, Glassmorphism-Effekt</span>
<span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border,
Glassmorphism-Effekt</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
@@ -771,7 +924,8 @@ const copyCode = async (code: string) => {
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>
<span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap, Building2)</span>
<span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap,
Building2)</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1 text-experimenta-accent">✓</span>