@dcrackel/hematournamentui 1.0.329 → 1.0.331

package/src/stories/Atoms/Input/BaseInput.vue

@@ -5,18 +5,17 @@
         :class="baseClasses"
         :placeholder="placeholder"
         @input="onInput($event.target.value)"
+        @focus="onFocus"
+        @blur="onBlur"
     />
   </div>
 
 </template>
 
 <script>
-import {computed, ref, watch} from 'vue';
-import BaseIcon from "../Icon/BaseIcon.vue";
 
 export default {
   name: 'BaseInput',
-  components: {BaseIcon},
   props: {
     placeholder: {
       type: [String, Number],
@@ -56,26 +55,25 @@ export default {
       type: String,
       default: 'primary',
       validator: value => ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(value)
-    },
-    emits: ['click'],
+    }
   },
-  setup: function (props, {emit}) {
-    const internalValue = ref(props.value);
-    const timeout = ref(null);
-
-    watch(() => props.value, newValue => {
-      internalValue.value = newValue;
-    });
-
-    const baseClasses = computed(() => {
+  data() {
+    return {
+      internalValue: this.value,
+      currentPlaceholder: this.placeholder,
+      timeout: null
+    };
+  },
+  computed: {
+    baseClasses() {
       let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
-      if (props.addBorder) {
-        classes += props.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
+      if (this.addBorder) {
+        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
       }
 
-      if (props.centerInput) classes +=  ' text-center';
+      if (this.centerInput) classes += ' text-center';
 
-      switch (props.size) {
+      switch (this.size) {
         case 'xs':
           classes += ' text-xs';
           break;
@@ -106,21 +104,28 @@ export default {
       }
 
       return classes;
-    });
-
-    const onInput = () => {
-      clearTimeout(timeout.value);
-      timeout.value = setTimeout(() => {
-        emit('update:value', internalValue.value);
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  methods: {
+    onInput() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.$emit('update:value', this.internalValue);
       }, 300);
+    },
+    onFocus() {
+      this.currentPlaceholder = '';
+    },
+    onBlur() {
+      if (!this.internalValue) {
+        this.currentPlaceholder = this.placeholder;
+      }
     }
-
-    return {
-      internalValue,
-      baseClasses,
-      onInput
-    };
   }
-
 };
 </script>

package/src/stories/Organisms/Cards/TableauBoutCard/SpacingConfig.js

@@ -47,5 +47,25 @@ export const spacingConfig = {
             'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' },
         }
     },
+    'Table of 32': {
+        large: {
+            'Table of 32': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
+            'Table of 16': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
+            'Table of 8': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
+            Quarterfinal: { getTopSpace: 'mt-[11.7rem] mb-[13.7rem]', getCardSpace: 'mt-[25.8rem]'  },
+            Semifinal: { getTopSpace: 'mt-[24.3rem] mb-[29rem]', getCardSpace: 'mt-[53.6rem]'  },
+            Final: { getTopSpace: 'mt-[51.5rem] ', getCardSpace: 'mt-1'  },
+            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
+        },
+        small: {
+            'Table of 32': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
+            'Table of 16': { getTopSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]' },
+            'Table of 8': { getTopSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]'  },
+            Quarterfinal: { getTopSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]'  },
+            Semifinal: { getTopSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]'  },
+            Final: { getTopSpace: 'mt-[34.1rem]', getCardSpace: 'mt-1'  },
+            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' },
+        }
+    },
     // Add up to Table of 256 as needed
 };

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

@@ -18,3 +18,25 @@ export const Default = {
         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]"
+    }
+};
+

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

@@ -1,13 +1,12 @@
 <template>
   <div class="flex flex-row w-full relative" :class="[alignEnd ? 'justify-end' : '']" 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">
-      <BaseText v-if="label.length > 1" :text="label" color="quinary" size="sm" weight="normal" />
-      <BaseText :text="selectedItem.text" color="quaternary" size="sm" weight="normal" />
-      <i class="fa-solid fa-chevron-down text-xs text-quinary" />
+      <BaseInput :placeholder="label" :value="selectedItem.text" class="w-full"  size="sm" @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-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
-        <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
+      <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.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
           <BaseText :text="item.text" color="quinary" size="sm" weight="normal" class="py-0.5" />
         </a>
       </div>
@@ -17,10 +16,11 @@
 
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
 
 export default {
   name: 'DropDownMenu',
-  components: { BaseText },
+  components: {BaseInput, BaseText },
   props: {
     label: {
       type: String,
@@ -49,6 +49,7 @@ export default {
   },
   data() {
     return {
+      localItems: this.items,
       isDropDownOpen: false
     };
   },
@@ -64,6 +65,10 @@ export default {
       if (this.$refs.dropdownContainer && !this.$refs.dropdownContainer.contains(event.target)) {
         this.isDropDownOpen = false;
       }
+    },
+    filterDropDown(event) {
+      const filter = event.target.value.toLowerCase();
+      this.localItems = this.items.filter(item => item.text.toLowerCase().includes(filter));
     }
   },
   mounted() {

package/src/stories/Organisms/Containers/TableauLines/SpacingConfig.js

@@ -36,7 +36,7 @@ export const spacingConfig = {
             'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
             Quarterfinal: { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
             Semifinal: { getTopSpace: 'mt-[12.7rem]', getConnectorHeight: 'h-[28.3rem]', getTopSpaceForLine: '' },
-            Final: { getTopSpace: 'h-[30rem] mt-[25rem] -ml-[309px]', getBottomLine: 'h-[30rem] mt-[2.5rem] -ml-[309px]' },
+            Final: { getTopSpace: 'mt-[15rem] h-[40rem] -ml-[309px]', getBottomLine: 'h-[40rem] mt-[2.5rem] -ml-[309px]' },
             'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         small: {
@@ -48,5 +48,25 @@ export const spacingConfig = {
             'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         }
     },
+    'Table of 32': {
+        large: {
+            'Table of 32': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+            'Table of 16': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+            'Table of 8': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
+            Quarterfinal: { getTopSpace: 'mt-[11.7rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[12.5rem]' },
+            Semifinal: { getTopSpace: 'mt-[25.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: '' },
+            Final: { getTopSpace: 'mt-[49.1rem] h-[25rem]  -ml-[309px]', getBottomLine: 'h-[30rem] mt-[2.5rem] -ml-[309px]' },
+            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
+        },
+        small: {
+            'Table of 32': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
+            'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
+            'Table of 8': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
+            Quarterfinal: { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
+            Semifinal: { getTopSpace: 'mt-[16.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+            Final: { getTopSpace: 'h-[256px] mt-[21rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
+            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
+        }
+    },
     // Add up to Table of 256 as needed
 };

package/src/stories/Templates/EventManagement/Bracket/Bracket.stories.js

@@ -61,6 +61,16 @@ export const TableWithTwentyTwo = {
     }
 };
 
+export const tableOfThirtyTwo = {
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts,
+        eventRules: getDEWithBouts.eventRules,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        connectedToServer: true,
+        status: 'de'
+    }
+};
+
 export const noBoutsYet = {
     args: {
         bouts: [],