@crm-market/template-shared 1.0.2 → 1.0.4

package/components/Layout/ResponsiveNavbar.vue

@@ -22,7 +22,7 @@
     <div class="offcanvas-body">
       <v-expansion-panels variant="accordion" v-model="panel">
         <v-expansion-panel>
-          <v-expansion-panel-title>Home</v-expansion-panel-title>
+          <v-expansion-panel-title>{{ t('nav.home') }}</v-expansion-panel-title>
           <v-expansion-panel-text>
             <ul class="mobile-menu-items">
               <li>
@@ -56,7 +56,7 @@
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-title>Pages</v-expansion-panel-title>
+          <v-expansion-panel-title>{{ t('nav.pages') }}</v-expansion-panel-title>
           <v-expansion-panel-text>
             <ul class="mobile-menu-items">
               <li>
@@ -65,14 +65,14 @@
                   to="/about-us"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  About Us
+                  {{ t('nav.aboutUs') }}
                 </NuxtLink>
               </li>
               <li class="mobile-menu-list">
                 <v-expansion-panels variant="accordion">
                   <v-expansion-panel>
                     <v-expansion-panel-title>
-                      Authentication
+                      {{ t('nav.authentication') }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
                       <ul class="mobile-menu-items sub-dropdown">
@@ -82,7 +82,7 @@
                             to="/login"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Login
+                            {{ t('auth.login') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -91,7 +91,7 @@
                             to="/register"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Register
+                            {{ t('auth.register') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -100,7 +100,7 @@
                             to="/my-account"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            My Account
+                            {{ t('account.myAccount') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -109,7 +109,7 @@
                             to="/change-password"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Change Password
+                            {{ t('auth.changePassword') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -118,7 +118,7 @@
                             to="/forgot-password"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Forgot Password
+                            {{ t('auth.forgotPassword') }}
                           </NuxtLink>
                         </li>
                       </ul>
@@ -132,7 +132,7 @@
                   to="/faq"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  FAQ
+                  {{ t('nav.faqs') }}
                 </NuxtLink>
               </li>
               <li>
@@ -141,7 +141,7 @@
                   to="/privacy-policy"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Privacy Policy
+                  {{ t('common.privacyPolicy') }}
                 </NuxtLink>
               </li>
               <li>
@@ -150,21 +150,21 @@
                   to="/terms-conditions"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Terms & Conditions
+                  {{ t('common.termsConditions') }}
                 </NuxtLink>
               </li>
             </ul>
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-title>Shop</v-expansion-panel-title>
+          <v-expansion-panel-title>{{ t('nav.shop') }}</v-expansion-panel-title>
           <v-expansion-panel-text>
             <ul class="mobile-menu-items">
               <li class="mobile-menu-list">
                 <v-expansion-panels variant="accordion">
                   <v-expansion-panel>
                     <v-expansion-panel-title>
-                      Product Layouts
+                      {{ t('nav.productLayouts') }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
                       <ul class="mobile-menu-items sub-dropdown">
@@ -174,7 +174,7 @@
                             to="/best-sellers"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Best Sellers
+                            {{ t('product.bestSellers') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -183,7 +183,7 @@
                             to="/featured-products"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Featured Products
+                            {{ t('product.featuredProducts') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -192,7 +192,7 @@
                             to="/trending-products"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Trending Products
+                            {{ t('product.trendingProducts') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -201,7 +201,7 @@
                             to="/new-arrivals"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            New Arrivals
+                            {{ t('product.newArrivals') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -210,7 +210,7 @@
                             to="/categories"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Categories
+                            {{ t('nav.categories') }}
                           </NuxtLink>
                         </li>
                       </ul>
@@ -222,7 +222,7 @@
                 <v-expansion-panels variant="accordion">
                   <v-expansion-panel>
                     <v-expansion-panel-title>
-                      Products Step
+                      {{ t('nav.productsStep') }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
                       <ul class="mobile-menu-items sub-dropdown">
@@ -232,7 +232,7 @@
                             to="/products"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Products
+                            {{ t('nav.products') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -241,7 +241,7 @@
                             to="/cart"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Cart
+                            {{ t('cart.cart') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -250,7 +250,7 @@
                             to="/wishlist"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Wishlist
+                            {{ t('product.wishlist') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -259,7 +259,7 @@
                             to="/checkout"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Checkout
+                            {{ t('account.checkout') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -268,7 +268,7 @@
                             to="/product-details"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Product Details
+                            {{ t('product.productDetails') }}
                           </NuxtLink>
                         </li>
                       </ul>
@@ -280,7 +280,7 @@
                 <v-expansion-panels variant="accordion">
                   <v-expansion-panel>
                     <v-expansion-panel-title>
-                      Admin Page
+                      {{ t('nav.adminPage') }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
                       <ul class="mobile-menu-items sub-dropdown mb-3">
@@ -290,7 +290,7 @@
                             to="/dashboard"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Dashboard
+                            {{ t('account.dashboard') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -299,7 +299,7 @@
                             to="/edit-profile"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Edit Profile
+                            {{ t('account.editProfile') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -308,7 +308,7 @@
                             to="/order-history"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Order History
+                            {{ t('account.orderHistory') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -317,7 +317,7 @@
                             to="/order-details"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Order Details
+                            {{ t('account.orderDetails') }}
                           </NuxtLink>
                         </li>
                         <li>
@@ -326,7 +326,7 @@
                             to="/change-password"
                             @click="stateStoreInstance.onChangeShow"
                           >
-                            Change Password
+                            {{ t('auth.changePassword') }}
                           </NuxtLink>
                         </li>
                       </ul>
@@ -338,7 +338,7 @@
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-title>Blog</v-expansion-panel-title>
+          <v-expansion-panel-title>{{ t('nav.blog') }}</v-expansion-panel-title>
           <v-expansion-panel-text>
             <ul class="mobile-menu-items">
               <li>
@@ -347,7 +347,7 @@
                   to="/our-blog"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Our Blog
+                  {{ t('nav.ourBlog') }}
                 </NuxtLink>
               </li>
               <li>
@@ -356,7 +356,7 @@
                   to="/blog-details"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Blog Details
+                  {{ t('nav.blogDetails') }}
                 </NuxtLink>
               </li>
               <li>
@@ -365,7 +365,7 @@
                   to="/tags"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Tags
+                  {{ t('nav.tags') }}
                 </NuxtLink>
               </li>
               <li>
@@ -374,7 +374,7 @@
                   to="/categories"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Categories
+                  {{ t('nav.categories') }}
                 </NuxtLink>
               </li>
               <li>
@@ -383,7 +383,7 @@
                   to="/author"
                   @click="stateStoreInstance.onChangeShow"
                 >
-                  Author
+                  {{ t('nav.author') }}
                 </NuxtLink>
               </li>
             </ul>
@@ -392,7 +392,7 @@
         <v-expansion-panel>
           <v-expansion-panel-title class="without-icon">
             <NuxtLink to="/contact" @click="stateStoreInstance.onChangeShow">
-              Contact
+              {{ t('nav.contact') }}
             </NuxtLink>
           </v-expansion-panel-title>
         </v-expansion-panel>
@@ -411,6 +411,7 @@ export default defineComponent({
     panel: [0],
   }),
   setup() {
+    const { t } = useI18n();
     const show = ref(false);
     const stateStoreInstance = stateStore;
     const activeMobileMenu = ref<string | null>(null);
@@ -425,6 +426,7 @@ export default defineComponent({
       stateStoreInstance,
       toggleMobileMenu,
       activeMobileMenu,
+      t,
     };
   },
 });

package/components/Layout/TopHeader.vue

@@ -7,13 +7,13 @@
             class="ps-0 mb-0 list-unstyled info-link d-flex align-items-center justify-content-center justify-content-md-start position-relative tops-1"
           >
             <li>
-              <NuxtLink to="/about-us">About Us</NuxtLink>
+              <NuxtLink to="/about-us">{{ t('nav.aboutUs') }}</NuxtLink>
             </li>
             <li>
-              <NuxtLink to="/faq">FAQs</NuxtLink>
+              <NuxtLink to="/faq">{{ t('nav.faqs') }}</NuxtLink>
             </li>
             <li>
-              <NuxtLink to="/contact">Help & Contact</NuxtLink>
+              <NuxtLink to="/contact">{{ t('nav.helpContact') }}</NuxtLink>
             </li>
           </ul>
         </v-col>
@@ -27,7 +27,7 @@
                 class="text-danger d-flex align-items-center position-relative tops-1"
               >
                 <i class="flaticon-flash-sale"></i>
-                <span>Flash sale 20% off</span>
+                <span>{{ t('nav.flashSale') }}</span>
               </NuxtLink>
             </li>
             <li>
@@ -38,21 +38,21 @@
                   :aria-pressed="show ? 'true' : 'false'"
                   :class="{ show: buttonShowState }"
                 >
-                  <img :src="currentImage" :alt="currentName" />
-                  <span>{{ currentName }}</span>
+                  <span class="me-1">{{ currentLocaleOption?.flag }}</span>
+                  <span>{{ currentLocaleOption?.name }}</span>
                 </button>
                 <ul class="dropdown-menu" :class="{ toggler: show }">
                   <li>
-                    <div v-if="languages.length > 0">
+                    <div v-if="locales.length > 0">
                       <a
                         class="dropdown-item d-flex align-items-center"
                         href="#"
-                        v-for="(language, index) in languages"
-                        :key="language.id"
-                        @click.prevent="toggleSelected(language, index)"
+                        v-for="loc in locales"
+                        :key="loc.code"
+                        @click.prevent="selectLocale(loc.code)"
                       >
-                        <img :src="language.image" :alt="language.name" />
-                        <span class="ms-2">{{ language.name }}</span>
+                        <span>{{ loc.flag }}</span>
+                        <span class="ms-2">{{ loc.name }}</span>
                       </a>
                     </div>
                   </li>
@@ -62,11 +62,11 @@
             <li>
               <select
                 class="form-select p-0 border-0 currency fw-medium fs-14 text-secondary"
-                aria-label="Default select example"
+                :aria-label="t('nav.currencySelect')"
               >
-                <option selected>USD $</option>
-                <option value="1">EUR £</option>
-                <option value="2">YEN ¥</option>
+                <option selected>{{ t('nav.currencyUSD') }}</option>
+                <option value="1">{{ t('nav.currencyEUR') }}</option>
+                <option value="2">{{ t('nav.currencyYEN') }}</option>
               </select>
             </li>
           </ul>
@@ -76,55 +76,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import image1 from "~/assets/images/united-states.png";
-import image2 from "~/assets/images/china.png";
-import image3 from "~/assets/images/arabi.png";
+<script setup lang="ts">
+import { ref } from "vue";
 
-interface LanguageOption {
-  id: string;
-  image: string;
-  name: string;
-}
+const { t, locale, locales, setLocale, currentLocaleOption } = useI18n();
 
-export default defineComponent({
-  name: "TopHeader",
-  setup() {
-    const show = ref(false);
-    const buttonShowState = ref(false);
-    const languages = ref<LanguageOption[]>([
-      { id: "1", image: image1, name: "English" },
-      { id: "2", image: image2, name: "China" },
-      { id: "3", image: image3, name: "Arabic" },
-    ]);
-    const currentName = ref("English");
-    const currentImage = ref(image1);
-    const clicked = ref<number | null>(null);
+const show = ref(false);
+const buttonShowState = ref(false);
 
-    const toggleDropdown = () => {
-      show.value = !show.value;
-      buttonShowState.value = !buttonShowState.value;
-    };
+const toggleDropdown = () => {
+  show.value = !show.value;
+  buttonShowState.value = !buttonShowState.value;
+};
 
-    const toggleSelected = (language: LanguageOption, index: number) => {
-      clicked.value = clicked.value === index ? null : index;
-      currentName.value = language.name;
-      currentImage.value = language.image;
-      show.value = false;
-      buttonShowState.value = false;
-    };
-
-    return {
-      show,
-      buttonShowState,
-      languages,
-      currentName,
-      currentImage,
-      clicked,
-      toggleDropdown,
-      toggleSelected,
-    };
-  },
-});
+const selectLocale = (code: string) => {
+  setLocale(code);
+  show.value = false;
+  buttonShowState.value = false;
+};
 </script>

package/components/Login/index.vue

@@ -16,31 +16,28 @@
             <div class="authentication-form">
               <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
-                  <NuxtLink to="/login" class="nav-link active">Login</NuxtLink>
+                  <NuxtLink to="/login" class="nav-link active">{{ t('auth.login') }}</NuxtLink>
                 </li>
                 <li class="nav-item" role="presentation">
-                  <NuxtLink to="/register" class="nav-link">Register</NuxtLink>
+                  <NuxtLink to="/register" class="nav-link">{{ t('auth.register') }}</NuxtLink>
                 </li>
               </ul>
-              <p>
-                If you have an account, sign in with your username or email
-                address.
-              </p>
+              <p>{{ t('auth.loginDescription') }}</p>
               <form>
                 <div class="form-group mb-4">
-                  <label class="label">Username or Email Address *</label>
+                  <label class="label">{{ t('auth.usernameOrEmail') }} *</label>
                   <input
                     type="text"
                     class="form-control"
-                    placeholder="Enter your user name"
+                    :placeholder="t('auth.usernameOrEmail')"
                   />
                 </div>
                 <div class="form-group mb-4">
-                  <label class="label">Your Password *</label>
+                  <label class="label">{{ t('auth.yourPassword') }} *</label>
                   <input
                     type="password"
                     class="form-control"
-                    placeholder="Enter your  password"
+                    :placeholder="t('auth.yourPassword')"
                   />
                 </div>
                 <div class="d-flex justify-content-between mb-4">
@@ -52,11 +49,11 @@
                       id="flexCheckDefault"
                     />
                     <label class="form-check-label" for="flexCheckDefault">
-                      Remember
+                      {{ t('auth.remember') }}
                     </label>
                   </div>
                   <NuxtLink to="/forgot-password" class="text-primary">
-                    Lost your password?
+                    {{ t('auth.lostPassword') }}
                   </NuxtLink>
                 </div>
                 <div class="form-group mb-4">
@@ -64,17 +61,17 @@
                     type="submit"
                     class="btn btn-warning btn-pill text-white w-100 d-block"
                   >
-                    Login
+                    {{ t('auth.login') }}
                   </button>
                 </div>
                 <div class="form-group mb-0">
                   <p class="text-secondary ms-1 text-primary">
-                    Don’t have an account?
+                    {{ t(‘auth.noAccount’) }}
                     <NuxtLink
                       to="/register"
                       class="text-decoration-none text-primary"
                     >
-                      Register
+                      {{ t(‘auth.register’) }}
                     </NuxtLink>
                   </p>
                 </div>
@@ -87,8 +84,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Login",
-};
+<script setup lang="ts">
+const { t } = useI18n();
 </script>