@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Boxes/CounterBox/CounterBox.vue

@@ -1,51 +1,57 @@
 <template>
   <div class="flex flex-col items-center">
     <section class="flex justify-center">
-      <BaseText :text="label" size="xs" :color="textColor"/>
+      <BaseText :text="label" size="xs" :color="textColor" />
     </section>
     <section :class="boxClass">
       <div class="flex flex-row items-center justify-between h-14 py-2 px-2">
         <button v-if="!disable" @click="increase" class="py-1">
-          <BaseIcon icon-name="fa-caret-up" size="xl" color="primaryHighlight"/>
+          <BaseIcon icon-name="fa-caret-up" size="xl" color="primaryHighlight" />
         </button>
         <span class="px-1">
-          <BaseText v-if="!directInput" :text="counter" size="xl" color="primary"/>
-          <BaseInput v-if="directInput" placeholder="Enter text..." :value="isPercent ? `${counter}%` : counter" size="xl" :centerInput="true" @update:value="change" />
+          <BaseText v-if="!directInput" :text="counter" size="xl" color="primary" />
+          <BaseInput
+            v-if="directInput"
+            placeholder="Enter text..."
+            :value="isPercent ? `${counter}%` : counter"
+            size="xl"
+            :centerInput="true"
+            @update:value="change"
+          />
         </span>
         <button v-if="!disable" @click="decrease" class="py-1">
-          <BaseIcon icon-name="fa-caret-down" size="xl" color="primaryHighlight"/>
+          <BaseIcon icon-name="fa-caret-down" size="xl" color="primaryHighlight" />
         </button>
-
       </div>
     </section>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
 
 export default {
   name: 'CounterBox',
   emits: ['update:change', 'update:count', 'update:decreaseCount', 'update:increaseCount'],
-  components: {BaseInput, BaseText, BaseIcon},
+  components: { BaseInput, BaseText, BaseIcon },
   props: {
     label: {
       type: String,
-      default: 'Counter',
+      default: 'Counter'
     },
     count: {
       type: Number,
-      default: 0,
+      default: 0
     },
     recommended: {
       type: Number,
-      default: 0,
+      default: 0
     },
     textColor: {
       type: String,
-      default: 'primaryHighlight',
+      default: 'primaryHighlight'
     },
     directInput: {
       type: Boolean,
@@ -63,7 +69,7 @@ export default {
   data() {
     return {
       counter: this.count
-    }
+    };
   },
   watch: {
     count(newVal) {
@@ -81,13 +87,13 @@ export default {
         'border-dropdownSelect': !this.isRecommended,
         'border-bright': this.isRecommended
       };
-    },
+    }
   },
   methods: {
     increase() {
       if (this.directInput) {
         this.$emit('update:increaseCount', this.counter);
-        return
+        return;
       }
 
       this.counter = Math.max(this.counter + 1, 0);
@@ -96,7 +102,7 @@ export default {
     decrease() {
       if (this.directInput) {
         this.$emit('update:decreaseCount', this.counter);
-        return
+        return;
       }
 
       this.counter = Math.max(this.counter - 1, 0);
@@ -105,6 +111,6 @@ export default {
     change(value) {
       this.$emit('update:change', value);
     }
-  },
+  }
 };
 </script>

package/src/stories/Molecules/Boxes/EventStatusBox/EventStatusBox.stories.js

@@ -1,40 +1,37 @@
 import EventStatusBox from './EventStatusBox.vue';
 
 export default {
-    title: 'Molecules/Boxes/EventStatusBox',
-    component: EventStatusBox,
-    tags: ['autodocs'],
-    args: {
-        statusCount: 10,
-        statusLabel: 'PRESENT',
-        boxColor: 'bg-eventBoxBlue',
-    },
-    argTypes: {}
+  title: 'Molecules/Boxes/EventStatusBox',
+  component: EventStatusBox,
+  tags: ['autodocs'],
+  args: {
+    statusCount: 10,
+    statusLabel: 'PRESENT',
+    boxColor: 'bg-eventBoxBlue'
+  },
+  argTypes: {}
 };
 
-
-
 export const Default = {
-    args: {
-        statusCount: 10,
-        statusLabel: 'PRESENT',
-        boxColor: 'bg-eventBoxBlue',
-    }
+  args: {
+    statusCount: 10,
+    statusLabel: 'PRESENT',
+    boxColor: 'bg-eventBoxBlue'
+  }
 };
 
 export const Absent = {
-    args: {
-        statusCount: 5,
-        statusLabel: 'ABSENT',
-        boxColor: 'bg-eventBoxGreen',
-    }
+  args: {
+    statusCount: 5,
+    statusLabel: 'ABSENT',
+    boxColor: 'bg-eventBoxGreen'
+  }
 };
 
-
 export const Removed = {
-    args: {
-        statusCount: 3,
-        statusLabel: 'REMOVED',
-        boxColor: 'bg-eventBoxRed',
-    }
-};
+  args: {
+    statusCount: 3,
+    statusLabel: 'REMOVED',
+    boxColor: 'bg-eventBoxRed'
+  }
+};

package/src/stories/Molecules/Boxes/EventStatusBox/EventStatusBox.vue

@@ -12,24 +12,24 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'EventStatusBox',
-  components: {BaseText},
+  components: { BaseText },
   props: {
     statusCount: {
       type: [Number, String],
-      required: true,
+      required: true
     },
     statusLabel: {
       type: String,
-      required: true,
+      required: true
     },
     boxColor: {
       type: String,
-      required: true,
-    },
-  },
+      required: true
+    }
+  }
 };
 </script>

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.stories.js

