web-cad/docs/component_inventory.md

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)