@dcrackel/meyersquaredui 1.0.81 → 1.0.82

package/dist/style.css

@@ -1 +1 @@
-.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}section[data-v-bae6ab08]{max-width:150px}
+.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}@keyframes slideDown-eb116240{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp-eb116240{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.animate-slideDown[data-v-eb116240]{animation:slideDown-eb116240 .5s ease forwards}.animate-slideUp[data-v-eb116240]{animation:slideUp-eb116240 .5s ease forwards}section[data-v-bae6ab08]{max-width:150px}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.81",
+  "version": "1.0.82",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "npm version patch && vite build",
+    "build": "npm version patch && vite build && build:tailwind",
     "publish:package": "npm publish",
     "preview": "vite preview",
     "build-storybook": "npm run build:tailwind && storybook build",

package/src/stories/Atoms/BaseButton/BaseButton.vue

@@ -104,7 +104,7 @@ export default {
         primary: 'bg-primary hover:bg-accent text-secondary hover:text-secondary',
         secondary: 'bg-secondary hover:bg-primary text-primary hover:text-secondary',
         accent: 'bg-accent hover:bg-accent hover:text-secondary',
-        white: 'bg-white hover:bg-primary text-primary hover:text-secondary',
+        white: 'bg-white hover:bg-accent text-primary hover:text-secondary',
       };
       return colorMap[this.backgroundColor] || 'bg-primary';
     },

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

@@ -9,7 +9,7 @@
     <!-- Ratings -->
     <div class="flex flex-col md:flex-row justify-center md:justify-around -mt-2 border-b border-borderGray z-10 pb-2 mb-2">
       <div class="flex items-center justify-center">
-        <BaseText tag="p" size="xs md:sm" weight="semibold" class="primary mr-1 block z-50">M2: </BaseText>
+        <BaseText tag="p" size="xs md:sm" weight="semibold" class="primary mr-1 block">M2: </BaseText>
         <BaseText tag="p" size="sm md:md" weight="bold" class="text-accent">{{ m2Rating }}</BaseText>
       </div>
     </div>

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

@@ -1,8 +1,8 @@
 <template>
   <nav
-      v-show="showNav"
-      class="fixed top-0 left-0 w-full bg-white shadow-md transition-opacity duration-1000 z-50"
-      :class="{ 'opacity-0': !showNav, 'opacity-100': showNav }"
+      v-show="navVisible"
+      class="fixed top-0 left-0 w-full bg-white shadow-md z-50"
+      :class="[showNav ? 'animate-slideDown' : 'animate-slideUp']"
   >
     <div class="max-w-7xl mx-auto px-4 py-2">
       <section class="w-full hidden md:flex">
@@ -19,7 +19,7 @@
             <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ClubList')">Clubs</BaseText>
             <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('Leaderboard')">Leaderboard</BaseText>
             <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ContactUs')">Contact</BaseText>
-            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ContactUs')">Login</BaseText>
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('Login')">Login</BaseText>
           </nav>
         </section>
       </section>
@@ -41,14 +41,15 @@ export default {
   props: {
     buffer: {
       type: Number,
-      default: 0,
+      default: 100,
     },
   },
   data() {
     return {
       logo: logo,
-      showNav: false,
-      heroHeight: 0,
+      showNav: false, // This controls the animation class
+      navVisible: false, // This controls v-show and visibility
+      heroHeight: 650,
     };
   },
   mounted() {
@@ -61,8 +62,58 @@ export default {
   methods: {
     handleScroll() {
       const scrollPos = window.scrollY;
-      this.showNav = scrollPos > (this.heroHeight + this.buffer);
+
+      // If the scroll position is beyond the hero, show the navbar
+      if (scrollPos > (this.heroHeight + this.buffer)) {
+        if (!this.navVisible) {
+          this.navVisible = true; // Immediately make the navbar visible
+          this.showNav = true;    // Start the slide-down animation
+        }
+      } else {
+        if (this.navVisible) {
+          this.showNav = false; // Start the slide-up animation
+
+          // Delay hiding the navbar until the animation completes (adjust delay to match animation duration)
+          setTimeout(() => {
+            this.navVisible = false;
+          }, 500); // Duration of the slide-up animation (0.5s)
+        }
+      }
+    },
+    handlePageChange(page) {
+      this.$emit('changePage', page);
+    },
+    onSearch(searchQuery) {
+      this.$emit('search', searchQuery);
     },
   },
 };
 </script>
+
+<style scoped>
+@keyframes slideDown {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+.animate-slideDown {
+  animation: slideDown 0.5s ease forwards;
+}
+
+.animate-slideUp {
+  animation: slideUp 0.5s ease forwards;
+}
+</style>

package/src/stories/Templates/HomePage/HomePage.vue

@@ -2,7 +2,7 @@
   <div class="m-0 w-full bg-secondary">
     <PageHeader @changePage="changePage"/>
     <HeroBanner  :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc"/>
-    <ScrollNav buffer=100 />
+    <ScrollNav :buffer="1000" />
     <GridLayout
         :cardComponent="TournamentCard"
         :items="limitedTournaments"