@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue

@@ -1,24 +1,42 @@
 <template>
   <section class="flex flex-row w-full justify-between">
     <div class="rounded-lg w-3/4">
-      <BaseText :text="title" color="primary" size=""  class="text-lg mt-1 md:mt-0 md:text-2xl" />
+      <BaseText :text="title" color="primary" size="" class="text-lg mt-1 md:mt-0 md:text-2xl" />
     </div>
     <div v-if="showButtons" class="flex flex-row h-8 w-1/4 justify-end">
-      <BaseButton label="Soonish" color="primary" size="sm" :selected="localSelected === 'Default'" @buttonClick="handleTimeFrame('Default')" />
-      <BaseButton label="Future" color="primary" size="sm" :selected="localSelected === 'Upcoming'" @buttonClick="handleTimeFrame('Upcoming')" />
-      <BaseButton label="Past" color="primary" size="sm" :selected="localSelected === 'Past'" @buttonClick="handleTimeFrame('Past')" />
+      <BaseButton
+        label="Soonish"
+        color="primary"
+        size="sm"
+        :selected="localSelected === 'Default'"
+        @buttonClick="handleTimeFrame('Default')"
+      />
+      <BaseButton
+        label="Future"
+        color="primary"
+        size="sm"
+        :selected="localSelected === 'Upcoming'"
+        @buttonClick="handleTimeFrame('Upcoming')"
+      />
+      <BaseButton
+        label="Past"
+        color="primary"
+        size="sm"
+        :selected="localSelected === 'Past'"
+        @buttonClick="handleTimeFrame('Past')"
+      />
     </div>
     <div v-if="!showButtons" class="flex flex-row h-8 w-1/4 justify-end mt-1">
