@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,32 +1,41 @@
 <template>
   <transition
-      enter-active-class="transition-opacity duration-500"
-      enter-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-500"
-      leave-class="opacity-100"
-      leave-to-class="opacity-0"
+    enter-active-class="transition-opacity duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
   >
-    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
-         @click="close">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      @click="close"
+    >
       <div class="w-1/2 min-w-[50rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
-          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>
-        <EditBout :bout="bout" :hostingClubColors="hostingClubColors" :eventRules="eventRules" :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                  @submit:bout="handleSubmitBout"/>
+        <EditBout
+          :bout="bout"
+          :hostingClubColors="hostingClubColors"
+          :eventRules="eventRules"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @submit:bout="handleSubmitBout"
+          @request:bout-active="handleBoutActiveRequest"
+        />
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import EditBout from "../../../Organisms/Cards/EditBout/EditBout.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import EditBout from '../../../Organisms/Cards/EditBout/EditBout.vue';
 
 export default {
-  name: "EditBoutModal",
-  emits: ['submit:bout', 'update:closeModal'],
+  name: 'EditBoutModal',
+  emits: ['request:bout-active', 'submit:bout', 'update:closeModal'],
   components: { BaseIcon, EditBout },
   props: {
     show: {
@@ -56,6 +65,9 @@ export default {
     },
     handleSubmitBout(bout2) {
       this.$emit('submit:bout', bout2);
+    },
+    handleBoutActiveRequest(bout) {
+      this.$emit('request:bout-active', bout);
     }
   }
 };

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

@@ -1,36 +1,35 @@
 import EditConfigModal from './EventWizardModal.vue';
-import singleEventMock from "../../../../mocks/singleEventMock.js";
-import eventRules from "../../../../mocks/eventRules.js";
+import singleEventMock from '../../../../mocks/singleEventMock.js';
+import eventRules from '../../../../mocks/eventRules.js';
 
 export default {
-    title: 'Molecules/Modals/EditWizardModal',
-    component: EditConfigModal,
-    tags: ['autodocs'],
-    args: {
-        event: singleEventMock,
-        weapons: [
-            {text: 'Longsword', link: 1},
-            {text: 'Saber', link: 2},
-            {text: 'Rapier', link: 3}
-        ],
-        rules: eventRules
-    },
-    argTypes: {
-        event: { control: 'object' },
-        weapons: { control: 'object' },
-        rules: { control: 'object' }
-    },
+  title: 'Molecules/Modals/EditWizardModal',
+  component: EditConfigModal,
+  tags: ['autodocs'],
+  args: {
+    event: singleEventMock,
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    rules: eventRules
+  },
+  argTypes: {
+    event: { control: 'object' },
+    weapons: { control: 'object' },
+    rules: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        event: singleEventMock,
-        rules: eventRules,
-        weapons: [
-            {text: 'Longsword', link: 1},
-            {text: 'Saber', link: 2},
-            {text: 'Rapier', link: 3}
-        ],
-    }
-}
-
+  args: {
+    event: singleEventMock,
+    rules: eventRules,
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ]
+  }
+};

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

@@ -1,33 +1,35 @@
 <template>
   <transition
-      enter-active-class="transition-opacity duration-500"
-      enter-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-500"
-      leave-class="opacity-100"
-      leave-to-class="opacity-0"
+    enter-active-class="transition-opacity duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
   >
-    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
-         @click="close">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      @click="close"
+    >
       <div class="w-1/2 min-w-[50rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
