@dcrackel/meyersquaredui

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

Support form

ContactUsForm is exported by this package. It collects a required email, subject, and message, then emits submit:form with { email, fromEmail, subject, message }. fromEmail remains available for existing consumers; the contact API reads email. Values are trimmed and the emitted object is independent of the form's draft.

Message delivery belongs to the consuming app. Pass submitting while awaiting its API call, submitted only after confirmed success, and errorMessage on failure. Confirmed success clears the draft; failure preserves it for retry. The title prop defaults to Contact Support.

Example integration with the existing /api/v1/contact endpoint:

View the complete support form example. The example imports this repository's local exports; in a consuming app, import ContactUsForm from @dcrackel/meyersquaredui instead.

If you use an API helper instead of fetch, it must throw on an unsuccessful response so the app does not report a failed request as sent.

Preview the form and its Sending, Sent, and Failed states in Storybook under Organisms/Forms/ContactUsForm with npm run watch:storybook.

Support links on event pages

The parent app supplies the support destinations. URL props default to an empty string, and each link is hidden unless its URL is provided. Links use normal anchors in the current tab and do not require Vue Router.

For a parent-owned event page, import SupportLinks from this package and insert:

View the support links example.

The same attributes can be passed directly to TournamentDetails or GridLayout. Pass payment-support-url to Cart for checkout support. Supply the payment URL for the relevant organizer; omit it for events that should not link to CUFC.

Event fencer waitlist

Pass confirmed registrations to GridLayout.items and waitlisted fencers to its new waitlistItems prop, using FencerListCard as the card component. A separate Waitlist section shows the count and labels each fencer as Waitlisted. Empty waitlists are hidden. Set waitlistIsLoading to show placeholders while fetching the waitlist independently of the registered list.

View the event fencer list example.

Both lists accept the existing EventPerson shape with a nested Person, or flat fencer objects. Waitlisted card clicks emit the same grid-card-click event with the original item. FencerListCard also recognizes Status: 'WaitList' on its own, or can be marked with isWaitlisted. Waitlisted cards hide the seeding/placing badge. The supplied array order is preserved; the UI does not infer queue priority from pool positions or ratings.

The existing public event/public/persons/:eventId endpoint currently returns only Present and Absent registrations. The parent must obtain waitlisted records separately or from an updated API response; an empty waitlist prop does not mean the API has checked for waitlisted registrations. Keep the two arrays separate when wiring the event page. Joining the waitlist and promoting fencers remain actions owned by the parent app/backend.

Storybook includes EventFencersWithWaitlist, EventFencersWithoutWaitlist, WaitlistLoading, and WaitlistOnly under Organisms/Grids/GridLayout.