5.7 KiB
5.7 KiB
HMS Licht & Ton – Component Inventory
Overview
All components are built as Vue 3 single-file components (template + setup). In production (Nuxt 3), these map to .vue files in components/ and pages/ directories.
Shared Components
HmsLogo
- Purpose: SVG logo with white HMS text + orange (#EC6925) rectangular border
- Props:
size(Number, default: 40) - States: Default only (static SVG)
- Accessibility:
aria-label,role="img"
SpeakerIcon
- Purpose: SVG loudspeaker/light icon for equipment grid
- Props:
type(String: linearray, subwoofer, monitor, pointsource, column, movinghead) - States: Default (gray), Hover (orange via parent CSS)
- Accessibility:
aria-hidden="true"
AppHeader
- Purpose: Sticky navigation header with logo, desktop nav, mobile hamburger menu
- States: Default, Active nav item (
aria-current="page"), Mobile menu open/closed - Accessibility:
role="banner",aria-label,aria-expanded,aria-controls
AppFooter
- Purpose: 4-column footer with company info, navigation, contact, legal links
- States: Default only
- Accessibility:
role="contentinfo"
ServiceCard
- Purpose: Service offering card with icon, title, description
- Props:
icon,title,description - States: Default, Hover (border highlight)
EquipmentCard
- Purpose: Equipment listing card with image, badge, name, description, add-to-cart button
- Props:
item(Object: id, code, name, category, description, brand, image) - Emits:
click,add-to-cart - States: Default, Hover (border + shadow + lift), Focus (keyboard), No image (placeholder)
- Accessibility:
role="article",tabindex="0",aria-labelon add button
LoadingSkeleton
- Purpose: Shimmer animation skeleton cards for loading states
- Props:
count(Number, default: 6) - States: Shimmer animation (infinite)
- Accessibility:
aria-live="polite",aria-busy="true"
EmptyState
- Purpose: Empty state with icon, title, message, optional CTA button
- Props:
icon,title,message,actionLabel - Emits:
action - States: Default
- Accessibility:
role="status"
ErrorState
- Purpose: Error state with alert icon, title, message, retry button
- Props:
title,message - Emits:
retry - States: Default
- Accessibility:
role="alert"
Page Components
HomePage (#/)
- Sections: Hero (bg image + overlay), Speaker Grid (6 types), Über uns (stats + image), 8 Service Cards, Mietkatalog CTA
- States: Default (all content static)
ReferenzenPage (#/referenzen)
- States: Loading (skeleton), Loaded (gallery grid), Error (retry), Empty (no category results)
- Features: Category filter chips (Alle, Open-Air, Indoor, Rigging, Event), 9 real HMS photos
KontaktPage (#/kontakt)
- Sections: Büro/Lager/Öffnungszeiten cards, 2 Ansprechpartner cards, Contact form
- Form States: Default, Validation errors (inline), Submitting (spinner), Submitted (success message)
- Validation: Name*, Email* (regex), Message*, Privacy checkbox*
MietkatalogPage (#/mietkatalog)
- States: Loading (skeleton), Loaded (equipment grid), Error (retry), Empty (no search results)
- Features: Search input, Category filter chips (7 categories), Sort dropdown (name/brand/code), Result count
EquipmentDetailPage (#/mietkatalog/:id)
- States: Loading (skeleton), Loaded (detail view), Error (not found)
- Sections: Image/placeholder, Specs table, Rental form (date range + quantity), Related items grid
- Form: Mietbeginn, Mietende, Anzahl (stepper), Add to cart button
WarenkorbPage (#/warenkorb)
- States: Empty (no items), Cart with items, Submitting (spinner), Submitted (success)
- Features: Item list with quantity steppers, remove buttons, rental dates display, Request form (name*, email*, phone, event_date*, event_location*, message)
AdminPage (#/admin)
- States: Login form, Loading (spinner), Logged in (success)
- Features: Username + password fields, minimal design
NotFoundPage (#/404)
- States: Default (404 message + home link)
UX State Coverage Summary
| Page | Loading | Empty | Error | Partial | Success |
|---|---|---|---|---|---|
| Home | – | – | – | – | – |
| Referenzen | Skeleton | No category | Retry | Filtered | – |
| Kontakt | – | – | – | – | Form sent |
| Mietkatalog | Skeleton | No results | Retry | Filtered | – |
| Detail | Skeleton | – | Not found | – | – |
| Warenkorb | – | Empty cart | – | – | Request sent |
| Admin | Spinner | – | – | – | Logged in |
Component States Documentation
Button States
- Default:
background: var(--color-accent); color: white - Hover:
background: var(--color-accent-hover) - Active:
transform: translateY(0) - Disabled:
background: var(--secondary); cursor: not-allowed - Focus-visible:
outline: 2px solid var(--color-accent); outline-offset: 2px
Input States
- Default:
border: 1px solid var(--border-strong); background: var(--surface) - Focus:
border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(236,105,37,0.1) - Error:
border-color: var(--color-error) - Disabled:
background: var(--row); color: var(--secondary); cursor: not-allowed
Card States
- Default:
border: 1px solid var(--border); box-shadow: var(--shadow-sm) - Hover:
border-color: var(--secondary); box-shadow: var(--shadow-lg)
Chip States
- Default:
border: 1px solid var(--border-strong); background: var(--surface) - Hover:
border-color: var(--secondary) - Active:
background: var(--color-accent); color: white; border-color: var(--color-accent)