@dcrackel/hematournamentui 1.0.713 → 1.0.714

package/dist/hematournamentui-tailwind.css

@@ -21,6 +21,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -242,6 +243,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
@@ -290,6 +294,9 @@
   .left-1 {
     left: calc(var(--spacing) * 1);
   }
+  .left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .left-11 {
     left: calc(var(--spacing) * 11);
   }
@@ -311,6 +318,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .order-first {
     order: -9999;
   }
@@ -359,14 +369,17 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-auto {
+    margin: auto;
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .mx-2\.5 {
-    margin-inline: calc(var(--spacing) * 2.5);
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
   }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
@@ -656,6 +669,9 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-\[calc\(100dvh-2rem\)\] {
+    max-height: calc(100dvh - 2rem);
+  }
   .max-h-screen {
     max-height: 100vh;
   }
@@ -665,6 +681,9 @@
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -821,6 +840,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[calc\(100\%-2rem\)\] {
+    width: calc(100% - 2rem);
+  }
   .w-full {
     width: 100%;
   }
@@ -839,12 +861,18 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-36 {
+    min-width: calc(var(--spacing) * 36);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -886,6 +914,10 @@
     --tw-border-spacing-y: calc(var(--spacing) * 1);
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-full {
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1594,6 +1626,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .text-\[12rem\] {
     font-size: 12rem;
   }
@@ -1635,6 +1670,12 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1737,6 +1778,9 @@
   .text-toggleBackground {
     color: #A9C4D6;
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1746,6 +1790,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .accent-bright {
+    accent-color: #6190f2;
+  }
   .accent-primary {
     accent-color: #141B33;
   }
@@ -1873,6 +1920,19 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .backdrop\:bg-black\/20 {
+    &::backdrop {
+      background-color: color-mix(in srgb, #000 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+      }
+    }
+  }
+  .backdrop\:bg-secondary\/60 {
+    &::backdrop {
+      background-color: color-mix(in oklab, #2B324B 60%, transparent);
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -2115,6 +2175,11 @@
       border-color: #6190f2;
     }
   }
+  .focus-visible\:bg-dropdownSelect {
+    &:focus-visible {
+      background-color: #D5E4EE;
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2152,6 +2217,11 @@
       opacity: 40%;
     }
   }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
   .md\:m-9 {
     @media (width >= 48rem) {
       margin: calc(var(--spacing) * 9);
@@ -2272,6 +2342,11 @@
       display: none;
     }
   }
+  .md\:inline-block {
+    @media (width >= 48rem) {
+      display: inline-block;
+    }
+  }
   .md\:h-7 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 7);
@@ -2397,9 +2472,9 @@
       flex-direction: row;
     }
   }
-  .md\:flex-nowrap {
+  .md\:flex-wrap {
     @media (width >= 48rem) {
-      flex-wrap: nowrap;
+      flex-wrap: wrap;
     }
   }
   .md\:items-stretch {
@@ -2407,11 +2482,6 @@
       align-items: stretch;
     }
   }
-  .md\:justify-start {
-    @media (width >= 48rem) {
-      justify-content: flex-start;
-    }
-  }
   .md\:rounded-lg {
     @media (width >= 48rem) {
       border-radius: var(--radius-lg);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.713",
+  "version": "1.0.714",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/index.js

@@ -1,42 +1,43 @@
-export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
-export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
-export { default as BaseRadioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
-export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
-export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
-
-export { default as Breadcrumb } from './stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue';
-export { default as BaseButton } from './stories/Molecules/Buttons/BaseButton/BaseButton.vue';
-export { default as FilterAndSortBar } from './stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
-export { default as FilterUpcomingPast } from './stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
-export { default as BaseModal } from './stories/Molecules/Modals/BaseModal/BaseModal.vue';
-export { default as LoadingModal } from './stories/Molecules/Modals/LoadingModal/LoadingModal.vue';
-export { default as EventWizardModal } from './stories/Molecules/Modals/EventWizardModal/EventWizardModal.vue';
-
-export { default as AddressAutocomplete } from './stories/Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue';
-export { default as DatePicker } from './stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue';
-export { default as DropDownMenu } from './stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
-export { default as GridContainer } from './stories/Organisms/Grids/GridContainer.vue';
-export { default as PoolGrid } from './stories/Organisms/Containers/PoolGrid/PoolGrid.vue';
-export { default as BracketDirectorAssignmentCard } from './stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
-export { default as BracketDirectorAssignmentPanel } from './stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
-export { default as ImageCropper } from './stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
-export { default as TextBoxEditor } from './stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
-export { default as EditEventWizard } from './stories/Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
-
-export { default as TournamentManagement } from './stories/Templates/TournamentManagement/TournamentManagement.vue';
-export { default as ListEvents } from './stories/Templates/TournamentManagement/ListEvents/ListEvents.vue';
-
-export { default as AdminLeftMenu } from './stories/Templates/Menus/Admin/AdminLeftMenu.vue';
-export { default as EventAttendance } from './stories/Templates/EventManagement/EventAttendance/EventAttendance.vue';
-export { default as PoolManagement } from './stories/Templates/EventManagement/PoolManagement/PoolManagement.vue';
-export { default as StaffList } from './stories/Templates/EventManagement/StaffList/StaffList.vue';
-export { default as PoolLive } from './stories/Templates/EventManagement/PoolLive/PoolLive.vue';
-export { default as PoolResults } from './stories/Templates/EventManagement/PoolResults/PoolResults.vue';
-export { default as Bracket } from './stories/Templates/EventManagement/Bracket/Bracket.vue';
-export { default as EditEventInfo } from './stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue';
-export { default as EventFinalResults } from './stories/Templates/EventManagement/EventFinalResults/EventFinalResults.vue';
-export { default as KioskDisplay } from './stories/Templates/EventManagement/KioskDisplay/KioskDisplay.vue';
-export { default as PersonManagement } from './stories/Templates/PersonManagement/PersonManagement.vue';
-export { default as ClubManagement } from './stories/Templates/ClubManagement/ClubManagement.vue';
-export { default as Assignment } from './stories/Templates/Assignment/Assignment.vue';
-export { default as PenaltyReport } from './stories/Templates/EventManagement/Penalties/PenaltyReport.vue';
+export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
+export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
+export { default as BaseRadioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
+export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
+export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
+
+export { default as Breadcrumb } from './stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue';
+export { default as BaseButton } from './stories/Molecules/Buttons/BaseButton/BaseButton.vue';
+export { default as FilterAndSortBar } from './stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
+export { default as FilterUpcomingPast } from './stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
+export { default as BaseModal } from './stories/Molecules/Modals/BaseModal/BaseModal.vue';
+export { default as BracketDirectorsModal } from './stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.vue';
+export { default as LoadingModal } from './stories/Molecules/Modals/LoadingModal/LoadingModal.vue';
+export { default as EventWizardModal } from './stories/Molecules/Modals/EventWizardModal/EventWizardModal.vue';
+
+export { default as AddressAutocomplete } from './stories/Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue';
+export { default as DatePicker } from './stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue';
+export { default as DropDownMenu } from './stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+export { default as GridContainer } from './stories/Organisms/Grids/GridContainer.vue';
+export { default as PoolGrid } from './stories/Organisms/Containers/PoolGrid/PoolGrid.vue';
+export { default as BracketDirectorAssignmentCard } from './stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+export { default as BracketDirectorAssignmentPanel } from './stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
+export { default as ImageCropper } from './stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+export { default as TextBoxEditor } from './stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
+export { default as EditEventWizard } from './stories/Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
+
+export { default as TournamentManagement } from './stories/Templates/TournamentManagement/TournamentManagement.vue';
+export { default as ListEvents } from './stories/Templates/TournamentManagement/ListEvents/ListEvents.vue';
+
+export { default as AdminLeftMenu } from './stories/Templates/Menus/Admin/AdminLeftMenu.vue';
+export { default as EventAttendance } from './stories/Templates/EventManagement/EventAttendance/EventAttendance.vue';
+export { default as PoolManagement } from './stories/Templates/EventManagement/PoolManagement/PoolManagement.vue';
+export { default as StaffList } from './stories/Templates/EventManagement/StaffList/StaffList.vue';
+export { default as PoolLive } from './stories/Templates/EventManagement/PoolLive/PoolLive.vue';
+export { default as PoolResults } from './stories/Templates/EventManagement/PoolResults/PoolResults.vue';
+export { default as Bracket } from './stories/Templates/EventManagement/Bracket/Bracket.vue';
+export { default as EditEventInfo } from './stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue';
+export { default as EventFinalResults } from './stories/Templates/EventManagement/EventFinalResults/EventFinalResults.vue';
+export { default as KioskDisplay } from './stories/Templates/EventManagement/KioskDisplay/KioskDisplay.vue';
+export { default as PersonManagement } from './stories/Templates/PersonManagement/PersonManagement.vue';
+export { default as ClubManagement } from './stories/Templates/ClubManagement/ClubManagement.vue';
+export { default as Assignment } from './stories/Templates/Assignment/Assignment.vue';
+export { default as PenaltyReport } from './stories/Templates/EventManagement/Penalties/PenaltyReport.vue';

package/src/stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.stories.js

@@ -0,0 +1,49 @@
+import { ref, watch } from 'vue';
+import BracketDirectorsModal from './BracketDirectorsModal.vue';
+import {
+  availableDirectors,
+  availableRings,
+  plannedDirectingStations
+} from '../../../Templates/EventManagement/Bracket/BracketPlannedSuggestions.js';
+
+export default {
+  title: 'Molecules/Modals/BracketDirectorsModal',
+  component: BracketDirectorsModal,
+  args: { show: true, availableDirectors, rings: availableRings, stations: plannedDirectingStations.slice(0, 2) },
+  argTypes: {
+    show: { control: 'boolean' },
+    availableDirectors: { control: 'object' },
+    rings: { control: 'object' },
+    stations: { control: 'object' }
+  },
+  render: args => ({
+    components: { BracketDirectorsModal },
+    setup() {
+      const show = ref(args.show);
+      const stations = ref(args.stations);
+      watch(
+        () => args.show,
+        value => {
+          show.value = value;
+        }
+      );
+      watch(
+        () => args.stations,
+        value => {
+          stations.value = value;
+        },
+        { deep: true }
+      );
+      function saveStations(value) {
+        stations.value = value;
+      }
+      return { args, show, stations, saveStations };
+    },
+    template:
+      '<div><button type="button" class="rounded bg-primary px-4 py-2 text-white" @click="show = true">Manage directors</button><BracketDirectorsModal v-bind="args" v-model:show="show" :stations="stations" @submit:stations="saveStations" /></div>'
+  })
+};
+export const StaffAndPoolDefaults = {};
+export const NoSelectedDirectors = { args: { stations: [] } };
+export const NoAvailableStaff = { args: { stations: [], availableDirectors: [] } };
+export const NoRings = { args: { rings: [] } };

package/src/stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.test.js

@@ -0,0 +1,129 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { afterEach, describe, expect, it } from 'vitest';
+import BracketDirectorsModal from './BracketDirectorsModal.vue';
+
+const directors = [
+  { PersonId: 1, DisplayName: 'Dave Smith', Color: '#2563eb', DefaultRingId: 1 },
+  { PersonId: 2, DisplayName: 'Terry Jones', Color: '#dc2626' }
+];
+const rings = [
+  { RingId: 1, RingName: 'Ring 1' },
+  { RingId: 2, RingName: 'Ring 2' },
+  { RingId: 3, RingName: 'Ring 3' }
+];
+const station = {
+  RingId: 1,
+  RingName: 'Ring 1',
+  Color: '#2563eb',
+  Director: { PersonId: 1, DisplayName: 'Dave Smith' }
+};
+const wrappers = [];
+const mountModal = async (props = {}) => {
+  const wrapper = mount(BracketDirectorsModal, {
+    attachTo: document.body,
+    global: { stubs: { Teleport: true } },
+    props: {
+      show: true,
+      availableDirectors: structuredClone(directors),
+      rings: structuredClone(rings),
+      stations: [structuredClone(station)],
+      ...props
+    }
+  });
+  wrappers.push(wrapper);
+  await nextTick();
+  return wrapper;
+};
+const dialog = () => document.querySelector('[data-testid="bracket-directors-modal"]');
+const checkbox = (wrapper, id) => wrapper.get('[data-director-id="' + id + '"]');
+const ringSelect = (wrapper, id) => wrapper.get('[data-ring-director-id="' + id + '"]');
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+describe('BracketDirectorsModal', () => {
+  it('starts from supplied DE assignments and adds a director who has no pool assignment', async () => {
+    const wrapper = await mountModal();
+    expect(dialog().open).toBe(true);
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    expect(checkbox(wrapper, 2).element.checked).toBe(false);
+    const before = JSON.parse(JSON.stringify(wrapper.props()));
+    await checkbox(wrapper, 2).setValue(true);
+    await ringSelect(wrapper, 2).setValue('2');
+    await wrapper.get('form').trigger('submit');
+    const payload = wrapper.emitted('submit:stations')[0][0];
+    expect(payload.map(item => [item.Director.PersonId, item.RingId, item.Color])).toEqual([
+      [1, 1, '#2563eb'],
+      [2, 2, '#dc2626']
+    ]);
+    expect(wrapper.props()).toEqual(before);
+    payload[0].Director.DisplayName = 'Changed';
+    expect(wrapper.props('stations')[0].Director.DisplayName).toBe('Dave Smith');
+    expect(wrapper.emitted('update:show')).toEqual([[false]]);
+  });
+
+  it('removes directors by unchecking them and can save an empty roster', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 1).setValue(false);
+    await wrapper.get('form').trigger('submit');
+    expect(wrapper.emitted('submit:stations')).toEqual([[[]]]);
+    expect(wrapper.props('stations')).toHaveLength(1);
+  });
+
+  it('allows a draft ring swap and requires unique rings before saving', async () => {
+    const second = {
+      RingId: 2,
+      RingName: 'Ring 2',
+      Color: '#dc2626',
+      Director: { PersonId: 2, DisplayName: 'Terry Jones' }
+    };
+    const wrapper = await mountModal({ stations: [station, second] });
+    await ringSelect(wrapper, 1).setValue('2');
+    expect(wrapper.get('[role="alert"]').text()).toContain('different ring');
+    expect(wrapper.get('button[type="submit"]').attributes('disabled')).toBeDefined();
+    await wrapper.get('form').trigger('submit');
+    expect(wrapper.emitted('submit:stations')).toBeUndefined();
+    await ringSelect(wrapper, 2).setValue('1');
+    await wrapper.get('form').trigger('submit');
+    expect(
+      wrapper.emitted('submit:stations')[0][0].map(item => [item.Director.PersonId, item.RingId, item.Color])
+    ).toEqual([
+      [1, 2, '#2563eb'],
+      [2, 1, '#dc2626']
+    ]);
+  });
+
+  it('cancels without emitting changes and discards the draft when reopened', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 1).setValue(false);
+    await wrapper.get('[aria-label="Close director assignments"]').trigger('click');
+    expect(wrapper.emitted('submit:stations')).toBeUndefined();
+    await wrapper.setProps({ show: false });
+    expect(dialog().open).toBe(false);
+    await wrapper.setProps({ show: true });
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    await wrapper.get('dialog').trigger('cancel');
+    expect(wrapper.emitted('update:show')).toEqual([[false], [false]]);
+  });
+
+  it('accepts staff added while open without losing input drafts and reconciles parent-owned station changes', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 2).setValue(true);
+    await ringSelect(wrapper, 2).setValue('2');
+    await wrapper.setProps({ availableDirectors: [...directors, { PersonId: 3, DisplayName: 'Michael Cord' }] });
+    expect(checkbox(wrapper, 2).element.checked).toBe(true);
+    expect(ringSelect(wrapper, 2).element.value).toBe('2');
+    expect(checkbox(wrapper, 3).element.checked).toBe(false);
+    await wrapper.setProps({ stations: [] });
+    expect(checkbox(wrapper, 1).element.checked).toBe(false);
+    expect(checkbox(wrapper, 2).element.checked).toBe(false);
+  });
+
+  it('degrades gracefully for missing staff or rings and includes previously selected directors', async () => {
+    const wrapper = await mountModal({ availableDirectors: [null, {}, { PersonId: 0 }], rings: [] });
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    expect(wrapper.get('[role="alert"]').text()).toContain('Choose a ring');
+    expect(wrapper.get('button[type="submit"]').attributes('disabled')).toBeDefined();
+    await wrapper.setProps({ stations: [] });
+    expect(wrapper.text()).toContain('No directors available.');
+  });
+});

package/src/stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <Teleport to="body">
+    <dialog
+      ref="dialog"
+      aria-label="DE directors"
+      data-testid="bracket-directors-modal"
+      class="fixed inset-0 m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xl overflow-y-auto rounded-xl border border-dropdownSelect bg-neutral p-0 text-primaryHighlight shadow-xl backdrop:bg-secondary/60"
+      @cancel.prevent="close"
+      @click="close"
+    >
+      <form class="p-5" @submit.prevent="submit" @click.stop>
+        <div class="mb-4 flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-xl font-bold">Directors</h2>
+            <p class="mt-1 text-sm text-quaternary">Select DE directors and choose their rings.</p>
+          </div>
+          <button
+            type="button"
+            aria-label="Close director assignments"
+            class="flex h-8 w-8 flex-none items-center justify-center rounded text-xl text-quaternary hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+            @click="close"
+          >
+            &times;
+          </button>
+        </div>
+        <p v-if="!draft.length" class="rounded border border-dropdownSelect p-4 text-sm text-quaternary">
+          No directors available.
+        </p>
+        <div class="space-y-3">
+          <div
+            v-for="row in draft"
+            :key="row.Director.PersonId"
+            class="flex items-center gap-3 rounded-lg border border-dropdownSelect px-3 py-3"
+          >
+            <label class="flex min-w-0 flex-1 cursor-pointer items-center gap-3">
+              <input
+                v-model="row.Selected"
+                type="checkbox"
+                :data-director-id="row.Director.PersonId"
+                :aria-label="'Include ' + row.Director.DisplayName + ' in DE'"
+                class="h-5 w-5 flex-none accent-bright"
+              />
+              <span
+                v-if="row.Color"
+                class="h-2.5 w-2.5 flex-none rounded-full"
+                :style="{ backgroundColor: row.Color }"
+                aria-hidden="true"
+              ></span>
+              <span class="min-w-0 wrap-break-word text-sm font-semibold">{{ row.Director.DisplayName }}</span>
+            </label>
+            <select
+              v-model="row.RingId"
+              :disabled="!row.Selected"
+              :data-ring-director-id="row.Director.PersonId"
+              :aria-label="'Ring for ' + row.Director.DisplayName"
+              class="w-28 flex-none rounded border border-dropdownSelect bg-white px-2 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright disabled:opacity-50"
+            >
+              <option value="">Choose ring</option>
+              <option v-for="ring in ringOptions" :key="ring.RingId" :value="ring.RingId" :disabled="ring.Disabled">
+                {{ ring.RingName }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <p v-if="error" role="alert" class="mt-3 text-sm text-alarm">{{ error }}</p>
+        <div class="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            class="rounded border border-dropdownSelect px-4 py-2 text-sm hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+            @click="close"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            :disabled="Boolean(error)"
+            class="rounded bg-primary px-4 py-2 text-sm font-semibold text-neutral hover:bg-primaryHighlight focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Save assignments
+          </button>
+        </div>
+      </form>
+    </dialog>
+  </Teleport>
+</template>
+
+<script>
+import {
+  createDirectorDraft,
+  reconcileDirectorDraft,
+  createDirectorStations,
+  getDirectorDraftError,
+  getRingOptions
+} from '../../../Util/bracketDirectors.js';
+
+export default {
+  name: 'BracketDirectorsModal',
+  emits: ['update:show', 'submit:stations'],
+  props: {
+    show: { type: Boolean, default: false },
+    availableDirectors: { type: Array, default: () => [] },
+    rings: { type: Array, default: () => [] },
+    stations: { type: Array, default: () => [] }
+  },
+  data() {
+    return { draft: [] };
+  },
+  computed: {
+    ringOptions() {
+      return getRingOptions(this.rings);
+    },
+    error() {
+      return getDirectorDraftError(this.draft, this.rings);
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(value) {
+        if (value) this.resetDraft();
+        this.$nextTick(this.syncDialog);
+      }
+    },
+    stations: {
+      deep: true,
+      handler() {
+        if (this.show) this.resetDraft();
+      }
+    },
+    availableDirectors: {
+      deep: true,
+      handler() {
+        if (!this.show) return;
+        this.draft = reconcileDirectorDraft(this.availableDirectors, this.stations, this.draft);
+      }
+    }
+  },
+  mounted() {
+    this.syncDialog();
+  },
+  methods: {
+    resetDraft() {
+      this.draft = createDirectorDraft(this.availableDirectors, this.stations);
+    },
+    syncDialog() {
+      const dialog = this.$refs.dialog;
+      if (!dialog) return;
+      if (this.show && !dialog.open) {
+        dialog.showModal();
+        return;
+      }
+      if (!this.show && dialog.open) dialog.close();
+    },
+    close() {
+      this.$emit('update:show', false);
+    },
+    submit() {
+      const stations = createDirectorStations(this.draft, this.rings);
+      if (!stations) return;
+      this.$emit('submit:stations', stations);
+      this.close();
+    }
+  }
+};
+</script>