-          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>
-        <EditEventWizard :event="event" :rules="rules" :weapons="weapons"
-                  @update:submit="handleSubmitEvent" />
+        <EditEventWizard :event="event" :rules="rules" :weapons="weapons" @update:submit="handleSubmitEvent" />
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import EditEventWizard from "../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import EditEventWizard from '../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
 
 export default {
-  name: "EventWizardModal",
+  name: 'EventWizardModal',
   emits: ['update:closeModal', 'update:submit'],
-  components: {EditEventWizard, BaseIcon },
+  components: { EditEventWizard, BaseIcon },
   props: {
     show: {
       type: Boolean,
@@ -44,7 +46,7 @@ export default {
     rules: {
       type: Array,
       required: true
-    },
+    }
   },
   methods: {
     close() {

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

@@ -1,28 +1,28 @@
 import LoadingModal from './LoadingModal.vue';
 
 export default {
-    title: 'Molecules/Modals/LoadingModal',
-    component: LoadingModal,
-    tags: ['autodocs'],
-    args: {
-        show: true,
-        headerText: "Loading...",
-        animatedGif: "https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif", // Replace with the actual gif URL
-        loadingText: "Please wait while we load the data."
-    },
-    argTypes: {
-        show: { control: { type: 'boolean' } },
-        headerText: { control: { type: 'text' } },
-        animatedGif: { control: { type: 'text' } },
-        loadingText: { control: { type: 'text' } }
-    },
+  title: 'Molecules/Modals/LoadingModal',
+  component: LoadingModal,
+  tags: ['autodocs'],
+  args: {
+    show: true,
+    headerText: 'Loading...',
+    animatedGif: 'https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif', // Replace with the actual gif URL
+    loadingText: 'Please wait while we load the data.'
+  },
+  argTypes: {
+    show: { control: { type: 'boolean' } },
+    headerText: { control: { type: 'text' } },
+    animatedGif: { control: { type: 'text' } },
+    loadingText: { control: { type: 'text' } }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        headerText: "Loading...",
-        animatedGif: "https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif", // Replace with the actual gif URL
-        loadingText: "Please wait while we load the data."
-    },
+  args: {
+    show: true,
+    headerText: 'Loading...',
+    animatedGif: 'https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif', // Replace with the actual gif URL
+    loadingText: 'Please wait while we load the data.'
+  }
 };

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

@@ -1,11 +1,11 @@
 <template>
   <transition
-      enter-active-class="transition-opacity duration-500"
-      enter-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-500"
-      leave-class="opacity-100"
-      leave-to-class="opacity-0"
+    enter-active-class="transition-opacity duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
   >
     <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50">
       <div class="w-1/3 min-w-[30rem] bg-loadingModalBG rounded-lg shadow-lg pb-6 px-2 text-center py-4">
@@ -21,7 +21,7 @@
 import loadingImage from '../../../../assets/loading.gif';
 
 export default {
-  name: "LoadingModal",
+  name: 'LoadingModal',
   props: {
     show: {
       type: Boolean,

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

@@ -1,34 +1,34 @@
 import PenaltyModal from './PenaltyModal.vue';
-import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
 
 export default {
-    title: 'Molecules/Modals/PenaltyModal',
-    component: PenaltyModal,
-    tags: ['autodocs'],
-    args: {
-        show: true,
-        fencer1: true,
-        bout: getPoolsWithBouts[0],
-    },
-    argTypes: {
-        show: { control: 'boolean' },
-        fencer1: { control: 'boolean' },
-        bout: { control: 'object' },
-    },
+  title: 'Molecules/Modals/PenaltyModal',
+  component: PenaltyModal,
+  tags: ['autodocs'],
+  args: {
+    show: true,
+    fencer1: true,
+    bout: getPoolsWithBouts[0]
+  },
+  argTypes: {
+    show: { control: 'boolean' },
+    fencer1: { control: 'boolean' },
+    bout: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        fencer1: true,
-        bout: getPoolsWithBouts[0],
-    }
+  args: {
+    show: true,
+    fencer1: true,
+    bout: getPoolsWithBouts[0]
+  }
 };
 
 export const WithDEBout = {
-    args: {
-        show: true,
-        fencer1: true,
-        bout: getPoolsWithBouts[0],
-    }
+  args: {
+    show: true,
+    fencer1: true,
+    bout: getPoolsWithBouts[0]
+  }
 };

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

@@ -1,21 +1,27 @@
 <template>
   <transition
-      enter-active-class="transition-opacity duration-500"
-      enter-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-500"
-      leave-class="opacity-100"
-      leave-to-class="opacity-0"
+    enter-active-class="transition-opacity duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
   >
-    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50" @click="close">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      @click="close"
+    >
       <div class="w-full md:w-1/3 md:min-w-[30rem] bg-poolSetup rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
-          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>
-        <PenaltyCard :fencer1="fencer1" :bout="bout"
-                     @penalty:remove="handleRemovePenalty"
-                     @penalty:add="handleAddPenalty"
-                     @penalty:update="handleUpdatePenalty"
+        <PenaltyCard
+          :fencer1="fencer1"
+          :bout="bout"
+          @penalty:remove="handleRemovePenalty"
+          @penalty:add="handleAddPenalty"
+          @penalty:update="handleUpdatePenalty"
         />
       </div>
     </div>
@@ -23,43 +29,42 @@
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import PenaltyCard from "../../../Organisms/Cards/PenaltyCard/PenaltyCard.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import PenaltyCard from '../../../Organisms/Cards/PenaltyCard/PenaltyCard.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
-  name: "PenaltyModal",
-  components: {BaseText, PenaltyCard, BaseIcon},
-  emits: ["update:closeModal", "penalty:remove", "penalty:add", "penalty:update"],
+  name: 'PenaltyModal',
+  components: { BaseText, PenaltyCard, BaseIcon },
+  emits: ['update:closeModal', 'penalty:remove', 'penalty:add', 'penalty:update'],
   props: {
     show: {
       type: Boolean,
       default: true
     },
-    fencer1:{
+    fencer1: {
       type: Boolean,
       required: true
     },
     bout: {
       type: Object,
       required: true
-    },
+    }
   },
   methods: {
     close() {
       this.$emit('update:closeModal', this.bout);
     },
     handleUpdatePenalty(penalty) {
-      this.$emit('penalty:update', {penalty: penalty, fencer1: this.fencer1});
+      this.$emit('penalty:update', { penalty: penalty, fencer1: this.fencer1 });
     },
     handleAddPenalty(penalty) {
-      this.$emit('penalty:add', {penalty: penalty, fencer1: this.fencer1});
+      this.$emit('penalty:add', { penalty: penalty, fencer1: this.fencer1 });
     },
     handleRemovePenalty(penalty) {
-      this.$emit('penalty:remove', {penalty: penalty, fencer1: this.fencer1});
+      this.$emit('penalty:remove', { penalty: penalty, fencer1: this.fencer1 });
     }
   }
 };
 </script>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>

package/src/stories/Molecules/Reorder/ReorderableShell.stories.js

@@ -2,41 +2,43 @@ import ReorderableShell from './ReorderableShell.vue';
 import { reactive, ref } from 'vue';
 
 export default {
-    title: 'Molecules/Reorder/ReorderableShell',
-    component: ReorderableShell,
-    args: {
-        enabled: true,
-        ariaLabel: 'Reorder item',
-    },
-    argTypes: {
-        enabled: { control: 'boolean' },
-        ariaLabel: { control: 'text' },
-        dragId: { control: 'text' },
-        payload: { control: 'object' },
-        'reorder:tap':       { action: 'reorder:tap' },
-        'reorder:dragstart': { action: 'reorder:dragstart' },
-        'reorder:dragend':   { action: 'reorder:dragend' },
-        'reorder:dragenter': { action: 'reorder:dragenter' },
-        'reorder:dragleave': { action: 'reorder:dragleave' },
-        'reorder:dragover':  { action: 'reorder:dragover' },
-        'reorder:drop':      { action: 'reorder:drop' },
-    },
-    parameters: {
-        chromatic: { disableSnapshot: true },
-        docs: {
-            description: {
-                component:
-                    'A shell that adds accessible DnD + tap-to-swap to any slotted content. Use the Canvas tab to try drag & drop.',
-            },
-        },
-    },
+  title: 'Molecules/Reorder/ReorderableShell',
+  component: ReorderableShell,
+  args: {
+    enabled: true,
+    ariaLabel: 'Reorder item'
+  },
+  argTypes: {
+    enabled: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+    dragId: { control: 'text' },
+    payload: { control: 'object' },
+    'reorder:tap': { action: 'reorder:tap' },
+    'reorder:dragstart': { action: 'reorder:dragstart' },
+    'reorder:dragend': { action: 'reorder:dragend' },
+    'reorder:dragenter': { action: 'reorder:dragenter' },
+    'reorder:dragleave': { action: 'reorder:dragleave' },
+    'reorder:dragover': { action: 'reorder:dragover' },
+    'reorder:drop': { action: 'reorder:drop' }
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        component:
+          'A shell that adds accessible DnD + tap-to-swap to any slotted content. Use the Canvas tab to try drag & drop.'
+      }
+    }
+  }
 };
 
 // ---------- Basic ----------
-const BasicTemplate = (args) => ({
-    components: { ReorderableShell },
-    setup() { return { args }; },
-    template: `
+const BasicTemplate = args => ({
+  components: { ReorderableShell },
+  setup() {
+    return { args };
+  },
+  template: `
     <div class="p-6 bg-slate-50 min-h-[200px]">
       <ReorderableShell v-bind="args"
         @reorder:tap="args['reorder:tap']"
@@ -54,58 +56,60 @@ const BasicTemplate = (args) => ({
         </div>
       </ReorderableShell>
     </div>
-  `,
+  `
 });
 export const Basic = BasicTemplate.bind({});
 Basic.args = { dragId: 1, payload: { id: 1, label: 'Single Item' } };
 
 // ---------- List with real reordering ----------
-const ListTemplate = (args) => ({
-    components: { ReorderableShell },
-    setup() {
-        const items = reactive([
-            { id: 101, label: 'Bout #1' },
-            { id: 102, label: 'Bout #2' },
-            { id: 103, label: 'Bout #3' },
-            { id: 104, label: 'Bout #4' },
-        ]);
-        const selectedId = ref(null);
-        const idx = (id) => items.findIndex((it) => String(it.id) === String(id));
+const ListTemplate = args => ({
+  components: { ReorderableShell },
+  setup() {
+    const items = reactive([
+      { id: 101, label: 'Bout #1' },
+      { id: 102, label: 'Bout #2' },
+      { id: 103, label: 'Bout #3' },
+      { id: 104, label: 'Bout #4' }
+    ]);
+    const selectedId = ref(null);
+    const idx = id => items.findIndex(it => String(it.id) === String(id));
 
-        const onDrop = ({ fromDragId, toDragId }) => {
-            const i = idx(fromDragId), j = idx(toDragId);
-            if (i === -1 || j === -1 || i === j) return;
-            const [moved] = items.splice(i, 1);
-            items.splice(j, 0, moved);
-            args['reorder:drop']?.({ fromDragId, toDragId, newOrder: items.map(x => x.id) });
-            selectedId.value = null;
-        };
+    const onDrop = ({ fromDragId, toDragId }) => {
+      const i = idx(fromDragId),
+        j = idx(toDragId);
+      if (i === -1 || j === -1 || i === j) return;
+      const [moved] = items.splice(i, 1);
+      items.splice(j, 0, moved);
+      args['reorder:drop']?.({ fromDragId, toDragId, newOrder: items.map(x => x.id) });
+      selectedId.value = null;
+    };
 
-        const onTap = (payload) => {
-            const id = payload?.id;
-            if (!id) return;
-            if (selectedId.value == null) {
-                selectedId.value = id;
-                args['reorder:tap']?.({ phase: 'selected', id });
-                return;
-            }
-            if (String(selectedId.value) === String(id)) {
-                selectedId.value = null;
-                args['reorder:tap']?.({ phase: 'deselected', id });
-                return;
-            }
-            const i = idx(selectedId.value), j = idx(id);
-            if (i !== -1 && j !== -1) {
-                const [moved] = items.splice(i, 1);
-                items.splice(j, 0, moved);
-                args['reorder:tap']?.({ phase: 'swapped', from: selectedId.value, to: id, newOrder: items.map(x => x.id) });
-            }
-            selectedId.value = null;
-        };
+    const onTap = payload => {
+      const id = payload?.id;
+      if (!id) return;
+      if (selectedId.value == null) {
+        selectedId.value = id;
+        args['reorder:tap']?.({ phase: 'selected', id });
+        return;
+      }
+      if (String(selectedId.value) === String(id)) {
+        selectedId.value = null;
+        args['reorder:tap']?.({ phase: 'deselected', id });
+        return;
+      }
+      const i = idx(selectedId.value),
+        j = idx(id);
+      if (i !== -1 && j !== -1) {
+        const [moved] = items.splice(i, 1);
+        items.splice(j, 0, moved);
+        args['reorder:tap']?.({ phase: 'swapped', from: selectedId.value, to: id, newOrder: items.map(x => x.id) });
+      }
+      selectedId.value = null;
+    };
 
-        return { args, items, selectedId, onDrop, onTap };
-    },
-    template: `
+    return { args, items, selectedId, onDrop, onTap };
+  },
+  template: `
     <div class="p-6 bg-slate-50 min-h-[320px]">
       <div role="list" class="space-y-3 max-w-md">
         <ReorderableShell
@@ -132,7 +136,7 @@ const ListTemplate = (args) => ({
         Tip: Drag items in Canvas, or tap two items to swap (mobile).
       </div>
     </div>
-  `,
+  `
 });
 export const List = ListTemplate.bind({});
 List.args = { enabled: true, ariaLabel: 'Reorder bout' };