@dcrackel/hematournamentui 1.0.706 → 1.0.708

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' };

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

@@ -1,53 +1,55 @@
 <template>
   <div
-      :class="[
-      enabled ? 'select-none' : '',
-      isDragOver ? 'ring-2 ring-dashed ring-slate-300' : ''
-    ]"
-      role="listitem"
-      :aria-label="ariaLabel"
-      :draggable="enabled && dragReady"
-      tabindex="0"
-
-      @pointerdown="onPointerDown"
-      @pointerup="onPointerUp"
-      @pointercancel="onPointerUp"
-
-      @click="enabled && $emit('reorder:tap', payload)"
-      @keydown.space.prevent="enabled && $emit('reorder:tap', payload)"
-      @keydown.enter.prevent="enabled && $emit('reorder:tap', payload)"
-
-      @dragstart="onDragStart"
-      @dragend="onDragEnd"
-      @dragenter.prevent="onDragEnter"
-      @dragleave="onDragLeave"
-      @dragover.prevent="onDragOver"
-      @drop="onDrop"
+    :class="[enabled ? 'select-none' : '', isDragOver ? 'ring-2 ring-dashed ring-slate-300' : '']"
+    role="listitem"
+    :aria-label="ariaLabel"
+    :draggable="enabled && dragReady"
+    tabindex="0"
+    @pointerdown="onPointerDown"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @click="enabled && $emit('reorder:tap', payload)"
+    @keydown.space.prevent="enabled && $emit('reorder:tap', payload)"
+    @keydown.enter.prevent="enabled && $emit('reorder:tap', payload)"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+    @dragenter.prevent="onDragEnter"
+    @dragleave="onDragLeave"
+    @dragover.prevent="onDragOver"
+    @drop="onDrop"
   >
-    <slot/>
+    <slot />
   </div>
 </template>
 
 <script>
 export default {
   name: 'ReorderableShell',
-  emits: ['reorder:dragend', 'reorder:dragenter', 'reorder:dragleave', 'reorder:dragover', 'reorder:dragstart', 'reorder:drop', 'reorder:tap'],
+  emits: [
+    'reorder:dragend',
+    'reorder:dragenter',
+    'reorder:dragleave',
+    'reorder:dragover',
+    'reorder:dragstart',
+    'reorder:drop',
+    'reorder:tap'
+  ],
   props: {
-    enabled: {type: Boolean, default: false},
-    dragId: {type: [String, Number], required: true},
-    payload: {type: Object, default: () => ({})},
-    ariaLabel: {type: String, default: 'Reorder item'},
+    enabled: { type: Boolean, default: false },
+    dragId: { type: [String, Number], required: true },
+    payload: { type: Object, default: () => ({}) },
+    ariaLabel: { type: String, default: 'Reorder item' },
 
     // NEW
-    requireHandle: {type: Boolean, default: true},           // drag only from a handle
-    handleSelector: {type: String, default: '[data-drag-handle]'},
-    longPressMs: {type: Number, default: 250},               // touch long-press threshold
+    requireHandle: { type: Boolean, default: true }, // drag only from a handle
+    handleSelector: { type: String, default: '[data-drag-handle]' },
+    longPressMs: { type: Number, default: 250 } // touch long-press threshold
   },
   data() {
     return {
       isDragOver: false,
-      dragReady: false,        // controls :draggable
-      pressTimer: null,
+      dragReady: false, // controls :draggable
+      pressTimer: null
     };
   },
   methods: {
@@ -67,7 +69,7 @@ export default {
       }
       clearTimeout(this.pressTimer);
       this.pressTimer = setTimeout(() => {
-        this.dragReady = true;   // enables :draggable
+        this.dragReady = true; // enables :draggable
       }, this.longPressMs);
     },
     onPointerUp() {
@@ -82,11 +84,11 @@ export default {
         e.preventDefault();
         return;
       }
+      const dataTransfer = e.dataTransfer;
       try {
-        e.dataTransfer.setData('text/plain', String(this.dragId));
-        e.dataTransfer.effectAllowed = 'move';
-      } catch {
-      }
+        dataTransfer.setData('text/plain', String(this.dragId));
+        dataTransfer.effectAllowed = 'move';
+      } catch {}
       this.$emit('reorder:dragstart', this.payload);
     },
     onDragEnd() {
@@ -105,7 +107,8 @@ export default {
     },
     onDragOver(e) {
       if (!this.enabled) return;
-      e.dataTransfer && (e.dataTransfer.dropEffect = 'move');
+      const dataTransfer = e.dataTransfer;
+      if (dataTransfer) dataTransfer.dropEffect = 'move';
       this.$emit('reorder:dragover', this.payload);
     },
     onDrop(e) {
@@ -113,8 +116,8 @@ export default {
       this.isDragOver = false;
       const fromDragId = Number(e.dataTransfer?.getData('text/plain') || '');
       if (!fromDragId || String(fromDragId) === String(this.dragId)) return;
-      this.$emit('reorder:drop', {fromDragId, toDragId: this.dragId, target: this.payload});
-    },
-  },
+      this.$emit('reorder:drop', { fromDragId, toDragId: this.dragId, target: this.payload });
+    }
+  }
 };
 </script>

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.stories.js

