@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,69 +1,69 @@
-import TableauFencerCard from './TableauFencerCard.vue';
-
-export default {
-  title: 'Organisms/Cards/TableauFencerCard',
-  component: TableauFencerCard,
-  tags: ['autodocs'],
-  args: {
-    fencer: { DisplayName: 'John Doe' },
-    score: '15',
-    position: '1',
-    color: 'blue',
-    scoreColor: 'bg-winGreen',
-    showScore: true,
-    corners: 'top'
-  },
-  argTypes: {
-    fencer: {
-      control: 'object',
-      description: 'Fencer displayed in the bracket row'
-    },
-    score: {
-      control: 'text',
-      description: 'Displayed bout score'
-    },
-    position: {
-      control: 'text',
-      description: 'Seed or direct-elimination position'
-    },
-    color: {
-      control: 'text',
-      description: 'Tailwind theme color used for the seed strip'
-    },
-    scoreColor: {
-      control: 'text',
-      description: 'Tailwind background class used for the score cell'
-    },
-    showScore: {
-      control: 'boolean',
-      description: 'Whether the score cell displays a value'
-    },
-    corners: {
-      control: 'select',
-      options: ['none', 'top', 'bottom'],
-      description: 'Rounds the outside corners when used as the top or bottom bout row'
-    }
-  }
-};
-
-export const Default = {};
-
-export const LosingScore = {
-  args: {
-    fencer: { DisplayName: 'Jane Doe' },
-    score: '12',
-    position: '2',
-    color: 'red',
-    scoreColor: 'bg-lossRed',
-    corners: 'bottom'
-  }
-};
-
-export const PendingFencer = {
-  args: {
-    fencer: { DisplayName: '' },
-    score: '0',
-    position: '',
-    showScore: false
-  }
-};
+import TableauFencerCard from './TableauFencerCard.vue';
+
+export default {
+  title: 'Organisms/Cards/TableauFencerCard',
+  component: TableauFencerCard,
+  tags: ['autodocs'],
+  args: {
+    fencer: { DisplayName: 'John Doe' },
+    score: '15',
+    position: '1',
+    color: 'blue',
+    scoreColor: 'bg-winGreen',
+    showScore: true,
+    corners: 'top'
+  },
+  argTypes: {
+    fencer: {
+      control: 'object',
+      description: 'Fencer displayed in the bracket row'
+    },
+    score: {
+      control: 'text',
+      description: 'Displayed bout score'
+    },
+    position: {
+      control: 'text',
+      description: 'Seed or direct-elimination position'
+    },
+    color: {
+      control: 'text',
+      description: 'Tailwind theme color used for the seed strip'
+    },
+    scoreColor: {
+      control: 'text',
+      description: 'Tailwind background class used for the score cell'
+    },
+    showScore: {
+      control: 'boolean',
+      description: 'Whether the score cell displays a value'
+    },
+    corners: {
+      control: 'select',
+      options: ['none', 'top', 'bottom'],
+      description: 'Rounds the outside corners when used as the top or bottom bout row'
+    }
+  }
+};
+
+export const Default = {};
+
+export const LosingScore = {
+  args: {
+    fencer: { DisplayName: 'Jane Doe' },
+    score: '12',
+    position: '2',
+    color: 'red',
+    scoreColor: 'bg-lossRed',
+    corners: 'bottom'
+  }
+};
+
+export const PendingFencer = {
+  args: {
+    fencer: { DisplayName: '' },
+    score: '0',
+    position: '',
+    showScore: false
+  }
+};

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

