Components Documentation

This section documents the Vue.js components that make up the Imperium Maledictum user interface.

Component Architecture

The application follows Vue 3 composition API patterns with single-file components (SFCs).

Core Components

Navigation & Layout

• Navigation - App navigation bar and mobile menu
• ThemeToggle - Dark/light mode switcher
• SearchableList - Reusable filtered list component

Character Management

• Character Card - Character summary display
• Character Sheet - Full character view
• Character Editor - Character creation and editing
• Skill Editor - Skill advances and specializations
• Talent Selector - Talent selection dropdown

Journal System

• Journal Entry - Individual journal entry display
• Journal Editor - Create and edit journal entries
• Journal List - Chronological entry listing

Reference Tools

• Rulebook Browser - Skills and talents reference
• Armory Browser - Equipment catalog with filters
• Equipment Card - Individual item display

Utility Components

• TokenSetup - Cloud sync configuration
• Modal Dialog - Reusable modal system
• Loading Spinner - Loading states

Component Guidelines

Mobile Responsiveness

All components follow responsive design principles:

• Desktop: > 768px
• Tablet: 768px
• Phone: < 480px

Accessibility

• ARIA labels for screen readers
• Keyboard navigation support
• Color contrast compliance

State Management

Components integrate with Pinia stores:

• characterStore - Character data management
• journalStore - Journal entries
• Global state synchronization

Styling

• Tailwind CSS utility classes
• Scoped component styles
• CSS custom properties for theming

Testing

• Component unit tests
• Integration testing patterns
• Visual regression testing