add component_inventory.md with full component documentation

2026-07-08 06:49:51 +00:00
parent e4a9446f9c
commit fe680de606
1 changed files with 131 additions and 0 deletions
@@ -0,0 +1,131 @@
+# 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-label` on 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)`