@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/ComplexInputs/ClubColorPicker/ClubColorPicker.vue

@@ -1,54 +1,49 @@
 <template>
   <div class="flex flex-col mb-4">
-    <BaseText
-        :text="getColor"
-        size="sm"
-        color="quaternary"
-        class="mb-1"
-    />
+    <BaseText :text="getColor" size="sm" color="quaternary" class="mb-1" />
 
     <DropDownMenu
-        :items="colorOptions"
-        :selectedItem="getSelectedColor(selectedColor)"
-        @update:selectedItem="handleColorSelection"
-        width="w-full"
-        dropDownWidth="w-full"
+      :items="colorOptions"
+      :selectedItem="getSelectedColor(selectedColor)"
+      @update:selectedItem="handleColorSelection"
+      width="w-full"
+      dropDownWidth="w-full"
     />
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
 
 export default {
-  name: "ClubColorPicker",
+  name: 'ClubColorPicker',
   emits: ['update:value'],
   components: { BaseText, DropDownMenu },
   props: {
     club: {
       type: Object,
-      required: true,
+      required: true
     },
     isPrimary: {
       type: Boolean,
-      default: true,
+      default: true
     }
   },
   data() {
     return {
       colors: {
-        pink: "#D88DB7",
-        red: "#C74444",
-        blue: "#375085",
-        orange: "#C78544",
-        purple: "#4B3A89",
-        gold: "#ECE672",
-        green: "#427958",
-        silver: "#a0a0a0",
-        navy: "#182a3a",
-        rose: "#904f69",
-      },
+        pink: '#D88DB7',
+        red: '#C74444',
+        blue: '#375085',
+        orange: '#C78544',
+        purple: '#4B3A89',
+        gold: '#ECE672',
+        green: '#427958',
+        silver: '#a0a0a0',
+        navy: '#182a3a',
+        rose: '#904f69'
+      }
     };
   },
   computed: {
@@ -62,19 +57,19 @@ export default {
       return Object.entries(this.colors).map(([name, hex]) => ({
         text: name.charAt(0).toUpperCase() + name.slice(1),
         link: name,
-        icon: "fa-circle",
-        color: hex,
+        icon: 'fa-circle',
+        color: hex
       }));
-    },
+    }
   },
   methods: {
     handleColorSelection(selected) {
-      const field = this.isPrimary ? "Color1" : "Color2";
-      this.$emit("update:value", { field, value: selected.link });
+      const field = this.isPrimary ? 'Color1' : 'Color2';
+      this.$emit('update:value', { field, value: selected.link });
     },
     getSelectedColor(colorName) {
-      return this.colorOptions.find(option => option.link === colorName) || { text: "Select a color", link: "" };
-    },
-  },
+      return this.colorOptions.find(option => option.link === colorName) || { text: 'Select a color', link: '' };
+    }
+  }
 };
 </script>

package/src/stories/Organisms/ComplexInputs/DatePicker/DatePicker.stories.js

@@ -1,26 +1,23 @@
 import DatePicker from './DatePicker.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/DatePicker',
-    component: DatePicker,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 const Template = args => ({
-    components: { DatePicker },
-    setup() {
-        return {
-            args: {
-            }
-        };
-    },
-    methods: {
-    }
+  components: { DatePicker },
+  setup() {
+    return {
+      args: {}
+    };
+  },
+  methods: {}
 });
 
 export const Default = {
-    args: {
-    }
+  args: {}
 };

package/src/stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <VueDatePicker
-        v-model="selectedDate"
-        :formats="datePickerFormats"
-        :min-date="minDate"
-        :enable-time-picker="usesTimePicker"
-        :time-picker="pickerMode === 'time'"
-        placeholder="Select Date or Time"
-        :class="{'dp__input_invalid': invalid}"
-    />
+    <VueDatePicker
+      v-model="selectedDate"
+      :formats="datePickerFormats"
+      :min-date="minDate"
+      :enable-time-picker="usesTimePicker"
+      :time-picker="pickerMode === 'time'"
+      placeholder="Select Date or Time"
+      :class="{ dp__input_invalid: invalid }"
+    />
   </div>
 </template>
 
 <script>
