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:
@@ -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 |
|
||||
|-----------|---------|---------|
|
||||
|
||||
Reference in New Issue
Block a user