@dcrackel/hematournamentui 1.0.712 → 1.0.713

package/src/stories/Molecules/Menus/HoverActions/HoverActions.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    ref="trigger"
+    data-testid="bout-actions-trigger"
+    :tabindex="focusable && actions.length ? 0 : undefined"
+    :role="focusable && actions.length ? 'button' : undefined"
+    :aria-label="focusable ? label : undefined"
+    :aria-haspopup="focusable && actions.length ? 'menu' : undefined"
+    :aria-expanded="focusable && actions.length ? isOpen : undefined"
+    @mouseenter="queueOpen"
+    @mouseleave="queueClose"
+    @focusin="handleTriggerFocus"
+    @focusout="handleFocusOut"
+    @keydown="handleTriggerKeydown"
+    @click="closeMenu()"
+  >
+    <slot :isOpen="isOpen" />
+    <Teleport to="body">
+      <div
+        v-if="isOpen && actions.length"
+        ref="panel"
+        role="menu"
+        :aria-label="label"
+        data-testid="bout-actions-menu"
+        class="fixed z-[100] min-w-36 rounded-md border border-dropdownSelect bg-white p-1 text-primaryHighlight shadow-lg"
+        :style="panelStyle"
+        @mouseenter="keepOpen"
+        @mouseleave="queueClose"
+        @focusout="handleFocusOut"
+        @keydown="handlePanelKeydown"
+        @click.stop
+      >
+        <template v-for="action in actions" :key="action.id">
+          <div
+            v-if="action.description"
+            role="presentation"
+            data-testid="action-description"
+            class="cursor-default px-3 pt-2 text-left text-xs font-semibold text-bright"
+            :style="{ color: action.descriptionColor || undefined }"
+          >
+            {{ action.description }}
+          </div>
+          <button
+            type="button"
+            role="menuitem"
+            :data-action="action.id"
+            class="block w-full rounded px-3 py-2 text-left text-xs hover:bg-dropdownSelect focus-visible:bg-dropdownSelect focus-visible:outline-none disabled:opacity-50"
+            :disabled="action.disabled"
+            @click.stop="selectAction(action.id)"
+          >
+            {{ action.label }}
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+let activeMenu = null;
+
+export default {
+  name: 'HoverActions',
+  emits: ['action'],
+  props: {
+    actions: { type: Array, default: () => [] },
+    label: { type: String, default: 'Bout actions' },
+    focusable: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      isOpen: false,
+      isHovered: false,
+      openTimer: null,
+      closeTimer: null,
+      ignoreFocus: false,
+      triggerFocus: null,
+      panelStyle: { top: '0px', left: '0px' }
+    };
+  },
+  watch: {
+    actions: {
+      deep: true,
+      handler() {
+        if (!this.actions.length) this.closeMenu();
+        if (this.isOpen) this.$nextTick(this.positionPanel);
+      }
+    }
+  },
+  beforeUnmount() {
+    this.closeMenu();
+  },
+  methods: {
+    clearTimers() {
+      clearTimeout(this.openTimer);
+      clearTimeout(this.closeTimer);
+      this.openTimer = null;
+      this.closeTimer = null;
+    },
+    queueOpen() {
+      this.keepOpen();
+      if (this.isOpen || !this.actions.length) return;
+      this.openTimer = setTimeout(this.openMenu, 200);
+    },
+    keepOpen() {
+      this.isHovered = true;
+      this.clearTimers();
+    },
+    queueClose() {
+      this.isHovered = false;
+      this.clearTimers();
+      this.closeTimer = setTimeout(this.closeWhenOutside, 150);
+    },
+    containsElement(element) {
+      return Boolean(element && (this.$refs.trigger?.contains(element) || this.$refs.panel?.contains(element)));
+    },
+    closeWhenOutside() {
+      if (this.isHovered || this.containsElement(document.activeElement)) return;
+      this.closeMenu();
+    },
+    async openMenu() {
+      this.clearTimers();
+      if (this.isOpen || !this.actions.length) return;
+      activeMenu?.closeMenu();
+      activeMenu = this;
+      this.isOpen = true;
+      document.addEventListener('pointerdown', this.handleOutsidePointer);
+      window.addEventListener('scroll', this.handleViewportChange, true);
+      window.addEventListener('resize', this.handleViewportChange);
+      await this.$nextTick();
+      this.positionPanel();
+    },
+    positionPanel() {
+      const trigger = this.$refs.trigger?.getBoundingClientRect();
+      const panel = this.$refs.panel?.getBoundingClientRect();
+      if (!trigger || !panel) return;
+      const left = Math.max(4, Math.min(trigger.left, window.innerWidth - panel.width - 4));
+      const below = trigger.bottom + 4;
+      const top = below + panel.height <= window.innerHeight - 4 ? below : Math.max(4, trigger.top - panel.height - 4);
+      this.panelStyle = { top: top + 'px', left: left + 'px' };
+    },
+    closeMenu(restoreFocus = false) {
+      this.clearTimers();
+      this.isOpen = false;
+      if (activeMenu === this) activeMenu = null;
+      document.removeEventListener('pointerdown', this.handleOutsidePointer);
+      window.removeEventListener('scroll', this.handleViewportChange, true);
+      window.removeEventListener('resize', this.handleViewportChange);
+      if (!restoreFocus) return;
+      this.ignoreFocus = true;
+      const focusTarget =
+        this.triggerFocus || this.$refs.trigger?.querySelector('button:not(:disabled)') || this.$refs.trigger;
+      focusTarget?.focus();
+      this.ignoreFocus = false;
+    },
+    handleViewportChange(event) {
+      if (this.$refs.panel?.contains(event.target)) return;
+      this.closeMenu();
+    },
+    handleOutsidePointer(event) {
+      if (!this.containsElement(event.target)) this.closeMenu();
+    },
+    handleTriggerFocus(event) {
+      if (this.ignoreFocus) return;
+      this.triggerFocus = event.target;
+      this.openMenu();
+    },
+    handleFocusOut(event) {
+      if (!this.containsElement(event.relatedTarget)) this.queueClose();
+    },
+    async focusFirstAction() {
+      await this.openMenu();
+      this.$refs.panel?.querySelector('button:not(:disabled)')?.focus();
+    },
+    handleTriggerKeydown(event) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeMenu(true);
+        return;
+      }
+      const isWrapperActivation = event.target === this.$refs.trigger && ['Enter', ' '].includes(event.key);
+      if (event.key !== 'ArrowDown' && !isWrapperActivation) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.focusFirstAction();
+    },
+    handlePanelKeydown(event) {
+      const handlers = {
+        Escape: () => this.closeMenu(true),
+        ArrowDown: () => this.moveActionFocus(1),
+        ArrowUp: () => this.moveActionFocus(-1)
+      };
+      const handler = handlers[event.key];
+      if (!handler) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handler();
+    },
+    moveActionFocus(direction) {
+      const buttons = Array.from(this.$refs.panel.querySelectorAll('button:not(:disabled)'));
+      if (!buttons.length) return;
+      const currentIndex = buttons.indexOf(document.activeElement);
+      buttons[(currentIndex + direction + buttons.length) % buttons.length].focus();
+    },
+    selectAction(actionId) {
+      this.closeMenu(true);
+      this.$emit('action', actionId);
+    }
+  }
+};
+</script>

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