-import { VueDatePicker } from '@vuepic/vue-datepicker';
+import { VueDatePicker } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
 export default {
@@ -41,71 +41,69 @@ export default {
   },
   data() {
     return {
-      selectedDate: this.parseDate(this.setDate),
+      selectedDate: this.parseDate(this.setDate)
     };
   },
   computed: {
     minDate() {
-      return this.userLevel === 'Admin'
-          ? new Date('2018-01-01')
-          : this.getThreeMonthsAgo();
+      return this.userLevel === 'Admin' ? new Date('2018-01-01') : this.getThreeMonthsAgo();
     },
-    usesTimePicker() {
-      return this.pickerMode !== 'date';
-    },
-    datePickerFormats() {
-      const formatsByMode = {
-        date: { input: 'MM/dd/yyyy' },
-        datetime: { input: 'MM/dd/yyyy HH:mm' },
-        time: { input: 'HH:mm' },
-      };
-
-      return formatsByMode[this.pickerMode];
-    },
-  },
+    usesTimePicker() {
+      return this.pickerMode !== 'date';
+    },
+    datePickerFormats() {
+      const formatsByMode = {
+        date: { input: 'MM/dd/yyyy' },
+        datetime: { input: 'MM/dd/yyyy HH:mm' },
+        time: { input: 'HH:mm' }
+      };
+
+      return formatsByMode[this.pickerMode];
+    }
+  },
   watch: {
-    selectedDate(newDate) {
-      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
-        const hours = String(newDate.hours).padStart(2, '0');
-        const minutes = String(newDate.minutes).padStart(2, '0');
-        this.$emit("update:selectedDate", `${hours}:${minutes}`);
-        return;
-      }
-
-      if (this.pickerMode === 'date') {
-        this.$emit("update:selectedDate", this.formatDateOnly(newDate));
-        return;
-      }
-
-      this.$emit("update:selectedDate", newDate);
-    }
-  },
-  methods: {
-    getThreeMonthsAgo() {
-      return new Date(new Date().setMonth(new Date().getMonth() - 3));
-    },
-    parseDate(date) {
-      if (typeof date === 'string') {
-        if (this.pickerMode === 'time') {
-          const [hours, minutes] = date.split(':').map(Number);
-          return { hours, minutes };
-        }
-        const [year, month, day] = date.slice(0, 10).split('-').map(Number);
-        return new Date(year, month - 1, day);
-      }
-      return date;
-    },
-    formatDateOnly(date) {
-      if (!date) return '';
-      if (typeof date === 'string') return date.slice(0, 10);
-
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      return `${year}-${month}-${day}`;
-    }
-  }
-}
+    selectedDate(newDate) {
+      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
+        const hours = String(newDate.hours).padStart(2, '0');
+        const minutes = String(newDate.minutes).padStart(2, '0');
+        this.$emit('update:selectedDate', `${hours}:${minutes}`);
+        return;
+      }
+
+      if (this.pickerMode === 'date') {
+        this.$emit('update:selectedDate', this.formatDateOnly(newDate));
+        return;
+      }
+
+      this.$emit('update:selectedDate', newDate);
+    }
+  },
+  methods: {
+    getThreeMonthsAgo() {
+      return new Date(new Date().setMonth(new Date().getMonth() - 3));
+    },
+    parseDate(date) {
+      if (typeof date === 'string') {
+        if (this.pickerMode === 'time') {
+          const [hours, minutes] = date.split(':').map(Number);
+          return { hours, minutes };
+        }
+        const [year, month, day] = date.slice(0, 10).split('-').map(Number);
+        return new Date(year, month - 1, day);
+      }
+      return date;
+    },
+    formatDateOnly(date) {
+      if (!date) return '';
+      if (typeof date === 'string') return date.slice(0, 10);
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+  }
+};
 </script>
 
 <style scoped>