@@ -1,49 +1,49 @@
-import StepIndicator from "./StepIndicator.vue";
-import mockEventQuestions from "../../../../mocks/EventQuestionsMock.js";
+import StepIndicator from './StepIndicator.vue';
+import mockEventQuestions from '../../../../mocks/EventQuestionsMock.js';
 
 export default {
-    title: 'Molecules/StepIndicators/StepIndicator',
-    component: StepIndicator,
-    tags: ['autodocs'],
-    args: {
-        selected: 1,
-        steps: []
-    },
-    argTypes: {
-        selected: { control: 'number' },
-        steps: { control: 'object' }
-    }
+  title: 'Molecules/StepIndicators/StepIndicator',
+  component: StepIndicator,
+  tags: ['autodocs'],
+  args: {
+    selected: 1,
+    steps: []
+  },
+  argTypes: {
+    selected: { control: 'number' },
+    steps: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        selected: 0,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination.", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 0,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination.', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};
 
 export const Step2 = {
-    args: {
-        selected: 1,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 1,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};
 
 export const Step3 = {
-    args: {
-        selected: 2,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination.", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 2,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination.', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue

@@ -1,36 +1,34 @@
 <template>
   <section class="hidden md:flex flex-col w-full">
-  <ol class="flex justify-center">
-    <li v-for="(step, index) in steps" :key="index" class="flex items-center">
-      <span
+    <ol class="flex justify-center">
+      <li v-for="(step, index) in steps" :key="index" class="flex items-center">
+        <span
           class="flex items-center justify-center w-10 h-10 border-dropdownSelect rounded-full lg:h-12 lg:w-12 shrink-0 ml-2"
           :class="index === selected ? 'bg-toggleBackground' : 'bg-dropdownSelect'"
-      >
-        <BaseIcon
-            :icon-name="step.icon"
-            :color="index === selected ? 'neutral' : 'neutral'"
-            :size="'lg'"
-        />
-      </span>
-      <div v-if="index < steps.length - 1" class="flex-grow h-1 mx-2 w-20"
-           :class="index < selected ? 'text-toggleBackground' : 'text-dropdownSelect'"
-           style="border-bottom: 4px solid;"></div>
-    </li>
-  </ol>
-  <ol class="flex justify-center w-full">
-    <li v-for="(step, index) in steps" :key="index" class="flex items-center">
-      <div class="w-[8.9rem] flex justify-center">
-        <BaseText :text="step.name" :color="index === selected ? 'quinary' : 'dropdownSelect'" class="mt-2"/>
-      </div>
-    </li>
-  </ol>
+        >
+          <BaseIcon :icon-name="step.icon" :color="index === selected ? 'neutral' : 'neutral'" :size="'lg'" />
+        </span>
+        <div
+          v-if="index < steps.length - 1"
+          class="flex-grow h-1 mx-2 w-20"
+          :class="index < selected ? 'text-toggleBackground' : 'text-dropdownSelect'"
+          style="border-bottom: 4px solid"
+        ></div>
+      </li>
+    </ol>
+    <ol class="flex justify-center w-full">
+      <li v-for="(step, index) in steps" :key="index" class="flex items-center">
+        <div class="w-[8.9rem] flex justify-center">
+          <BaseText :text="step.name" :color="index === selected ? 'quinary' : 'dropdownSelect'" class="mt-2" />
+        </div>
+      </li>
+    </ol>
   </section>
-
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'StepIndicator',

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

@@ -1,37 +1,42 @@
-import BoutCard from "./BoutCard.vue";
+import BoutCard from './BoutCard.vue';
 
 const bout = {
-    Status: 'Scheduled',
-    TimeLeft: 90,
-    customStatus: '',
-    Person1: { DisplayName: 'Fencer A', Club: { Name: 'Club X' }, Images: [] },
-    Person2: { DisplayName: 'Fencer B', Club: { Name: 'Club Y' }, Images: [] },
-    Score1: 0, Score2: 0,
-    Person1Pos: '2', Person2Pos: '3',
-    BoutId: 42, OrderIndex: 0, PoolId: 10, EventId: 5,
-    hostingClubColors: {
-        Color1: 'red',
-        Color2: 'blue'
-    },
+  Status: 'Scheduled',
+  TimeLeft: 90,
+  customStatus: '',
+  Person1: { DisplayName: 'Fencer A', Club: { Name: 'Club X' }, Images: [] },
+  Person2: { DisplayName: 'Fencer B', Club: { Name: 'Club Y' }, Images: [] },
+  Score1: 0,
+  Score2: 0,
+  Person1Pos: '2',
+  Person2Pos: '3',
+  BoutId: 42,
+  OrderIndex: 0,
+  PoolId: 10,
+  EventId: 5,
+  hostingClubColors: {
+    Color1: 'red',
+    Color2: 'blue'
+  }
 };
 
 export default {
-    title: 'Organisms/Cards/BoutCard',
-    component: BoutCard,
-    args: {
-        bout,
-        isWaiting: false,
-        timerStatus: 'stopped',
-        hostingClubColors: { Color1: 'red', Color2: 'blue' },
-        editMode: true,
-        reorderMode: false,
-        isCountingBackwardsMaxScore: 0,
-    },
-    argTypes: {
-        isWaiting: { control: 'boolean' },
-        reorderMode: { control: 'boolean' },
-        timerStatus: { control: { type: 'radio' }, options: ['running', 'stopped'] },
-    },
+  title: 'Organisms/Cards/BoutCard',
+  component: BoutCard,
+  args: {
+    bout,
+    isWaiting: false,
+    timerStatus: 'stopped',
+    hostingClubColors: { Color1: 'red', Color2: 'blue' },
+    editMode: true,
+    reorderMode: false,
+    isCountingBackwardsMaxScore: 0
+  },
+  argTypes: {
+    isWaiting: { control: 'boolean' },
+    reorderMode: { control: 'boolean' },
+    timerStatus: { control: { type: 'radio' }, options: ['running', 'stopped'] }
+  }
 };
 
 export const Scheduled = {};