@@ -3,45 +3,44 @@ import { vueRouter } from 'storybook-vue3-router';
 import mockRoutes from '../../../../mocks/mockRoutes.js';
 import { action } from 'storybook/actions';
 export default {
-    title: 'Molecules/Admin/Breadcrumb',
-    component: Breadcrumb,
-    tags: ['autodocs'],
-    argTypes: {
-        items: {
-            control: 'object',
-            description: 'Array of breadcrumb items'
-        },
-    },
+  title: 'Molecules/Admin/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of breadcrumb items'
+    }
+  }
 };
 
 export const Default = {
-    args: {
-        label: 'Sort By',
-        items: [
-            { text: 'Tournament', link: '/' },
-            { text: 'Claw and Order', link: '/event' },
-            { text: 'Event with a long name that throws things off', link: '' }
-        ],
-        selectedItem: {text: 'Text1', link: '/link1'},
-        props: {
-            onLinkClick: {
-                default: () => action('link-clicked')
-            }
-        },
+  args: {
+    label: 'Sort By',
+    items: [
+      { text: 'Tournament', link: '/' },
+      { text: 'Claw and Order', link: '/event' },
+      { text: 'Event with a long name that throws things off', link: '' }
+    ],
+    selectedItem: { text: 'Text1', link: '/link1' },
+    props: {
+      onLinkClick: {
+        default: () => action('link-clicked')
+      }
     }
+  }
 };
 
 Default.decorators = [vueRouter(mockRoutes)];
 
 Default.parameters = {
-    actions: {
-        handles: ['click .breadcrumb-item router-link'],
-    },
+  actions: {
+    handles: ['click .breadcrumb-item router-link']
+  }
 };
 
 export const Empty = {
-    args: {
-        items: [],
-    }
+  args: {
+    items: []
+  }
 };
-

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.test.js

@@ -5,74 +5,74 @@ import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 // Mocking BaseText and router-link
 const mocks = {
-    components: {
-        BaseText,
-        RouterLink: {
-            template: '<div><slot></slot></div>',
-            props: ['to'],
-            methods: { click: vi.fn() }
-        }
+  components: {
+    BaseText,
+    RouterLink: {
+      template: '<div><slot></slot></div>',
+      props: ['to'],
+      methods: { click: vi.fn() }
     }
+  }
 };
 
 describe('Breadcrumb', () => {
-    it('renders breadcrumbs correctly', () => {
-        const items = [
-            { text: 'Home', link: '/' },
-            { text: 'Category', link: '/category' },
-            { text: 'Item', link: '/category/item' }
-        ];
-
-        const wrapper = shallowMount(Breadcrumb, {
-            props: { items },
-            global: mocks
-        });
-
-        const linkElements = wrapper.findAll('[to]');
+  it('renders breadcrumbs correctly', () => {
+    const items = [
+      { text: 'Home', link: '/' },
+      { text: 'Category', link: '/category' },
+      { text: 'Item', link: '/category/item' }
+    ];
 
-        expect(linkElements.length).toBe(items.filter(item => item.link).length);
+    const wrapper = shallowMount(Breadcrumb, {
+      props: { items },
+      global: mocks
     });
 
-    // it('calls onLinkClick on link click', async () => {
-    //     const onLinkClick = vi.fn();
-    //     const items = [
-    //         { text: 'Home', link: '/' },
-    //         { text: 'Category' } // No link
-    //     ];
-    //
-    //     const wrapper = shallowMount(Breadcrumb, {
-    //         props: { items, onLinkClick },
-    //         global: mocks
-    //     });
-    //
-    //     const link = wrapper.find('[to]');
-    //     await link.trigger('click.native');
-    //     expect(onLinkClick).toHaveBeenCalled();
-    // });
+    const linkElements = wrapper.findAll('[to]');
 
-    it('calls onLinkClick when a link is clicked', async () => {
-        const onLinkClick = vi.fn();
-        const items = [
-            { text: 'Home', link: '/' },
-            { text: 'Category', link: '/category' }
-        ];
+    expect(linkElements.length).toBe(items.filter(item => item.link).length);
+  });
 
-        const wrapper = shallowMount(Breadcrumb, {
-            props: { items, onLinkClick},
-            global: {
-                stubs: {
-                    BaseText,
-                    RouterLink: true
-                }
-            }
-        });
+  // it('calls onLinkClick on link click', async () => {
+  //     const onLinkClick = vi.fn();
+  //     const items = [
+  //         { text: 'Home', link: '/' },
+  //         { text: 'Category' } // No link
+  //     ];
+  //
+  //     const wrapper = shallowMount(Breadcrumb, {
+  //         props: { items, onLinkClick },
+  //         global: mocks
+  //     });
+  //
+  //     const link = wrapper.find('[to]');
+  //     await link.trigger('click.native');
+  //     expect(onLinkClick).toHaveBeenCalled();
+  // });
 
-        const links = wrapper.findAll('[to]');
-        if (links.length > 0) {
-            await links[0].trigger('click.native');
-            expect(onLinkClick).toHaveBeenCalled();
-        } else {
-            throw new Error('No links found to test');
+  it('calls onLinkClick when a link is clicked', async () => {
+    const onLinkClick = vi.fn();
+    const items = [
+      { text: 'Home', link: '/' },
+      { text: 'Category', link: '/category' }
+    ];
+
+    const wrapper = shallowMount(Breadcrumb, {
+      props: { items, onLinkClick },
+      global: {
+        stubs: {
+          BaseText,
+          RouterLink: true
         }
+      }
     });
+
+    const links = wrapper.findAll('[to]');
+    if (links.length > 0) {
+      await links[0].trigger('click.native');
+      expect(onLinkClick).toHaveBeenCalled();
+    } else {
+      throw new Error('No links found to test');
+    }
+  });
 });

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue

@@ -12,11 +12,11 @@
       <BaseText v-if="items.length > 2" :text="' > '" size="" color="quaternary" class="mr-2 text-sm md:text-lg" />
 
       <BaseText
-          v-if="items.length > 2"
-          :text="truncateText(items[2].text, 36)"
-          size=""
-          color="quaternary"
-          class="text-sm md:text-lg"
+        v-if="items.length > 2"
+        :text="truncateText(items[2].text, 36)"
+        size=""
+        color="quaternary"
+        class="text-sm md:text-lg"
       />
     </div>
 
@@ -26,11 +26,11 @@
         <BaseText v-if="!item.link" class="mr-2 text-sm md:text-lg" :text="item.text" size="" color="quaternary" />
         <router-link v-if="item.link" :to="item.link" @click.native="onLinkClick" class="mr-2">
           <BaseText
-              :text="item.text"
-              size=""
-              color="quaternary"
-              hover-color="bright"
-              class="underline text-sm md:text-lg"
+            :text="item.text"
+            size=""
+            color="quaternary"
+            hover-color="bright"
+            class="underline text-sm md:text-lg"
           />
         </router-link>
       </div>
@@ -39,11 +39,11 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
-  name: "Breadcrumb",
+  name: 'Breadcrumb',
   components: { BaseText, BaseIcon },
   props: {
     items: {
@@ -62,10 +62,10 @@ export default {
     };
   },
   mounted() {
-    window.addEventListener("resize", this.updateScreenSize);
+    window.addEventListener('resize', this.updateScreenSize);
   },
   beforeUnmount() {
-    window.removeEventListener("resize", this.updateScreenSize);
+    window.removeEventListener('resize', this.updateScreenSize);
   },
   methods: {
     truncateText(text, length) {