@@ -1,80 +1,80 @@
-<template>
-  <section class="flex h-7 w-40 overflow-hidden border border-poolSetup bg-poolSetup" :class="cornerClass">
-    <div class="flex w-5 shrink-0 items-center justify-center px-1" :class="positionColorClass">
-      <BaseText :text="position" size="xs" color="neutral" />
-    </div>
-
-    <div class="flex min-w-0 flex-1 items-center px-2">
-      <BaseText :text="name" size="xs" color="quaternary" class="truncate whitespace-nowrap" />
-    </div>
-
-    <div class="flex w-7 shrink-0 items-center justify-center border-l border-poolSetup" :class="scoreColor">
-      <BaseText v-if="showScore" :text="displayedScore" size="xs" color="neutral" />
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-
-const cornerClasses = {
-  none: '',
-  top: 'rounded-t',
-  bottom: 'rounded-b'
-};
-
-export default {
-  name: 'TableauFencerCard',
-  components: { BaseText },
-  props: {
-    fencer: {
-      type: Object,
-      required: true
-    },
-    score: {
-      type: String,
-      required: true
-    },
-    position: {
-      type: [String, Number],
-      required: true
-    },
-    color: {
-      type: String,
-      default: ''
-    },
-    scoreColor: {
-      type: String,
-      required: true
-    },
-    showScore: {
-      type: Boolean,
-      default: true
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    },
-    corners: {
-      type: String,
-      default: 'none',
-      validator: value => Object.hasOwn(cornerClasses, value)
-    }
-  },
-  computed: {
-    cornerClass() {
-      return cornerClasses[this.corners];
-    },
-    displayedScore() {
-      const score = Number(this.score || 0);
-      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
-    },
-    name() {
-      return String(this.fencer?.DisplayName || '');
-    },
-    positionColorClass() {
-      return this.color ? `bg-${this.color}` : 'bg-dropdownSelect';
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex h-7 w-40 overflow-hidden border border-poolSetup bg-poolSetup" :class="cornerClass">
+    <div class="flex w-5 shrink-0 items-center justify-center px-1" :class="positionColorClass">
+      <BaseText :text="position" size="xs" color="neutral" />
+    </div>
+
+    <div class="flex min-w-0 flex-1 items-center px-2">
+      <BaseText :text="name" size="xs" color="quaternary" class="truncate whitespace-nowrap" />
+    </div>
+
+    <div class="flex w-7 shrink-0 items-center justify-center border-l border-poolSetup" :class="scoreColor">
+      <BaseText v-if="showScore" :text="displayedScore" size="xs" color="neutral" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const cornerClasses = {
+  none: '',
+  top: 'rounded-t',
+  bottom: 'rounded-b'
+};
+
+export default {
+  name: 'TableauFencerCard',
+  components: { BaseText },
+  props: {
+    fencer: {
+      type: Object,
+      required: true
+    },
+    score: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    scoreColor: {
+      type: String,
+      required: true
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    },
+    corners: {
+      type: String,
+      default: 'none',
+      validator: value => Object.hasOwn(cornerClasses, value)
+    }
+  },
+  computed: {
+    cornerClass() {
+      return cornerClasses[this.corners];
+    },
+    displayedScore() {
+      const score = Number(this.score || 0);
+      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
+    },
+    name() {
+      return String(this.fencer?.DisplayName || '');
+    },
+    positionColorClass() {
+      return this.color ? `bg-${this.color}` : 'bg-dropdownSelect';
+    }
+  }
+};
+</script>

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

@@ -1,153 +1,153 @@
-<template>
-  <div
-    v-if="person"
-    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright"
-  >
-    <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
-      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold" />
-    </div>
-    <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
-      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold" />
-    </div>
-
-    <div class="hidden md:block mr-4">
-      <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold" />
-      </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl" />
-    </div>
-
-    <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
-      <div class="flex items-center justify-start gap-2 min-w-0">
-        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
-          <BaseText
-            :text="displayName"
-            size="md"
-            color="quaternary"
-            weight="bold"
-            class="text-sm md:text-xl truncate"
-          />
-        </button>
-        <MissingHemaRatingsId :person="person.Person" />
-      </div>
-      <span class="w-full flex justify-start">
-        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block" />
-        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden" />
-      </span>
-
-      <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
-        <div class="flex">
-          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1" />
-          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1" />
-        </div>
-        <div class="flex">
-          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1" />
-          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1" />
-        </div>
-      </div>
-    </div>
-
-    <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
-      <div class="flex">
-        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
-        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5" />
-      </div>
-      <div class="flex">
-        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
-        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold" />
-      </div>
-    </div>
-
-    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
-      <div class="flex justify-center w-20">
-        <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
-          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold" />
-        </div>
-      </div>
-      <div class="w-44 flex justify-end">
-        <BaseButton
-          label="Move to Active"
-          size="xs"
-          type="primary"
-          icon-name="fa-arrow-up-from-bracket"
-          class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
-          @buttonClick="handleMoveToActive"
-        />
-      </div>
-    </div>
-
-    <div
-      class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6"
-    >
-      <BaseIcon
-        icon-name="fa-circle-xmark"
-        size=""
-        color="quinary"
-        hover="alarm"
-        @click="handleRemoveFencer"
-        class="text-md md:text-2xl"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
-
-export default {
-  name: 'WaitlistFencerCard',
-  components: { BaseButton, BaseIcon, BaseText, MissingHemaRatingsId },
-  emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
-  props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    queuePosition: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    queueLabel() {
-      return `#${this.queuePosition}`;
-    },
-    displayName() {
-      return this.person?.Person?.DisplayName || 'Unknown fencer';
-    },
-    clubName() {
-      return this.person?.Person?.Club?.Name || 'No club listed';
-    },
-    clubShortName() {
-      return this.person?.Person?.Club?.ShortName || this.clubName;
-    },
-    portraitURL() {
-      const images = this.person?.Person?.Images || [];
-      const portrait = images.find(image => image.Type === 'Portrait');
-      return portrait ? portrait.URL : '';
-    },
-    HEMARating() {
-      const rating = this.person?.Person?.HEMARatings?.[0]?.Rating;
-      return rating || 0;
-    },
-    M2Rating() {
-      const rating = this.person?.Person?.M2Ratings?.[0]?.Rating;
-      return rating || 'U';
-    }
-  },
-  methods: {
-    handleMoveToActive() {
-      this.$emit('move:active', { ...this.person });
-    },
-    handleRemoveFencer() {
-      this.$emit('remove:fencer', { ...this.person });
-    },
-    handleForwardToProfile() {
-      this.$emit('forward:toProfile', this.person.PersonId);
-    }
-  }
-};
-</script>
+<template>
+  <div
+    v-if="person"
+    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright"
+  >
+    <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
+      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold" />
+    </div>
+    <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
+      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold" />
+    </div>
+
+    <div class="hidden md:block mr-4">
+      <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
+      </div>
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl" />
+    </div>
+
+    <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
+      <div class="flex items-center justify-start gap-2 min-w-0">
+        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
+          <BaseText
+            :text="displayName"
+            size="md"
+            color="quaternary"
+            weight="bold"
+            class="text-sm md:text-xl truncate"
+          />
+        </button>
+        <MissingHemaRatingsId :person="person.Person" />
+      </div>
+      <span class="w-full flex justify-start">
+        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block" />
+        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden" />
+      </span>
+
+      <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
+        <div class="flex">
+          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1" />
+        </div>
+        <div class="flex">
+          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1" />
+        </div>
+      </div>
+    </div>
+
+    <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
+      <div class="flex">
+        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5" />
+      </div>
+      <div class="flex">
+        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold" />
+      </div>
+    </div>
+
+    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
+      <div class="flex justify-center w-20">
+        <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
+          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold" />
+        </div>
+      </div>
+      <div class="w-44 flex justify-end">
+        <BaseButton
+          label="Move to Active"
+          size="xs"
+          type="primary"
+          icon-name="fa-arrow-up-from-bracket"
+          class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
+          @buttonClick="handleMoveToActive"
+        />
+      </div>
+    </div>
+
+    <div
+      class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6"
+    >
+      <BaseIcon
+        icon-name="fa-circle-xmark"
+        size=""
+        color="quinary"
+        hover="alarm"
+        @click="handleRemoveFencer"
+        class="text-md md:text-2xl"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
+
+export default {
+  name: 'WaitlistFencerCard',
+  components: { BaseButton, BaseIcon, BaseText, MissingHemaRatingsId },
+  emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
+  props: {
+    person: {
+      type: Object,
+      required: true
+    },
+    queuePosition: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    queueLabel() {
+      return `#${this.queuePosition}`;
+    },
+    displayName() {
+      return this.person?.Person?.DisplayName || 'Unknown fencer';
+    },
+    clubName() {
+      return this.person?.Person?.Club?.Name || 'No club listed';
+    },
+    clubShortName() {
+      return this.person?.Person?.Club?.ShortName || this.clubName;
+    },
+    portraitURL() {
+      const images = this.person?.Person?.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+    HEMARating() {
+      const rating = this.person?.Person?.HEMARatings?.[0]?.Rating;
+      return rating || 0;
+    },
+    M2Rating() {
+      const rating = this.person?.Person?.M2Ratings?.[0]?.Rating;
+      return rating || 'U';
+    }
+  },
+  methods: {
+    handleMoveToActive() {
+      this.$emit('move:active', { ...this.person });
+    },
+    handleRemoveFencer() {
+      this.$emit('remove:fencer', { ...this.person });
+    },
+    handleForwardToProfile() {
+      this.$emit('forward:toProfile', this.person.PersonId);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -90,6 +90,10 @@ export default {
     document.removeEventListener('click', this.handleClickOutside, true);
   },
   watch: {
+    selectedItem(newItem) {
+      this.localSelectedItem = newItem;
+      this.backupSelectedItem = { ...newItem };
+    },
     items(newItems) {
       this.localItems = newItems;
     }