From fe680de606b4ca5acd5f4c27b850b3668d06b1b5 Mon Sep 17 00:00:00 2001 From: Leopoldadmin Date: Wed, 8 Jul 2026 06:49:51 +0000 Subject: [PATCH] add component_inventory.md with full component documentation --- docs/component_inventory.md | 131 ++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 docs/component_inventory.md diff --git a/docs/component_inventory.md b/docs/component_inventory.md new file mode 100644 index 0000000..01c2b9a --- /dev/null +++ b/docs/component_inventory.md @@ -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)`