Vue 3 + Vite

Leaderboard filters

Pass weapons to the leaderboard template or LeaderboardHeader in display order, using API objects with Id and Name (legacy strings also work). The first five appear as links; remaining weapons appear in an “Other weapons” dropdown. Neither component hardcodes the weapon catalog. An empty list shows no weapon controls. activeWeapon optionally controls the selection using the weapon object, its ID, or a legacy string.

Both components emit weapon-selected with the original supplied weapon. The consuming app uses its Id to fetch results and replaces fencers with the response; weapon IDs, HR IDs, and parent IDs remain distinct. The dropdown shows the selected weapon name, and the results heading follows the current selection. For example: <LeaderboardHeader :weapons="weapons" :active-weapon="selectedWeaponId" @weapon-selected="loadWeaponResults" />.

The leaderboard template includes “Filter by Rating” buttons (A, B, C, D, E, U) and an instant, case-insensitive name search above the list. Select a rank to filter; select it again to show all ranks. Both filters work together on the supplied fencers array and preserve original positions and click payloads. Rank uses the displayed M2Rating or first M2Ratings entry; missing ratings count as U. The consuming app should supply ratings for the active weapon. Preview every rank under Templates/LeaderboardPage/AllRanks.

Fencer profile

Pass weapons to FencerProfilePage to show the profile weapon selector. Options use { Id, Name } objects or legacy strings and default to an empty array. activeWeapon can be the selected object or ID. The page forwards weapon-selected with the original option so the parent can fetch and supply weapon-specific profile statistics. The selector does not filter mixed event results locally. Pronouns remain hidden.

FencerProfilePage keeps the profile header, summary cards, and yearly charts, and adds exported FencerRatingsCard, FencerRatingHistoryCard, and FencerEventHistoryCard components. Pass the existing API response as fencerStats (Person, PersonStats, and YearStats). Yearly charts use YearWinPercentage and TotalIndicator; YTD uses the current calendar year. Summary ratings refer to the first weapon in Person.M2Ratings.

Pass ratingHistory as an array of awards with WeaponId, Weapon.Name, Rating, FormattedRating, and DateEarned to show historical awards. When omitted, the chart/list shows only the earned dates in Person.M2Ratings and the all-time-high card displays a dash. An explicit empty array means no historical awards. The chart plots individual dated awards by weapon, without inferring ratings between dates. Undated or unrecognized ratings remain in the list but are omitted from the chart.

For full progression, the backend must return earlier awards, including repeat awards. For weapon-filtered event history, it must also supply an explicit weapon ID on event results or return prefiltered results. The current page shows every supplied event under “Event history.”

The page emits back-to-leaderboard and forwards header changePage events. The leaderboard template emits fencer-selected with the original fencer and selected weapon. The consuming app owns routing and fetching; listen for these events to open the profile and restore the leaderboard selection on return.

Preview under Templates/FencerProfile using npm run watch:storybook. BrandenProfile uses the supplied public profile fields; WithSampleRatingHistory adds clearly illustrative earlier awards. Empty and partial data stories are also available.

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.

| Component | Optional props | Placement | | ------------------------------------------- | ---------------------------------------- | ------------------------------------------------- | | SupportLinks (exported) | ratingsSupportUrl, paymentSupportUrl | Wherever the parent inserts it | | TournamentDetails, TournamentDetailPage | Both URL props | Below the tournament description | | GridLayout | Both URL props | Below the event or results grid | | PoolResults | ratingsSupportUrl | Below pool results | | Cart | paymentSupportUrl | Below checkout | | RegistrationPage | paymentSupportUrl | Below checkout on desktop; above events on mobile |

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.

For seed badges, pass :card-props="{ positionSource: 'seed' }" to GridLayout (or position-source="seed" directly to FencerListCard). The parent must sort registered fencers by numeric Seed, with invalid or missing seeds last and a stable identity tie-breaker. Seed badges preserve gaps and show a dash for invalid or missing seeds; they never substitute pool positions or row numbers. The default badge behavior remains Place, then PoolPosition, then row number for other pages such as final results. Waitlist ordering stays parent-owned.

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.