@@ -47,3 +47,9 @@ export const WithDEBout = {
     }
   }
 };
+
+export const WithDirector = {
+  args: {
+    bout: { ...getPoolsWithBouts[0], RefName: 'Alex Morgan' }
+  }
+};

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

@@ -1,18 +1,18 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import DirectorModal from './DirectorModal.vue';
-
-describe('DirectorModal backdrop', () => {
-  it('keeps the directing screen visible through a 25 percent backdrop', () => {
-    const wrapper = shallowMount(DirectorModal, {
-      props: {
-        show: true,
-        bout: { BoutId: 42 },
-        eventRules: {},
-        hostingClubColors: {}
-      }
-    });
-
-    expect(wrapper.find('[data-testid="director-modal-backdrop"]').classes()).toContain('bg-secondary/25');
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import DirectorModal from './DirectorModal.vue';
+
+describe('DirectorModal backdrop', () => {
+  it('keeps the directing screen visible through a 25 percent backdrop', () => {
+    const wrapper = shallowMount(DirectorModal, {
+      props: {
+        show: true,
+        bout: { BoutId: 42 },
+        eventRules: {},
+        hostingClubColors: {}
+      }
+    });
+
+    expect(wrapper.find('[data-testid="director-modal-backdrop"]').classes()).toContain('bg-secondary/25');
+  });
+});

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

@@ -51,7 +51,7 @@ export default {
       required: true
     },
     eventRules: {
-      type: Object,
+      type: Array,
       required: true
     },
     hostingClubColors: {

package/src/stories/Organisms/Cards/BoutCard/BoutCard.vue

@@ -10,7 +10,11 @@
     @start="onStart"
     @resume="onResume"
     @edit="onEdit"
-  />
+  >
+    <template v-if="$slots['mobile-details']" #mobile-details>
+      <slot name="mobile-details" />
+    </template>
+  </component>
 </template>
 
 <script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardActive/BoutCardActive.vue

@@ -51,16 +51,24 @@
 
     <!-- Mobile active -->
     <div
-      class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
-      :class="mobileCardActionClass"
+      class="flex md:hidden justify-between items-center px-3 py-2 border-alarm rounded-md bg-poolBox transition"
+      :class="[mobileCardActionClass, mobileCardLayoutClass]"
       @click="onCardClick"
     >
-      <div class="relative flex flex-col items-center">
+      <div class="relative h-12 w-12 flex-none">
         <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-        <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute top-0 left-0`"></div>
+        <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute bottom-0 -right-1`"></div>
+        <span
+          class="pointer-events-none absolute -top-1 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded bg-alarm px-1 py-0.5 text-[9px] font-bold leading-none text-white"
+        >
+          In progress
+        </span>
       </div>
 
-      <div class="text-center flex-1 mx-4">
+      <div class="text-center flex-1 min-w-0 mx-3">
+        <div v-if="$slots['mobile-details']" class="mb-1 min-w-0">
+          <slot name="mobile-details" />
+        </div>
         <BaseText :text="`${card.score1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold" />
         <div>
           <BaseText :text="displayTime" size="xs" color="quaternary" weight="bold" class="-mt-0.5" />
@@ -68,8 +76,8 @@
         <BaseText :text="`${card.score2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold" />
       </div>
 
-      <div class="relative flex flex-col items-center">
-        <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} absolute top-0 right-0`"></div>
+      <div class="relative h-12 w-12 flex-none">
+        <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} absolute bottom-0 -right-1`"></div>
         <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
       </div>
     </div>
@@ -101,6 +109,9 @@ export default {
     hasCard() {
       return !!this.card;
     },
+    mobileCardLayoutClass() {
+      return this.$slots['mobile-details'] ? 'border-2' : 'border';
+    },
     mobileCardActionClass() {
       if (this.editMode) return 'cursor-pointer';
       return 'cursor-default';
@@ -131,9 +142,7 @@ export default {
     'card.timeLeftSeconds': {
       immediate: true,
       handler(n) {
-        const next = Number(n ?? 0);
-        if (this.timerStatus !== 'running') this.remaining = next;
-        if (this.timerStatus === 'running' && this.remaining === 0) this.remaining = next;
+        this.remaining = Math.max(0, Math.floor(Number(n) || 0));
       }
     },
     timerStatus(n) {

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.vue

@@ -59,15 +59,16 @@
 
     <!-- Mobile -->
     <section
-      class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
+      class="relative flex flex-col md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
       :class="mobileCardActionClass"
+      @click="onCardClick"
     >
       <!-- main tappable area -->
-      <div class="flex flex-1 items-center p-4 min-w-0" @click="onCardClick">
+      <div class="flex w-full flex-1 items-center px-3 py-2 min-w-0">
         <!-- left portrait or index when reordering -->
-        <div v-if="!reorderMode" class="relative flex flex-col items-center flex-none">
+        <div v-if="!reorderMode" class="relative w-12 h-12 flex-none">
           <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-          <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
+          <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute bottom-0 -right-1 z-10`"></div>
         </div>
 
         <div v-if="reorderMode" class="flex flex-col items-center -mt-3 select-none flex-none">
@@ -76,8 +77,11 @@
         </div>
 
         <!-- center -->
-        <div class="text-center flex-1 mx-4 min-w-0 flex flex-col items-center justify-center leading-none">
-          <div class="flex items-center justify-center">
+        <div class="text-center flex-1 mx-3 min-w-0 flex flex-col items-center justify-center leading-none">
+          <div v-if="$slots['mobile-details']" class="mb-1 w-full min-w-0">
+            <slot name="mobile-details" />
+          </div>
+          <div class="flex max-w-full items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
               :text="c.fencer1.name"
@@ -90,7 +94,7 @@
 
           <BaseText text="vs" size="xs" color="quaternary" />
 
-          <div class="flex items-center justify-center">
+          <div class="flex max-w-full items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer2.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
               :text="c.fencer2.name"

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.stories.js

@@ -1,33 +1,33 @@
-import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
-
-export default {
-  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
-  component: BracketDirectorAssignmentCard,
-  args: {
-    station: {
-      RingId: 1,
-      RingName: 'Ring 1',
-      Color: '#2563eb',
-      Director: {
-        PersonId: 1001,
-        DisplayName: 'Alex Morgan',
-        PortraitUrl: ''
-      }
-    },
-    variant: 'assigned'
-  },
-  argTypes: {
-    station: { control: 'object' },
-    variant: { control: 'select', options: ['assigned', 'add'] },
-    addLabel: { control: 'text' }
-  }
-};
-
-export const Assigned = {};
-
-export const AddDirector = {
-  args: {
-    station: null,
-    variant: 'add'
-  }
-};
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+export default {
+  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
+  component: BracketDirectorAssignmentCard,
+  args: {
+    station: {
+      RingId: 1,
+      RingName: 'Ring 1',
+      Color: '#2563eb',
+      Director: {
+        PersonId: 1001,
+        DisplayName: 'Alex Morgan',
+        PortraitUrl: ''
+      }
+    },
+    variant: 'assigned'
+  },
+  argTypes: {
+    station: { control: 'object' },
+    variant: { control: 'select', options: ['assigned', 'add'] },
+    addLabel: { control: 'text' }
+  }
+};
+
+export const Assigned = {};
+
+export const AddDirector = {
+  args: {
+    station: null,
+    variant: 'add'
+  }
+};

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.test.js

@@ -1,45 +1,45 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
-
-const station = {
-  RingId: 3,
-  RingName: 'Ring 3',
-  Color: '#059669',
-  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
-};
-
-describe('BracketDirectorAssignmentCard', () => {
-  it('renders the ring, portrait, and director name', () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
-
-    expect(wrapper.find('img').attributes()).toMatchObject({
-      src: '/portrait.png',
-      alt: 'Sam Rivera portrait'
-    });
-    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
-    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
-    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
-    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
-    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
-  });
-
-  it('uses director initials when no portrait is supplied', () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
-      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
-    });
-
-    expect(wrapper.find('img').exists()).toBe(false);
-    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
-    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
-  });
-
-  it('emits add intent from the summary card', async () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
-
-    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
-
-    expect(wrapper.emitted('action:add')).toEqual([[]]);
-    expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+const station = {
+  RingId: 3,
+  RingName: 'Ring 3',
+  Color: '#059669',
+  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
+};
+
+describe('BracketDirectorAssignmentCard', () => {
+  it('renders the ring, portrait, and director name', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+
+    expect(wrapper.find('img').attributes()).toMatchObject({
+      src: '/portrait.png',
+      alt: 'Sam Rivera portrait'
+    });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
+    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
+    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+  });
+
+  it('uses director initials when no portrait is supplied', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
+      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
+    });
+
+    expect(wrapper.find('img').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
+    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
+  });
+
+  it('emits add intent from the summary card', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+
+    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
+
+    expect(wrapper.emitted('action:add')).toEqual([[]]);
+    expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
+  });
+});