docs(vuexy): update VUEXY_COMPONENTS.md for post-PR-B1 single-SPA reality

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-05 20:33:33 +02:00
parent a4281df021
commit d1503ceadf

View File

@@ -8,7 +8,7 @@ Generated from Vuexy template v10.11.1 (`resources/vuexy-admin-v10.11.1/vue-vers
## 1. @core Components
Source: `resources/vuexy-admin-v10.11.1/vue-version/typescript-version/full-version/src/@core/components/`
Copied into: `apps/app/src/@core/components/` and `apps/portal/src/@core/components/`
Copied into: `apps/app/src/@core/components/`
### Form Element Wrappers (`@core/components/app-form-elements/`)
@@ -128,15 +128,15 @@ Computed: `_layoutClasses`, `isLessThanOverlayNavBreakpoint`, `isVerticalNavMini
|--------|------|---------|---------|
| **default** | `layouts/default.vue` | All authenticated pages | Switches between vertical/horizontal nav based on config store |
| **blank** | `layouts/blank.vue` | Login, error pages | Minimal layout — no navigation |
| **OrganizerLayout** | `layouts/OrganizerLayout.vue` | _Not yet wired_ | Organizer experience — thin wrapper around `DefaultLayoutWithVerticalNav` |
| **PortalLayout** | `layouts/PortalLayout.vue` | _Not yet wired_ | Volunteer/crew portal scaffold — top bar + main + footer regions, content TBD |
| **PublicLayout** | `layouts/PublicLayout.vue` | _Not yet wired_ | Unauthenticated scaffold for login / password-reset / public form viewer |
| **OrganizerLayout** | `layouts/OrganizerLayout.vue` | All pages under `pages/{events,members,organisation,account-settings,dashboard,invitations}/**` | Organizer experience — thin wrapper around `DefaultLayoutWithVerticalNav` |
| **PortalLayout** | `layouts/PortalLayout.vue` | All pages under `pages/portal/**` | Volunteer/crew portal — custom navbar with two modes (platform / event) + mobile drawer; container max-width 1440px, navbar height 64px |
| **PublicLayout** | `layouts/PublicLayout.vue` | All pages under `pages/register/**` | Unauthenticated scaffold for public form viewer / registration flow |
The three `*Layout.vue` files were added as foundation skeletons in
WS-3 session 1a (2026-04-29). They exist so the upcoming router
consolidation has stable, semantically named targets to point
`meta.layout` at; they are NOT yet referenced by any route. Content
migration into `PortalLayout.vue` happens in a later WS-3 session.
`PortalLayout` is a **custom implementation** — it does NOT use @layouts VerticalNavLayout. Modes (set via route `meta.navMode`):
- **Platform mode** (`navMode: 'platform'`): Crewli logo + optional page title + UserAvatarMenu
- **Event mode** (`navMode: 'event'`): Org name + event name + back link
- Mobile: VNavigationDrawer hamburger menu with user info + nav links + logout
- Desktop: UserAvatarMenu component in navbar
**default** delegates to:
- `layouts/components/DefaultLayoutWithVerticalNav.vue` — Vertical sidebar (default)
@@ -150,21 +150,6 @@ migration into `PortalLayout.vue` happens in a later WS-3 session.
- `NavbarThemeSwitcher.vue` — Light/Dark/System switcher
- `Footer.vue` — Copyright footer
### Portal Layouts (`apps/portal/src/layouts/`)
| Layout | File | Used In | Purpose |
|--------|------|---------|---------|
| **portal** | `layouts/portal.vue` | All authenticated portal pages | Custom navbar with two modes + mobile drawer |
| **blank** | `layouts/blank.vue` | Login, registration, password reset | Minimal layout |
| **default** | `layouts/default.vue` | Fallback (delegates to portal) | Wrapper |
**Portal layout** is a **custom implementation** — does NOT use @layouts VerticalNavLayout. Features:
- **Platform mode** (`navMode: 'platform'`): Crewli logo + optional page title + UserAvatarMenu
- **Event mode** (`navMode: 'event'`): Org name + event name + back link
- Mobile: VNavigationDrawer hamburger menu with user info + nav links + logout
- Desktop: UserAvatarMenu component in navbar
- Container max-width: 1440px, navbar height: 64px
### Route Meta for Layout Selection
```typescript
@@ -433,27 +418,27 @@ Two approaches from Vuexy:
### 3.9 Portal Page Patterns
#### Event List (Card Grid)
**Reference:** `apps/portal/src/pages/evenementen/index.vue`
**Reference:** `apps/app/src/pages/portal/evenementen/index.vue`
- VRow + VCol (cols="12" sm="6" md="4") responsive grid
- Custom EventCard component per event (gradient banner, status chip, hover animation)
- VSkeletonLoader for loading, VAlert for empty state
#### Event Detail (Hash-based Tabs)
**Reference:** `apps/portal/src/pages/evenementen/[eventId].vue`
**Reference:** `apps/app/src/pages/portal/evenementen/[eventId].vue`
- VTabs with hash-based routing (#overzicht, #rooster, #claimen, #informatie)
- VWindow + VWindowItem per tab with dedicated tab components
- StatusCard shows different UI per approval status (pending/approved/rejected)
- Conditional tab visibility based on approval status
#### Registration (Multi-step Form with VeeValidate + Zod)
**Reference:** `apps/portal/src/pages/register/[eventSlug].vue`
**Reference:** `apps/app/src/pages/register/[public_token].vue`
- VForm with VeeValidate field binding + Zod schemas from `@/schemas/`
- Conditional form fields based on event configuration
- Real-time email duplicate checking
- Password creation for new users
#### Auth Pages (Centered Card)
**Reference:** `apps/portal/src/pages/login.vue`
**Reference:** `apps/app/src/pages/login.vue`
- VCard centered on blank layout
- VTextField with password visibility toggle
- VAlert for error messages, VBtn with loading state
@@ -673,7 +658,7 @@ Options // { page, itemsPerPage, sortBy, groupBy, search } for data t
|-----------|---------|---------|
| **OrganisationSwitcher** | Switch between organisations | Navigation sidebar |
### Portal Components (`apps/portal/src/components/`)
### Portal Components (`apps/app/src/components/portal/`)
| Component | Purpose | Used By |
|-----------|---------|---------|