@@ -131,7 +129,7 @@ export default {
   color: rgb(178, 177, 183);
   font-size: 14px;
   border-radius: 8px;
-  border: 1px solid #D5E4EE;
+  border: 1px solid #d5e4ee;
 }
 
 :deep(.dp__input_invalid) {

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

@@ -1,44 +1,42 @@
 import DropDownMenu from './DropDownMenu.vue';
 
-
 export default {
-    title: 'Organisms/ComplexInputs/DropDownMenu',
-    component: DropDownMenu,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/DropDownMenu',
+  component: DropDownMenu,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    args: {
-        label: 'Sort By',
-        items: [
-            {text: 'Text1', link: '/link1'},
-            {text: 'Text2', link: '/link2'},
-            {text: 'Text3', link: '/link3'}
-        ],
-        selectedItem: {text: 'Text1', link: '/link1'}
-    }
+  args: {
+    label: 'Sort By',
+    items: [
+      { text: 'Text1', link: '/link1' },
+      { text: 'Text2', link: '/link2' },
+      { text: 'Text3', link: '/link3' }
+    ],
+    selectedItem: { text: 'Text1', link: '/link1' }
+  }
 };
 
 export const DropDownAlso = {
-    args: {
-        label: '',
-        items: [
-            { text: 'Purrfect Warriors', link: '/purrfect-warriors' },
-            { text: 'Whisker Tactics', link: '/whisker-tactics' },
-            { text: 'Meowtains of Fury', link: '/meowtains-of-fury' },
-            { text: 'Feline Fury', link: '/feline-fury' },
-            { text: 'Claws of Destiny', link: '/claws-of-destiny' },
-            { text: 'Kitty Knights', link: '/kitty-knights' },
-            { text: 'Paws of Valor', link: '/paws-of-valor' },
-            { text: 'Mew-sketters', link: '/mew-sketters' },
-            { text: 'Purr-suit of Power', link: '/purr-suit-of-power' },
-            { text: 'Cat-astrophic Force', link: '/cat-astrophic-force' }
-        ],
-        selectedItem: {text: '', link: ''},
-        width:"w-full",
-        dropDownWidth:"w-[342px]"
-    }
+  args: {
+    label: '',
+    items: [
+      { text: 'Purrfect Warriors', link: '/purrfect-warriors' },
+      { text: 'Whisker Tactics', link: '/whisker-tactics' },
+      { text: 'Meowtains of Fury', link: '/meowtains-of-fury' },
+      { text: 'Feline Fury', link: '/feline-fury' },
+      { text: 'Claws of Destiny', link: '/claws-of-destiny' },
+      { text: 'Kitty Knights', link: '/kitty-knights' },
+      { text: 'Paws of Valor', link: '/paws-of-valor' },
+      { text: 'Mew-sketters', link: '/mew-sketters' },
+      { text: 'Purr-suit of Power', link: '/purr-suit-of-power' },
+      { text: 'Cat-astrophic Force', link: '/cat-astrophic-force' }
+    ],
+    selectedItem: { text: '', link: '' },
+    width: 'w-full',
+    dropDownWidth: 'w-[342px]'
+  }
 };
-

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

@@ -1,13 +1,36 @@
 <template>
   <div :class="computedClass" ref="dropdownContainer">
-    <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white" :class="width" @click="handleDropDown">
-      <BaseInput :placeholder="label" :value="getSelectedText" class="w-full text-xs md:text-sm" @click="clearInput" @keyup="filterDropDown" />
+    <div
+      class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white"
+      :class="width"
+      @click="handleDropDown"
+    >
+      <BaseInput
+        :placeholder="label"
+        :value="getSelectedText"
+        class="w-full text-xs md:text-sm"
+        @click="clearInput"
+        @keyup="filterDropDown"
+      />
       <i class="fa-solid pt-1 fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">
-      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-10 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
-        <a v-for="item in localItems" :key="item.link" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect flex items-center space-x-2">
-          <span v-if="item.color" :style="{ backgroundColor: item.color }" class="w-4 h-4 rounded-full border border-gray-300"></span>
+      <div
+        v-if="isDropDownOpen"
+        class="flex flex-col shadow-lg mt-10 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44"
+        :class="dropDownWidth"
+      >
+        <a
+          v-for="item in localItems"
+          :key="item.link"
+          @click="handleClick(item)"
+          class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect flex items-center space-x-2"
+        >
+          <span
+            v-if="item.color"
+            :style="{ backgroundColor: item.color }"
+            class="w-4 h-4 rounded-full border border-gray-300"
+          ></span>
           <BaseText :text="item.text" color="quinary" size=" " weight="normal" class="py-0.5 text-xs md:text-sm" />
         </a>
       </div>
@@ -16,8 +39,8 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
 
 export default {
   name: 'DropDownMenu',
@@ -25,39 +48,39 @@ export default {
   components: { BaseInput, BaseText },
   props: {
     label: {
-      type: String,
+      type: String
     },
     items: {
       type: Array,
-      required: true,
+      required: true
     },
     selectedItem: {
       type: [Object, String],
-      required: true,
+      required: true
     },
     width: {
       type: String,
-      default: 'w-44',
+      default: 'w-44'
     },
     dropDownWidth: {
       type: String,
-      default: 'w-44',
+      default: 'w-44'
     },
     alignEnd: {
       type: Boolean,
-      default: true,
+      default: true
     },
     invalid: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       localItems: this.items,
       isDropDownOpen: false,
       localSelectedItem: this.selectedItem,
-      backupSelectedItem: { ...this.selectedItem },
+      backupSelectedItem: { ...this.selectedItem }
     };
   },
   mounted() {
@@ -69,24 +92,24 @@ export default {
   watch: {
     items(newItems) {
       this.localItems = newItems;
-    },
+    }
   },
   computed: {
     computedClass() {
       return [
-        "flex flex-row w-full relative rounded-lg",
-        this.invalid ? "border border-alarm" : "",
-        this.alignEnd ? "justify-end" : "",
+        'flex flex-row w-full relative rounded-lg',
+        this.invalid ? 'border border-alarm' : '',
+        this.alignEnd ? 'justify-end' : ''
       ];
     },
     getSelectedText() {
-      return this.localSelectedItem.text || "";
-    },
+      return this.localSelectedItem.text || '';
+    }
   },
   methods: {
     clearInput() {
       this.backupSelectedItem = { ...this.localSelectedItem };
-      this.localSelectedItem = { text: '', Link: null};
+      this.localSelectedItem = { text: '', Link: null };
     },
     restorePreviousValue() {
       if (!this.localSelectedItem?.text?.trim?.()) {
@@ -110,7 +133,7 @@ export default {
     filterDropDown(event) {
       const filter = event?.target?.value?.toLowerCase();
       this.localItems = this.items.filter(item => item?.text?.toLowerCase().includes(filter));
-    },
-  },
+    }
+  }
 };
 </script>

package/src/stories/Organisms/ComplexInputs/FindLocation/FindLocation.stories.js

@@ -1,30 +1,30 @@
 import FindLocation from './FindLocation.vue';
 import mockLocation from '../../../../mocks/locationMock.js';
 export default {
-    title: 'Organisms/ComplexInputs/FindLocation',
-    component: FindLocation,
-    tags: ['autodocs'],
-    args: {
-        locations: mockLocation,
-        addNewText: "Add New Location"
+  title: 'Organisms/ComplexInputs/FindLocation',
+  component: FindLocation,
+  tags: ['autodocs'],
+  args: {
+    locations: mockLocation,
+    addNewText: 'Add New Location'
+  },
+  argTypes: {
+    locations: {
+      control: {
+        type: 'object'
+      }
     },
-    argTypes: {
-        locations: {
-            control: {
-                type: 'object'
-            }
-        },
-        addNewText: {
-            control: {
-                type: 'text'
-            }
-        }
+    addNewText: {
+      control: {
+        type: 'text'
+      }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        locations: mockLocation,
-        addNewText: "Add New Location"
-    }
+  args: {
+    locations: mockLocation,
+    addNewText: 'Add New Location'
+  }
 };