@dcrackel/meyersquaredui 1.0.169 → 1.0.171

package/src/stories/Organisms/Cards/TournamentListCard/TournamentListCard.vue

@@ -78,6 +78,9 @@ export default {
       type: Object,
       required: true,
     },
+    index: {
+      type: Number
+    },
     isLoading: {
       type: Boolean,
       default: false,
@@ -109,6 +112,7 @@ export default {
       return this.data.TotalParticipants || 0;
     },
   },
+  emits: ['toggle-bookmark', 'grid-card-click'],
   methods: {
     toggleBookmark() {
       this.$emit('toggle-bookmark', !this.isBookmarked);

package/src/stories/Organisms/Headers/TournamentHeader/TournamentHeader.stories.js

@@ -1,7 +1,7 @@
 import LeaderboardHeader from './TournamentHeader.vue';
 
 export default {
-    title: 'Molecules/LeaderboardHeader',
+    title: 'Organisms/Headers/TournamentHeader',
     component: LeaderboardHeader,
 };
 

package/src/stories/Organisms/Headers/TournamentHeader/TournamentHeader.vue

@@ -57,6 +57,7 @@ export default {
       type: String
     },
   },
+  emits: ['filter-change', 'weapon-change'],
   data() {
     return {
       selectedFilter: this.selectedItem,

package/src/stories/Organisms/Tableau/Tableau.stories.js

@@ -1,6 +1,6 @@
 import Tableau from './Tableau.vue';
-//import getDEWithBouts from '../../../mocks/getDEWithBouts.js';
-import getDEWithBouts from '../../../mocks/getDEWithBouts2.js';
+import getDEWithBouts from '../../../mocks/getDEWithBouts.js';
+//import getDEWithBouts from '../../../mocks/getDEWithBouts2.js';
 
 export default {
     title: 'Organisms/Tableau',

package/src/stories/Organisms/Tableau/Tableau.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="w-full overflow-x-auto mt-4 scrollbar-thin">
-    <div class="min-w-full flex justify-center">
+    <div class="min-w-[1300px] flex justify-center">
     <div v-for="(bouts, roundName) in groupedBouts" :key="roundName">
       <TableauColumn :bouts="bouts"
                      :hostingClubColors="hostingClubColors"

package/src/stories/Organisms/Tableau/TableauActiveBoutCard/SpacingConfig.js

@@ -20,7 +20,7 @@ export const SpacingConfig = {
         },
         small: {
             'Table of 8': { topSpace: 'mt-0 mb-4', leftLine: 'h-0', timeBox: '-right-[35px]', gap: 0},
-            Semifinal: { topSpace: 'mt-[0.7rem] mb-[1.8rem]', leftLine: 'h-[56px] mt-[19px] -ml-[2px]', timeBox: '-right-[35px]', gap: 32,},
+            Semifinal: { topSpace: 'mt-[0.7rem] mb-[1.8rem]', leftLine: 'h-[56px] mt-[19px] -ml-[1px]', timeBox: '-right-[35px]', gap: 32,},
             Final: { topSpace: 'mt-[6rem] ml-4', leftLine: 'h-0', timeBox: '-right-[35px] top-[53px]',gap: 32,},
             'Third Place': { topSpace: '-mt-8 -ml-40', leftLine: 'h-0', timeBox: '-right-[35px] top-[69px]',gap: 0,}
         }

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

@@ -13,13 +13,10 @@ export const SpacingConfig = {
     },
     'Table of 8': {
         large: {
-            'Table of 8': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-            Semifinal: { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]'  },
-            Final: { getTopSpace: 'mt-[11rem]', getCardSpace: 'mt-1'  },
-            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
         },
         small: {
             'Table of 8': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
+            Quarterfinal: { getTopSpace: 'mt-[0.7rem] mb-[1.75rem]', getCardSpace: 'mt-[2.3rem]' },
             Semifinal: { getTopSpace: 'mt-[0.7rem] mb-[1.8rem]', getCardSpace: 'mt-[2.3rem]'  },
             Final: { getTopSpace: 'mt-[6rem] ml-4', getCardSpace: 'mt-1'  },
             'Third Place': { getTopSpace: '-mt-[2rem] -ml-[10rem]', getCardSpace: 'mt-1' },
@@ -27,47 +24,29 @@ export const SpacingConfig = {
     },
     'Table of 16': {
         large: {
-            'Table of 16': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-            'Table of 8': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-            Semifinal: { getTopSpace: 'mt-[4.6rem] mb-[7rem]', getCardSpace: 'mt-[11.5rem]'  },
-            Final: { getTopSpace: 'mt-[22.5rem]', getCardSpace: 'mt-1'  },
-            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
         },
         small: {
             'Table of 16': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
             'Table of 8': { getTopSpace: 'mt-[0.7rem] mb-[1.75rem]', getCardSpace: 'mt-[2.3rem]' },
             Semifinal: { getTopSpace: 'mt-[2.25rem] mb-[3.63rem]', getCardSpace: 'mt-[5.9rem]'  },
-            Final: { getTopSpace: 'mt-[12.1rem]', getCardSpace: 'mt-1'  },
-            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' },
+            Final: { getTopSpace: 'mt-[12.5rem]', getCardSpace: 'mt-1'  },
+            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[10rem]', 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]' },
-            Semifinal: { getTopSpace: 'mt-[11.7rem] mb-[14rem]', getCardSpace: 'mt-[25.5rem]'  },
-            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]'  },
-            Semifinal: { getTopSpace: 'mt-[7rem] mb-[10rem]', getCardSpace: 'mt-[16.8rem]'  },
-            Final: { getTopSpace: 'mt-[34.1rem]', getCardSpace: 'mt-1'  },
+            'Table of 32': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
+            'Table of 16': { getTopSpace: 'mt-[0.7rem] mb-[1.76rem]', getCardSpace: 'mt-[2.3rem]' },
+            'Table of 8': { getTopSpace: 'mt-[2.4rem] mb-[3.45rem]', getCardSpace: 'mt-[5.9rem]'  },
+            Semifinal: { getTopSpace: 'mt-[5.5rem] mb-[7.5rem]', getCardSpace: 'mt-[12.8rem]'  },
+            Final: { getTopSpace: 'mt-[26rem]', getCardSpace: 'mt-1'  },
             'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' },
         }
     },
     'Table of 64': {
         large: {
-            'Table of 64': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-            'Table of 32': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-            'Table of 16': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
-            'Table of 8': { getTopSpace: 'mt-[11.7rem] mb-[13.78rem]', getCardSpace: 'mt-[25.76rem]' },
-            Semifinal: { getTopSpace: 'mt-[24.45rem] mb-[29rem]', getCardSpace: 'mt-[53.6rem]'  },
-            Final: { getTopSpace: 'mt-[223rem] ', getCardSpace: 'mt-1'  },
-            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
         },
         small: {
             'Table of 64': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
@@ -81,14 +60,6 @@ export const SpacingConfig = {
     },
     'Table of 128': {
         large: {
-            'Table of 128': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-            'Table of 64': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-            'Table of 32': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
-            'Table of 16': { getTopSpace: 'mt-[11.7rem] mb-[13.78rem]', getCardSpace: 'mt-[25.76rem]' },
-            'Table of 8': { getTopSpace: 'mt-[24.45rem] mb-[29rem]', getCardSpace: 'mt-[53.6rem]'  },
-            Semifinal: { getTopSpace: 'mt-[47.5rem] mb-[62rem]', getCardSpace: 'mt-[109.5rem]'  },
-            Final: { getTopSpace: 'mt-[223rem] ', getCardSpace: 'mt-1'  },
-            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
         },
         small: {
             'Table of 128': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },

package/src/stories/Organisms/Tableau/TableauBoutCard/TableauBoutCard.vue

@@ -4,7 +4,7 @@
       <BaseText size="sm" color="quaternary">{{roundName}}</BaseText>
     </div>
     <div v-if="roundName === 'Final'" class="flex justify-center border-accent border-b mb-4 mt-0" :class="large ? 'w-72': 'w-40'">
-      <BaseText size="sm" color="quaternary">{{roundName}}</BaseText>
+      <BaseText size="sm" color="quaternary" weight="bold">{{roundName}}</BaseText>
     </div>
     <!-- Replacement headers for finals -->
     <section>
@@ -132,29 +132,29 @@ export default {
     },
     getScoreColor(isPerson1) {
       if (isPerson1) {
-        if (this.bout.Person2.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-primary'
+        if (this.bout.Person2.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-accent'
 
         if (this.bout.Score1 > this.bout.Score2) {
-          return 'bg-primary';
+          return 'bg-accent';
         }
 
         if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-white';
+          return 'bg-secondary';
         }
       }
 
       if (!isPerson1) {
-        if (this.bout.Person1.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-primary'
+        if (this.bout.Person1.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-accent'
 
         if (this.bout.Score1 < this.bout.Score2) {
-          return 'bg-primary';
+          return 'bg-accent';
         }
 
         if (this.bout.Score1 > this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-white';
+          return 'bg-secondary';
         }
       }
-      return 'bg-white';
+      return 'bg-secondary';
     },
   }
 };

package/src/stories/Organisms/Tableau/TableauFencerCard/TableauFencerCard.vue

@@ -1,6 +1,6 @@
 <!-- TableauFencerCard.vue -->
 <template>
-  <section class="bg-poolSetup flex rounded-sm bg-white border border-primary z-40 " :class="[width]">
+  <section class="bg-poolSetup flex rounded-sm bg-secondary border border-primary z-40 " :class="[width]">
     <!-- Left position -->
     <div class="text-center px-1 w-5 flex items-center justify-center z-40" :class="[`bg-${color}`]">
       <BaseText size="xs" color="secondary font-sourceCodePro">{{position}}</BaseText>
@@ -24,7 +24,7 @@
 
     <!-- Right position (Score) :class="scoreColor" -->
     <div class="flex text-center w-5 items-center justify-center z-40 h-4" :class="scoreColor">
-      <div :class="scoreColor === 'bg-primary' ? '' : 'block border-l border-primary w-5 h-4'">
+      <div :class="scoreColor === 'bg-primary' ? 'w-5' : 'block border-l border-primary w-5'">
       <BaseText size="xs" v-if="showScore" :color="scoreColor === 'bg-primary' ? 'white' : 'primary'"  class="font-sourceCodePro">{{score}}</BaseText>
       </div>
     </div>

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

@@ -2,9 +2,6 @@
 export const SpacingConfig = {
     'Semifinal': {
         'large': {
-            Semifinal: { getTopSpace: 'mt-0', getConnectorHeight: 'h-[3rem]', getTopSpaceForLine: 'mt-[1.5rem]' },
-            Final: { getTopSpace: 'h-[8.5rem] mt-[5rem] -ml-[309px]', getBottomLine: 'h-[6.7rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         'small': {
             Semifinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
@@ -14,10 +11,6 @@ export const SpacingConfig = {
     },
     'Table of 8': {
         'large': {
-            'Table of 8': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            Semifinal: { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            Final: { getTopSpace: 'h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         'small': {
             'Table of 8': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
@@ -28,11 +21,6 @@ export const SpacingConfig = {
     },
     'Table of 16': {
         large: {
-            'Table of 16': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            Semifinal: { getTopSpace: 'mt-[5.8rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            Final: { getTopSpace: 'mt-[14rem] h-[12rem] -ml-[309px]', getBottomLine: 'h-[12rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         small: {
             'Table of 16': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
@@ -44,31 +32,18 @@ export const SpacingConfig = {
     },
     '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]' },
-            Semifinal: { getTopSpace: 'mt-[12.8rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[7rem]'  },
-            Final: { getTopSpace: 'h-[25.1rem] mt-[30.1rem] -ml-[309px]', getBottomLine: 'h-[25.1rem] 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]' },
-            Semifinal: { getTopSpace: 'mt-[7.5rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+            'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.7rem]' },
+            'Table of 8': { getTopSpace: 'mt-[1.8rem]', getConnectorHeight: 'h-[7.1rem]', getTopSpaceForLine: 'mt-[3rem]' },
+            Semifinal: { getTopSpace: 'mt-[6rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
             Final: { getTopSpace: 'h-[12.6rem] mt-[24.4rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
             'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         }
     },
     'Table of 64': {
         large: {
-            'Table of 64': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 32': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 16': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            'Table of 8': { getTopSpace: 'mt-[11.7rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[12.5rem]' },
-            Semifinal: { getTopSpace: 'mt-[25.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-            Final: { getTopSpace: 'mt-[148.5rem] h-[81rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         small: {
             'Table of 64': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
@@ -82,14 +57,6 @@ export const SpacingConfig = {
     },
     'Table of 128': {
         large: {
-            'Table of 128': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 64': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 32': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            'Table of 16': { getTopSpace: 'mt-[11.7rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[12.5rem]' },
-            'Table of 8': { getTopSpace: 'mt-[24.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-            Semifinal: { getTopSpace: 'mt-[48.7rem]', getConnectorHeight: 'h-[112rem]', getTopSpaceForLine: '' },
-            Final: { getTopSpace: 'mt-[146.5rem] h-[80rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         small: {
             'Table of 128': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },

package/src/stories/Organisms/Tableau/TableauLines/TableauLines.vue

@@ -1,6 +1,6 @@
 <template>
   <section v-if="roundName !== 'Semifinal' && roundName !== 'Final'" class="flex z-0" :class="getTopSpace">
-    <div class="mt-[1.1rem]">
+    <div class="flex flex-col mt-[1.1rem]">
       <div class="border-primary border-t border-b border-r w-5 rounded-sm -ml-[0.3rem] z-0" :class="[getConnectorHeight, opacity]"></div>
     </div>
     <div :class="getTopSpaceForLine">
@@ -81,3 +81,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.split-border {
+  border-color: blue red; /* Top/bottom is blue, left/right is red */
+}
+</style>