fixes vue3

src/components/gate/GateLayout.scss

@@ -1,6 +1,6 @@
 .gatelayout-background-image {
     background-size: cover;
-    background-image: url("../../assets/Crane_Log_In_Page.jpg");
+    background-image: url("@/assets/Crane_Log_In_Page.jpg");
     background-repeat: no-repeat;
     height: 100%;
     -webkit-background-size: cover;

src/components/gate/GateLayout.vue

@@ -16,7 +16,7 @@
     >
       <v-icon
         @click.stop="showMenu = !showMenu"
-        class="white--text pa-4 pl-4 cursor-pointer"
+        class="text-white pa-4 pl-4 cursor-pointer"
         >mdi-close</v-icon
       >
       <div class="px-4 pb-3">
@@ -27,12 +27,12 @@
           single-line
           type="text"
           color="white"
-          class="mobile-header-search-field white--text background-transparent"
+          class="mobile-header-search-field text-white background-transparent"
           @blur="showSearchInput = false"
           v-on:keyup.enter="GotoPage"
         >
           <template v-slot:prepend>
-            <v-icon @click="GotoPage()" class="white--text">mdi-magnify</v-icon>
+            <v-icon @click="GotoPage()" class="text-white">mdi-magnify</v-icon>
           </template>
         </v-text-field>
       </div>
@@ -50,14 +50,14 @@
         <v-list-group v-if="userAuth">
           <template v-slot:activator>
             <v-list-item-content>
-              <v-list-item-title class="white--text text-uppercase h3 my-2"
+              <v-list-item-title class="text-white text-uppercase h3 my-2"
                 >Hi {{ userName }}</v-list-item-title
               >
             </v-list-item-content>
           </template>
           <v-list-item>
             <span
-              class="white--text text-uppercase h4 my-2"
+              class="text-white text-uppercase h4 my-2"
               @click="goToDashboard()"
               >My Account</span
             >
@@ -65,7 +65,7 @@
           <v-list-item>
             <span
               @click="goToLogout()"
-              class="white--text text-uppercase h4 my-2"
+              class="text-white text-uppercase h4 my-2"
               >Logout</span
             >
           </v-list-item>
@@ -73,7 +73,7 @@
         <v-list-item v-if="!userAuth">
           <v-list-item-content class="pa-0">
             <v-list-item-title
-              class="white--text text-uppercase h3 my-2"
+              class="text-white text-uppercase h3 my-2"
               @click="goToLogin()"
               >Sign-In</v-list-item-title
             >
@@ -87,9 +87,9 @@
       @action="onAction"
       @actionScroll="onActionScroll"
     />
-    <v-container fill-height class="ios-fill-height py-0">
+     <v-container fill-height class="align-self-center  py-0">
-      <v-row align="center" align-content="center" justify="center">
+      <v-row align="center" justify="center" class="height-100">
-        <v-col cols="12" sm="8" md="6" class="mr-sm-0">
+        <v-col cols="12" align-self="center" sm="8" md="6" class="mr-sm-0">
           <router-view />
         </v-col>
       </v-row>

src/components/gate/SignInComponent.vue

@@ -7,40 +7,42 @@
       <v-alert class="word-break" type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
       <v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert>
       <v-form ref="siginForm" id=signin-form  @submit.prevent="signIn">
-        <v-text-field label="Email Id" class="textfield-border" placeholder="Enter your email id" type="email" ref="email" v-model="email" :rules="emailRules" prepend-icon="mdi-email-outline">
+        <v-text-field label="Email Id" density="compact" class="textfield-border" placeholder="Enter your email id" type="email" ref="email" v-model="email" :rules="emailRules" prepend-icon="mdi-email-outline"  variant="underlined">
         </v-text-field>
-
+   <v-text-field
-        <v-text-field
           type="password"
           class="textfield-border"
           label="Password"
           placeholder="Enter your password"
           ref="password"
+          density="compact"
           v-model="password"
           :rules="passwordRules"
           prepend-icon="mdi-lock"
+          variant="underlined"
         >
         </v-text-field>
          <v-checkbox v-model="logged" label="Keep me logged in" color="indigo"></v-checkbox>
         <div class="text-right mt-4">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot="{ isHovering, props }">
             <v-btn
               :disabled="inProgress"
-              large
+              size="large"
               block
-              :outlined="hover ? false:true"
+              v-bind="props"
-              :color="hover ? 'primary' : 'primary'"
+              :variant="isHovering ? 'flat' : 'outlined'"
-              class="mt-6 body"
+              :class="isHovering ? 'bg-primary' : ' bg-white text-primary'"
-              tile
+              class="mt-1 body text-capitalize"
               type="submit"
               form="signin-form"
+              rounded="0"
               @click="signIn"
-            ><v-progress-circular :size="20" :color="hover ? 'primary' : 'primary'" indeterminate v-if="inProgress"></v-progress-circular> Login</v-btn>
+            ><v-progress-circular :size="20" :color="isHovering ? 'primary' : 'primary'" indeterminate v-if="inProgress"></v-progress-circular> Login</v-btn>
           </v-hover>
         </div>
       </v-form>
 
-      <v-row >
+      <v-row class="pt-3">
       <!--  <v-col cols="12">
           Create an account ?
           <v-hover v-slot:default="{ hover }">

src/components/layout/header/Header.vue

@@ -1,15 +1,6 @@
   <template>
   <div v-resize="checkActiveCategory">
-    <!-- <HeaderPromoBanner
+   
-      v-if="
-        pageName() == 'HomePage' &&
-        heroBanner &&
-        headerPromoBanner &&
-        headerPromoBanner.active
-      "
-      @closeHeroBanner="closeBanner"
-      :headerPromoBanner="headerPromoBanner"
-    /> -->
     <v-app-bar
       v-if="heroData && newUser"
       flat
@@ -73,10 +64,10 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'primary--text'"
+              :class="hover ? 'header-category-icon' : 'text-primary'"
               >mdi-account-circle-outline</v-icon
             >
-            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
+            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
               >mdi-account-circle-outline</v-icon
             >
           </v-btn>
@@ -86,7 +77,7 @@
           <v-btn
             icon
             :class="
-              hover ? 'primary--text' : textColor ? textColor : 'white--text'
+              hover ? 'text-primary' : textColor ? textColor : 'text-white'
             "
             @click="showSearchInput = true"
             class="d-none d-md-block header-buttons"
@@ -94,10 +85,10 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'primary--text'"
+              :class="hover ? 'header-category-icon' : 'text-primary'"
               >mdi-magnify</v-icon
             >
-            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
+            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
               >mdi-magnify</v-icon
             >
           </v-btn>
@@ -112,43 +103,7 @@
           :width="searchInputWidth"
           height="56"
         >
-          <!--<v-autocomplete
-            v-model="search"
-            v-if="showSearchInput"
-            autofocus
-            class="mt-0 py-0 search-catalog header-autocomplete"
-            height="30"
-            :items="searchResultList"
-            :loading="searchInProgress"
-            :search-input.sync="lookupCatelog"
-            @change="GotoPage(search)"
-            @blur="showSearchInput=false"
-            hide-details
-            :no-filter="true"
-            hide-no-data
-            flat
-            solo
-            clearable
-            item-text="title"
-            item-value="title"
-            label="Search"
-            append-icon="mdi-magnify"
-            return-object
-          >
-            <template v-slot:selection="data">
-              <span class="ml-2" v-text="data.item.title "></span>
-            </template>
-            <template v-slot:item="data ">
-              <template>
-                <v-list-item-content>
-                  <div class="d-flex justify-space-between">
-                    <v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
   
-                  </div>
-                </v-list-item-content>
-              </template>
-            </template>
-          </v-autocomplete>-->
           <v-text-field
             v-model="search"
             autofocus
@@ -162,26 +117,18 @@
             v-on:keyup.enter="GotoPage"
           >
             <template v-slot:append>
-              <v-icon @click="GotoPage()" class="primary--text"
+              <v-icon @click="GotoPage()" class="text-primary"
                 >mdi-magnify</v-icon
               >
             </template>
           </v-text-field>
         </v-navigation-drawer>
-        <!-- <v-btn
+       
-          icon
-          :class="textColor"
-          class="header-buttons"
-          @click="categoryProducts('10')"
-          :max-width="this.$vuetify.display.mdOnly? '35px':''"
-        >
-          <v-icon class="white--text">mdi-shopping-outline</v-icon>
-        </v-btn>-->
         <v-hover v-slot:default="{ hover }">
           <v-btn
             icon
             :class="
-              hover ? 'primary--text' : textColor ? textColor : 'white--text'
+              hover ? 'text-primary' : textColor ? textColor : 'text-white'
             "
             class="header-buttons"
             @click.stop="showCartDrawer(true)"
@@ -189,10 +136,10 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'primary--text'"
+              :class="hover ? 'header-category-icon' : 'text-primary'"
               >mdi-cart-outline</v-icon
             >
-            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
+            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
               >mdi-cart-outline</v-icon
             >
             <span v-if="cartProductsProgress || inProgress">
@@ -222,7 +169,7 @@
       <v-spacer></v-spacer>
       <v-img
         v-if="pageName() == 'CategoryPage'"
-        src="@/assets/Crane_Logo_blue.png"
+         :src="craneLogoBlue"
         max-height="44"
         max-width="146"
         contain
@@ -231,7 +178,7 @@
       ></v-img>
       <v-img
         v-else
-        src="@/assets/Crane_Logo_white.png"
+        craneLogoWhite
         max-height="44"
         max-width="146"
         contain
@@ -239,61 +186,7 @@
         class="mt-md-11 cursor-pointer"
       ></v-img>
       <v-spacer></v-spacer>
-      <!-- <template v-slot:extension>
+       
-        <v-spacer></v-spacer>
-        <div
-          v-for="(categories, index) in categoryList.childrenData"
-          v-bind:key="index"
-        >
-          <v-toolbar-items
-            class="white--text d-none d-md-flex mt-11"
-            v-if="index === 0"
-          >
-            <v-menu
-              open-on-hover
-              down
-              offset-y
-              allow-overflow
-              content-class="pt-4 header-menu-content"
-              v-for="(category, i) in categories.childrenData"
-              v-bind:key="i"
-            >
-              <template v-slot:activator="{ on }">                
-                <div
-                  v-if="
-                    category.name !== 'Baby' &&
-                    category.name !== 'Gifts' &&
-                    category.isActive
-                  "
-                  text
-                  class="cursor-pointer text-uppercase body my-auto pa-0 px-sm-2 ls-n01 px-lg-4 header-category-text"
-                  v-on="on"
-                  :class="
-                    category.id == activeCategoryMenu
-                      ? 'header-category-text-active'
-                      : categoryId
-                      ? 'header-category-page-text'
-                      : 'white--text'
-                  "
-                  @click="categoryProducts(category.id, category)"
-                >
-                {{ category.name }}
-                </div>
-              </template>
-              <v-col v-if="category.childrenData != ''">
-                <SubMenu
-                  :subCategoryList="category"
-                  @action="inactiveCategoryMenu"
-                  :mainMenu="category.id"
-                  :subMenuItem="subMenuItem"
-                  @onActionScrollSub="onActionScroll"
-                />
-              </v-col>
-            </v-menu>
-          </v-toolbar-items>
-        </div>
-        <v-spacer></v-spacer>
-      </template> -->
     </v-app-bar>
     <v-app-bar
       height="56"
@@ -308,7 +201,7 @@
       <v-spacer></v-spacer>
       <v-img
         v-if="!isScrolled"
-        src="@/assets/Crane_Logo_white.png"
+       craneLogoWhite
         max-width="100"
         @click="goToHomePage()"
         class="cursor-pointer"
@@ -317,7 +210,7 @@
       ></v-img>
       <v-img
         v-if="isScrolled"
-        src="@/assets/Crane_Logo_blue.png"
+        :src="craneLogoBlue"
         max-width="100"
         class="cursor-pointer"
         @click="goToHomePage()"
@@ -355,7 +248,7 @@
           ></v-app-bar-nav-icon>
           <v-img
             v-if="!isScrolled && !hover"
-            src="@/assets/Crane_Logo_white.png"
+            craneLogoWhite
             max-width="100"
             @click="goToHomePage()"
             class="cursor-pointer d-none d-md-flex"
@@ -364,7 +257,7 @@
           ></v-img>
           <v-img
             v-else-if="(isScrolled && !hover) || hover"
-            src="@/assets/Crane_Logo_blue.png"
+             :src="craneLogoBlue"
             max-width="100"
             class="cursor-pointer d-none d-md-flex"
             @click="goToHomePage()"
@@ -375,7 +268,7 @@
         <v-col class="d-flex justify-center">
           <v-img
             v-if="!isScrolled && !hover"
-            src="@/assets/Crane_Logo_white.png"
+            craneLogoWhite
             max-width="100"
             @click="goToHomePage()"
             class="cursor-pointer d-md-none"
@@ -384,68 +277,14 @@
           ></v-img>
           <v-img
             v-else-if="(isScrolled && !hover) || hover"
-            src="@/assets/Crane_Logo_blue.png"
+            :src="craneLogoBlue"
             max-width="100"
             class="cursor-pointer d-md-none"
             @click="goToHomePage()"
             contain
             aspect-ratio="1"
           ></v-img>
-          <!-- <div
-            v-for="(categories, index) in categoryList.childrenData"
-            v-bind:key="index"
-          >
-            <v-toolbar-items
-              class="white--text d-none d-md-flex"
-              v-if="index === 0"
-            >
-              <v-menu
-                open-on-hover
-                down
-                offset-y
-                allow-overflow
-                content-class="pt-4 header-menu-content"
-                v-for="(category, index) in categories.childrenData"
-                v-bind:key="index"
-                v-show="category.isActive"
-              >
-                <template v-slot:activator="{ on }">
            
-                  <div
-                    v-if="
-                      category.name !== 'Baby' &&
-                      category.name !== 'Gifts' &&
-                      category.isActive
-                    "
-                    text
-                    class="cursor-pointer text-uppercase my-auto body pa-0 d-inline-block px-sm-2 ls-n01 px-lg-4 menu-nav-link custom-menu"
-                    v-on="on"
-                    :class="
-                      isScrolled || hover
-                        ? category.id == activeCategoryMenu && categoryId
-                          ? 'header-category-text-active'
-                          : 'header-category-text'
-                        : category.id == activeCategoryMenu && categoryId
-                        ? 'header-category-text-active'
-                        : textColor
-                    "
-                    @click="categoryProducts(category.id, category)"
-                  >
-                    {{ category.name }}
-                  </div>
-                </template>
-                <v-col v-if="category.childrenData != ''">
-                  <SubMenu
-                    :subCategoryList="category"
-                    @action="inactiveCategoryMenu"
-                    :mainMenu="category.id"
-                    :subMenuItem="subMenuItem"
-                    @onActionScrollSub="onActionScroll"
-                  />
-                </v-col>
-              </v-menu>
-            </v-toolbar-items>
-          </div> -->
         </v-col>
         <v-col class="d-flex justify-end pr-0">
           <v-toolbar-items>
@@ -571,43 +410,7 @@
               :width="searchInputWidth"
               height="56"
             >
-              <!--<v-autocomplete
-                v-model="search"
-                v-if="showSearchInput"
-                autofocus
-                class="mt-0 py-0 search-catalog header-autocomplete"
-                height="30"
-                :items="searchResultList"
-                :loading="searchInProgress"
-                :search-input.sync="lookupCatelog"
-                @change="GotoPage(search)"
-                @blur="showSearchInput=false"
-                hide-details
-                :no-filter="true"
-                hide-no-data
-                flat
-                solo
-                clearable
-                item-text="name"
-                item-value="sku"
-                label="Search"
-                append-icon="mdi-magnify"
-                return-object
-              >
-                <template v-slot:selection="data">
-                  <span class="ml-2" v-text="data.item.title "></span>
-                </template>
-                <template v-slot:item="data ">
-                  <template>
-                    <v-list-item-content>
-                      <div class="d-flex justify-space-between">
-                        <v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
               
-                      </div>
-                    </v-list-item-content>
-                  </template>
-                </template>
-              </v-autocomplete>-->
               <v-text-field
                 v-model="search"
                 autofocus
@@ -621,7 +424,7 @@
                 v-on:keyup.enter="GotoPage"
               >
                 <template v-slot:append>
-                  <v-icon @click="GotoPage()" class="primary--text"
+                  <v-icon @click="GotoPage()" class="text-primary"
                     >mdi-magnify</v-icon
                   >
                 </template>
@@ -650,6 +453,8 @@ import {
   goToCategoryPageRouting,
 } from "@/services/util.service";
 import humps from "lodash-humps";
+import craneLogoBlue from "@/assets/Crane_Logo_blue.png";
+import craneLogoWhite from "@/assets/Crane_Logo_white.png";
 export default {
   name: "Header",
   components: {
@@ -660,6 +465,8 @@ export default {
   },
   props: ["offsetTop", "heroData"],
   data: () => ({
+     craneLogoBlue: craneLogoBlue,
+    craneLogoWhite: craneLogoWhite,
     blockId: "30",
     heroBanner: true,
     //subMenu: "",
@@ -771,12 +578,12 @@ export default {
       let pagePath = this.$route.path;
       let isGateModulePage = pagePath.includes("/gate/");
       if (isGateModulePage) {
-        return "white--text";
+        return "text-white";
       }
       if (!this.heroData) return "content-color";
 
       if (this.offsetTop > 30) return "content-color";
-      else return "white--text";
+      else return "text-white";
     },
     userAuth: function () {
       return this.$store.state.auth.userAuth;

yarn.lock

@@ -2110,7 +2110,7 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
-"@vuetify/loader-shared@^1.4.0", "@vuetify/loader-shared@^1.7.1":
+"@vuetify/loader-shared@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz#0f63a3d41b6df29a2db1ff438aa1819b237c37a3"
   integrity sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==
@@ -2118,14 +2118,6 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/vite-plugin@^1.0.0-alpha.11":
-  version "1.0.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/@vuetify/vite-plugin/-/vite-plugin-1.0.0-alpha.11.tgz#43cd0fa4134da2467d7dd134b35b5d21a54ddfca"
-  integrity sha512-ADAEubiF+2VHbcsJs0nWCBThc4LX+mGnioYrF0O+jKTvCICT1PJKpp15+M7ZyyM9sAkEFpVH+5FaH5/Ywj7RWg==
-  dependencies:
-    "@vuetify/loader-shared" "^1.4.0"
-    debug "^4.3.3"
-
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -3717,10 +3709,10 @@ vuetify-loader@^1.9.2:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^3.0.0-beta.11:
+vuetify@^3.0.0:
-  version "3.1.14"
+  version "3.1.15"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.14.tgz#6dac29bb54ce6eee97ff8df54dab431305aa38d4"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.15.tgz#aacee61d81dcaaeabaae44f68172de142dadd274"
-  integrity sha512-KpJH7CDyDwLjfLUkKgmijZ7WMBscuGTGKeO5pomerEWQiZ9X9bjHJTXdycqFX60QSl3AkrJeSIWW/l8nkxoslw==
+  integrity sha512-uxB4UCrP+hFyJaoSsVObAGBRD73qq5ga7HULepzGoMeUWap2H99mcqmMdN/a/Yp4ODK3gT8EcUeph3EgEcsArQ==
 
 vuex-map-fields@^1.3.6:
   version "1.4.0"