-      <BaseButton label="Add New" color="primary" size="xs"  @buttonClick="handleAddNew" />
+      <BaseButton label="Add New" color="primary" size="xs" @buttonClick="handleAddNew" />
     </div>
   </section>
 </template>
 
 <script>
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'FilterUpcomingPast',
@@ -30,7 +48,7 @@ export default {
     BaseInput
   },
   props: {
-    selected : {
+    selected: {
       type: String,
       default: 'Default'
     },
@@ -50,11 +68,11 @@ export default {
   },
   methods: {
     handleTimeFrame(timeFrame) {
-      this.$emit('timeFrame', timeFrame)
-      this.localSelected = timeFrame
+      this.$emit('timeFrame', timeFrame);
+      this.localSelected = timeFrame;
     },
     handleAddNew() {
-      this.$emit('addNew')
+      this.$emit('addNew');
     }
   }
 };

package/src/stories/Molecules/Indicators/ServerConnected/ServerConnected.stories.js

@@ -1,42 +1,42 @@
 import ServerConnected from './ServerConnected.vue';
 
 export default {
-    title: 'Molecules/Indicators/ServerConnected',
-    component: ServerConnected,
-    tags: ['autodocs'],
-    args: {
-        connectedToServer: true,
-        statusText: 'Connected'
+  title: 'Molecules/Indicators/ServerConnected',
+  component: ServerConnected,
+  tags: ['autodocs'],
+  args: {
+    connectedToServer: true,
+    statusText: 'Connected'
+  },
+  argTypes: {
+    connectedToServer: {
+      control: 'boolean',
+      description: 'Indicates if the server is connected'
     },
-    argTypes: {
-        connectedToServer: {
-            control: 'boolean',
-            description: 'Indicates if the server is connected'
-        },
-        statusText: {
-            control: 'text',
-            description: 'Text to display for the connection status'
-        }
+    statusText: {
+      control: 'text',
+      description: 'Text to display for the connection status'
     }
+  }
 };
 
 export const Connected = {
-    args: {
-        connectedToServer: true,
-        statusText: 'Connected'
-    }
+  args: {
+    connectedToServer: true,
+    statusText: 'Connected'
+  }
 };
 
 export const Disconnected = {
-    args: {
-        connectedToServer: false,
-        statusText: 'Disconnected'
-    }
+  args: {
+    connectedToServer: false,
+    statusText: 'Disconnected'
+  }
 };
 
 export const CustomText = {
-    args: {
-        connectedToServer: true,
-        statusText: 'Online'
-    }
+  args: {
+    connectedToServer: true,
+    statusText: 'Online'
+  }
 };

package/src/stories/Molecules/Indicators/ServerConnected/ServerConnected.vue

@@ -2,8 +2,10 @@
   <section>
     <div class="flex flex-row">
       <div class="w-[21px] h-[20px] rounded-full border-2 mt-2 mr-2">
-        <div :class="connectedToServer ? 'bg-green' : 'bg-red'" class="w-[14px] h-[14px] rounded-full mt-[1px] ml-[1px]">
-        </div>
+        <div
+          :class="connectedToServer ? 'bg-green' : 'bg-red'"
+          class="w-[14px] h-[14px] rounded-full mt-[1px] ml-[1px]"
+        ></div>
       </div>
       <BaseText class="mt-[0.5rem]" color="quinary" size="sm" :text="statusText" />
     </div>
@@ -11,11 +13,11 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'ServerConnected',
-  components: {BaseText},
+  components: { BaseText },
   props: {
     connectedToServer: {
       type: Boolean,
@@ -29,4 +31,3 @@ export default {
   }
 };
 </script>
-

package/src/stories/Molecules/Inputs/MultiSelect/MultiSelect.stories.js

@@ -1,50 +1,50 @@
 import MultiSelect from './MultiSelect.vue';
 
 export default {
-    title: 'Molecules/Inputs/MultiSelect',
-    component: MultiSelect,
-    tags: ['autodocs'],
-    args: {
-        initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
-        availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-        labelLeft: true
+  title: 'Molecules/Inputs/MultiSelect',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  args: {
+    initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
+    availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+    labelLeft: true
+  },
+  argTypes: {
+    initialSelectedTags: {
+      control: 'array',
+      description: 'Initial selected tags'
     },
-    argTypes: {
-        initialSelectedTags: {
-            control: 'array',
-            description: 'Initial selected tags'
-        },
-        availableTags: {
-            control: 'array',
-            description: 'Available tags to choose from'
-        },
-        labelLeft: {
-            control: 'boolean',
-            description: 'Label on the left side'
-        }
+    availableTags: {
+      control: 'array',
+      description: 'Available tags to choose from'
+    },
+    labelLeft: {
+      control: 'boolean',
+      description: 'Label on the left side'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
-        availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-        labelLeft: true
-    }
+  args: {
+    initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
+    availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+    labelLeft: true
+  }
 };
 
 export const CustomInitialTags = {
-    args: {
-        initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
-        availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-        labelLeft: false
-    }
+  args: {
+    initialSelectedTags: ['Win Percent', 'Indicator', 'Points Scored'],
+    availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+    labelLeft: false
+  }
 };
 
 export const AllTagsAvailable = {
-    args: {
-        initialSelectedTags: [],
-        availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-        labelLeft: true
-    }
+  args: {
+    initialSelectedTags: [],
+    availableTags: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+    labelLeft: true
+  }
 };

package/src/stories/Molecules/Inputs/MultiSelect/MultiSelect.vue

@@ -1,28 +1,33 @@
 <template>
   <div class="w-full mt-4">
-    <BaseText :text="label" size="sm" class="mb-4" color="quinary"/>
+    <BaseText :text="label" size="sm" class="mb-4" color="quinary" />
     <div class="flex flex-wrap mb-2 rounded-md p-1 border border-dropdownSelect shadow">
       <span v-for="(tag, index) in selectedTags" :key="index" class="m-1">
-        <BaseButton :label="tag" iconName="fa-xmark" :iconLeft="false" type="tertiary" @buttonClick="removeTag(index)"/>
+        <BaseButton
+          :label="tag"
+          iconName="fa-xmark"
+          :iconLeft="false"
+          type="tertiary"
+          @buttonClick="removeTag(index)"
+        />
       </span>
     </div>
     <div class="flex flex-wrap gap-2">
       <span v-for="tag in availableTags" :key="tag" class="">
-        <BaseButton :label="tag" type="tertiary" @buttonClick="addTag(tag)"/>
+        <BaseButton :label="tag" type="tertiary" @buttonClick="addTag(tag)" />
       </span>
     </div>
   </div>
 </template>
 
-
 <script>
-import BaseButton from "../../Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from '../../Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
-  name: "MultiSelect",
+  name: 'MultiSelect',
   emits: ['update:selectedTags'],
-  components: {BaseText, BaseButton},
+  components: { BaseText, BaseButton },
   props: {
     label: {
       type: String,

package/src/stories/Molecules/Inputs/Toggle/Toggle.stories.js

@@ -1,42 +1,42 @@
 import ToggleSwitch from './Toggle.vue';
 
 export default {
-    title: 'Molecules/Inputs/ToggleSwitch',
-    component: ToggleSwitch,
-    tags: ['autodocs'],
-    args: {
-        checked: false,
-        label: 'Toggle me'
+  title: 'Molecules/Inputs/ToggleSwitch',
+  component: ToggleSwitch,
+  tags: ['autodocs'],
+  args: {
+    checked: false,
+    label: 'Toggle me'
+  },
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Determines if the toggle is checked'
     },
-    argTypes: {
-        checked: {
-            control: 'boolean',
-            description: 'Determines if the toggle is checked'
-        },
-        label: {
-            control: 'text',
-            description: 'Label text for the toggle'
-        }
+    label: {
+      control: 'text',
+      description: 'Label text for the toggle'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        checked: false,
-        label: 'Toggle me'
-    }
+  args: {
+    checked: false,
+    label: 'Toggle me'
+  }
 };
 
 export const Checked = {
-    args: {
-        checked: true,
-        label: 'Toggle me'
-    }
+  args: {
+    checked: true,
+    label: 'Toggle me'
+  }
 };
 
 export const CustomLabel = {
-    args: {
-        checked: false,
-        label: 'Custom Label'
-    }
+  args: {
+    checked: false,
+    label: 'Custom Label'
+  }
 };

package/src/stories/Molecules/Inputs/Toggle/Toggle.vue

@@ -3,10 +3,13 @@
     <BaseText v-if="labelLeft" :text="label" size="sm" class="mr-2" color="quinary" />
     <span class="relative rounded-2xl">
       <input type="checkbox" class="sr-only" :checked="isChecked" @change="handleCheckboxChange" />
-      <span class="block h-5 w-8 rounded-full transition-colors duration-300 ease-in-out" :class="[isChecked ? 'bg-toggleBackground' : 'bg-gridBoxHeader']"></span>
       <span
-          :class="dotClasses"
-          class="dot absolute left-1 top-1 h-3 w-3 rounded-full bg-white transition delay-150"
+        class="block h-5 w-8 rounded-full transition-colors duration-300 ease-in-out"
+        :class="[isChecked ? 'bg-toggleBackground' : 'bg-gridBoxHeader']"
+      ></span>
+      <span
+        :class="dotClasses"
+        class="dot absolute left-1 top-1 h-3 w-3 rounded-full bg-white transition delay-150"
       ></span>
     </span>
     <BaseText v-if="!labelLeft" :text="label" size="sm" class="mr-2 ml-2" color="quinary" />
@@ -14,12 +17,12 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'Toggle',
   emits: ['update:checked'],
-  components: {BaseText},
+  components: { BaseText },
   props: {
     checked: {
       type: Boolean,

package/src/stories/Molecules/Menus/TabBar/TabBar.stories.js

@@ -1,26 +1,26 @@
 import TabBar from './TabBar.vue';
 
 export default {
-    title: 'Molecules/Menus/TabBar/TabBar',
-    component: TabBar,
-    tags: ['autodocs']
+  title: 'Molecules/Menus/TabBar/TabBar',
+  component: TabBar,
+  tags: ['autodocs']
 };
 
-const Template = (args) => ({
-    components: {TabBar},
-    setup() {
-        return {args};
-    }
+const Template = args => ({
+  components: { TabBar },
+  setup() {
+    return { args };
+  }
 });
 
 export const Default = {
-    args: {
-        buttons: [
-            {label: 'Basic'},
-            {label: 'Details'},
-            {label: 'Events'},
-            {label: 'Payments'}, // should be greyed out if ferrotas not being used for this
-            {label: 'Staff'}
-        ]
-    }
-};
+  args: {
+    buttons: [
+      { label: 'Basic' },
+      { label: 'Details' },
+      { label: 'Events' },
+      { label: 'Payments' }, // should be greyed out if ferrotas not being used for this
+      { label: 'Staff' }
+    ]
+  }
+};

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

@@ -5,10 +5,9 @@
 </template>
 
 <script>
-
 export default {
   name: 'TabBar',
   components: {},
-  props: {},
+  props: {}
 };
 </script>

package/src/stories/Molecules/Modals/AddDisplayModal/AddDisplay.stories.js

@@ -1,37 +1,46 @@
 import AddDisplayModal from './AddDisplayModal.vue';
 
 export default {
-    title: 'Molecules/Modals/AddDisplayModal',
-    component: AddDisplayModal,
-    tags: ['autodocs'],
-    args: {
-        show: true,
-        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
-        userClub: { id: 1, name: 'Club 1' },
-        isAdmin: true
-    },
-    argTypes: {
-        show: { control: { type: 'boolean' } },
-        clubs: { control: { type: 'array' } },
-        userClub: { control: { type: 'object' } },
-        isAdmin: { control: { type: 'boolean' } }
-    },
+  title: 'Molecules/Modals/AddDisplayModal',
+  component: AddDisplayModal,
+  tags: ['autodocs'],
+  args: {
+    show: true,
+    clubs: [
+      { id: 1, name: 'Club 1' },
+      { id: 2, name: 'Club 2' }
+    ],
+    userClub: { id: 1, name: 'Club 1' },
+    isAdmin: true
+  },
+  argTypes: {
+    show: { control: { type: 'boolean' } },
+    clubs: { control: { type: 'array' } },
+    userClub: { control: { type: 'object' } },
+    isAdmin: { control: { type: 'boolean' } }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
-        userClub: { id: 1, name: 'Club 1' },
-        isAdmin: true
-    },
+  args: {
+    show: true,
+    clubs: [
+      { id: 1, name: 'Club 1' },
+      { id: 2, name: 'Club 2' }
+    ],
+    userClub: { id: 1, name: 'Club 1' },
+    isAdmin: true
+  }
 };
 
 export const WithInitialCount = {
-    args: {
-        show: true,
-        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
-        userClub: { id: 2, name: 'Club 2' },
-        isAdmin: false
-    },
+  args: {
+    show: true,
+    clubs: [
+      { id: 1, name: 'Club 1' },
+      { id: 2, name: 'Club 2' }
+    ],
+    userClub: { id: 2, name: 'Club 2' },
+    isAdmin: false
+  }
 };

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

@@ -1,32 +1,42 @@
 <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="handleClose">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      @click="handleClose"
+    >
       <div class="w-full mx-2 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="handleClose"/>
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="handleClose" />
         </div>
-        <AddDisplay :kiosk="kiosk" :events="events" :staff="staff" @update:cancel="handleClose" @update:submit="handleSubmit" />
+        <AddDisplay
+          :kiosk="kiosk"
+          :events="events"
+          :staff="staff"
+          @update:cancel="handleClose"
+          @update:submit="handleSubmit"
+        />
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-import DirectorCard from "../../../Organisms/Cards/Director/DirectorCard.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import AddDisplay from "../../../Organisms/Form/AddDisplay/AddDisplay.vue";
+import DirectorCard from '../../../Organisms/Cards/Director/DirectorCard.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import AddDisplay from '../../../Organisms/Form/AddDisplay/AddDisplay.vue';
 
 export default {
-  name: "AddDisplayModal",
+  name: 'AddDisplayModal',
   emits: ['close:closeModal', 'submit:kiosk'],
-  components: {AddDisplay, BaseIcon, DirectorCard},
+  components: { AddDisplay, BaseIcon, DirectorCard },
   props: {
     show: {
       type: Boolean,
@@ -43,7 +53,7 @@ export default {
     staff: {
       type: Array,
       default: () => []
-    },
+    }
   },
   methods: {
     handleClose() {