@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Layout/MiddleHeader.vue

@@ -1,230 +1,3 @@
 <template>
-  <div class="middle-header-area ptb-20">
-    <div class="container">
-      <div class="d-lg-flex justify-content-between align-items-center">
-        <div
-          class="d-flex align-items-center middle-header-left justify-content-center justify-content-lg-end"
-        >
-          <NuxtLink to="/" class="d-none d-lg-block middle-logo">
-            <img :src="logoUrl || defaultLogo" alt="logo" />
-          </NuxtLink>
-          <div class="d-flex">
-            <div class="dropdown">
-              <button
-                class="dropdown-toggle border border-2 bg-transparent all-categories"
-                @click="toggleAllCategories"
-                :aria-pressed="show ? 'true' : 'false'"
-                :class="{ show: buttonShowState }"
-              >
-                {{ t('nav.allCategories') }}
-              </button>
-              <ul class="dropdown-menu" :class="{ toggler: show }">
-                <li v-for="category in topLevelCategories" :key="category.id">
-                  <NuxtLink
-                    class="dropdown-item"
-                    :to="`/products?categoryId=${category.id}`"
-                  >
-                    {{ category.name }}
-                  </NuxtLink>
-                </li>
-                <li v-if="topLevelCategories.length === 0">
-                  <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
-                </li>
-              </ul>
-            </div>
-            <div class="position-relative">
-              <input
-                type="text"
-                class="form-control border-2"
-                :placeholder="t('nav.searchProducts')"
-                v-model="searchQuery"
-                @keyup.enter="handleSearch"
-              />
-              <button
-                type="submit"
-                class="position-absolute top-50 end-0 translate-middle-y btn btn-primary fs-14 fw-medium text-white"
-                @click="handleSearch"
-              >
-                <i class="ri-search-line"></i>
-                <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <ul
-          class="d-flex middle-header-right ps-0 mb-0 list-unstyled justify-content-center justify-content-lg-end mt-3 mt-lg-0"
-        >
-          <li class="buy-info">
-            <NuxtLink to="/login" class="text-decoration-none">
-              <div class="d-flex align-items-center">
-                <div class="flex-shrink-0">
-                  <i class="ri-user-line"></i>
-                </div>
-                <div class="flex-grow-1 ms-10">
-                  <span>{{ t('auth.login') }}</span>
-                  <h3>{{ t('account.yourAccount') }}</h3>
-                </div>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info">
-            <NuxtLink to="/wishlist" class="text-decoration-none">
-              <div class="position-relative me-9">
-                <i class="ri-heart-line"></i>
-                <span class="count">0</span>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info">
-            <div class="dropdown">
-              <a
-                class="text-decoration-none"
-                href="javascript:void(0);"
-                @click="toggleBuyInfo"
-                :aria-pressed="active ? 'true' : 'false'"
-                :class="{ active: buttonActiveState }"
-              >
-                <div class="d-flex align-items-center">
-                  <div class="flex-shrink-0">
-                    <div class="position-relative me-9">
-                      <i class="ri-shopping-cart-line"></i>
-                      <span class="count">{{ itemCount }}</span>
-                    </div>
-                  </div>
-                  <div class="flex-grow-1 ms-1">
-                    <span>{{ t('account.yourCart') }}</span>
-                    <h3>${{ subtotal.toFixed(2) }}</h3>
-                  </div>
-                </div>
-              </a>
-              <ul
-                class="dropdown-menu cart-dropdown dropdown-menu-end"
-                :class="{ toggler: active }"
-              >
-                <li
-                  v-for="item in cart.items.slice(0, 3)"
-                  :key="item.productId"
-                  class="d-flex justify-content-between align-items-center cart-item"
-                >
-                  <button
-                    class="p-0 border-0 bg-transparent delete-btn"
-                    @click="removeFromCart(item.productId)"
-                  >
-                    <i class="ri-delete-bin-7-line"></i>
-                  </button>
-                  <NuxtLink
-                    class="dropdown-item d-flex align-items-center"
-                    :to="`/product-details?id=${item.productId}`"
-                  >
-                    <img
-                      v-if="item.image"
-                      :src="resolveImageUrl(item.image)"
-                      alt="product"
-                    />
-                    <div class="ms-3 d-inline-block text-truncate">
-                      <span>{{ item.name }}</span>
-                      <h3>${{ (item.discountPrice || item.price).toFixed(2) }}</h3>
-                    </div>
-                  </NuxtLink>
-                </li>
-                <li v-if="isEmpty" class="cart-item text-center text-muted py-3">
-                  Cart is empty
-                </li>
-                <template v-if="!isEmpty">
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <h3 class="fs-15 mb-0">Total</h3>
-                    <h3 class="fs-15 mb-0">${{ subtotal.toFixed(2) }}</h3>
-                  </li>
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      {{ t('account.viewCart') }}
-                    </NuxtLink>
-                    <NuxtLink
-                      to="/checkout"
-                      class="btn btn-warning fs-14 text-white"
-                    >
-                      {{ t('account.checkout') }}
-                    </NuxtLink>
-                  </li>
-                </template>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+  <LayoutHeaderBar btn-class="btn-primary" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-
-import defaultLogoImg from "~/assets/images/logo.png";
-
-export default defineComponent({
-  name: "MiddleHeader",
-  setup() {
-    const show = ref(false);
-    const buttonShowState = ref(false);
-    const active = ref(false);
-    const buttonActiveState = ref(false);
-    const searchQuery = ref("");
-    const defaultLogo = defaultLogoImg;
-    const router = useRouter();
-
-    const { t } = useI18n();
-    const { topLevelCategories } = useCategories();
-    const { logoUrl } = useSiteConfig();
-    const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
-
-    const resolveImageUrl = (url: string) => {
-      if (!url) return '';
-      if (url.startsWith('http')) return url;
-      const apiBase = getApiBaseUrl();
-      const baseUrl = apiBase.replace('/api', '');
-      return `${baseUrl}${url}`;
-    };
-
-    const toggleAllCategories = () => {
-      show.value = !show.value;
-      buttonShowState.value = !buttonShowState.value;
-    };
-    const toggleBuyInfo = () => {
-      active.value = !active.value;
-      buttonActiveState.value = !buttonActiveState.value;
-    };
-
-    const handleSearch = () => {
-      if (searchQuery.value.trim()) {
-        router.push(`/products?search=${encodeURIComponent(searchQuery.value.trim())}`);
-      }
-    };
-
-    return {
-      show,
-      buttonShowState,
-      active,
-      buttonActiveState,
-      toggleAllCategories,
-      toggleBuyInfo,
-      searchQuery,
-      handleSearch,
-      defaultLogo,
-      topLevelCategories,
-      logoUrl,
-      cart,
-      itemCount,
-      subtotal,
-      isEmpty,
-      removeFromCart,
-      resolveImageUrl,
-      t,
-    };
-  },
-});
-</script>

package/components/Layout/MiddleHeaderThree.vue

@@ -1,205 +1,3 @@
 <template>
-  <div class="middle-header-area border-bottom ptb-20">
-    <div class="container">
-      <div class="d-lg-flex justify-content-between align-items-center">
-        <div
-          class="d-flex align-items-center middle-header-left justify-content-center justify-content-lg-end"
-        >
-          <NuxtLink to="/" class="d-none d-lg-block middle-logo style-two">
-            <img :src="logoUrl || defaultLogo" alt="logo" />
-          </NuxtLink>
-          <div class="position-relative search-style-two">
-            <input
-              type="text"
-              class="form-control border-2"
-              :placeholder="t('nav.searchProducts')"
-              v-model="searchQuery"
-              @keyup.enter="handleSearch"
-            />
-            <button
-              type="submit"
-              class="position-absolute top-50 end-0 translate-middle-y btn btn-success fs-14 fw-medium text-white"
-              @click="handleSearch"
-            >
-              <i class="ri-search-line"></i>
-              <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
-            </button>
-          </div>
-        </div>
-
-        <ul
-          class="d-flex middle-header-right ps-0 mb-0 list-unstyled justify-content-center justify-content-lg-end mt-3 mt-lg-0"
-        >
-          <li class="info" v-if="phone">
-            <a :href="`tel:${phone}`" class="text-decoration-none">
-              <div class="d-flex align-items-center">
-                <div class="flex-shrink-0">
-                  <i class="ri-phone-line bg-danger-10"></i>
-                </div>
-                <div class="flex-grow-1 ms-10">
-                  <span>{{ t('nav.hotline') }}</span>
-                  <h3>{{ phone }}</h3>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="buy-info position-relative tops-3">
-            <NuxtLink to="/login" class="text-decoration-none success-hover-bg">
-              <div class="d-flex align-items-center">
-                <div class="flex-shrink-0">
-                  <i class="ri-user-line"></i>
-                </div>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info tops-4 position-relative">
-            <NuxtLink
-              to="/wishlist"
-              class="text-decoration-none success-hover-bg"
-            >
-              <div class="position-relative me-9">
-                <i class="ri-heart-line"></i>
-                <span class="count bg-success">0</span>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info">
-            <div class="dropdown">
-              <a
-                class="text-decoration-none success-hover-bg"
-                href="javascript:void(0);"
-                @click="toggleBuyInfo"
-                :aria-pressed="active ? 'true' : 'false'"
-                :class="{ active: buttonActiveState }"
-              >
-                <div class="d-flex align-items-center">
-                  <div class="flex-shrink-0">
-                    <div class="position-relative me-9">
-                      <i class="ri-shopping-cart-line"></i>
-                      <span class="count bg-success">{{ itemCount }}</span>
-                    </div>
-                  </div>
-                </div>
-              </a>
-              <ul
-                class="dropdown-menu cart-dropdown dropdown-menu-end"
-                :class="{ toggler: active }"
-              >
-                <li
-                  v-for="item in cart.items.slice(0, 3)"
-                  :key="item.productId"
-                  class="d-flex justify-content-between align-items-center cart-item"
-                >
-                  <button
-                    class="p-0 border-0 bg-transparent delete-btn"
-                    @click="removeFromCart(item.productId)"
-                  >
-                    <i class="ri-delete-bin-7-line"></i>
-                  </button>
-                  <NuxtLink
-                    class="dropdown-item d-flex align-items-center"
-                    :to="`/product-details?id=${item.productId}`"
-                  >
-                    <img
-                      v-if="item.image"
-                      :src="resolveImageUrl(item.image)"
-                      alt="product"
-                    />
-                    <div class="ms-3 d-inline-block text-truncate">
-                      <span>{{ item.name }}</span>
-                      <h3>${{ (item.discountPrice || item.price).toFixed(2) }}</h3>
-                    </div>
-                  </NuxtLink>
-                </li>
-                <li v-if="isEmpty" class="cart-item text-center text-muted py-3">
-                  Cart is empty
-                </li>
-                <template v-if="!isEmpty">
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <h3 class="fs-15 mb-0">Total</h3>
-                    <h3 class="fs-15 mb-0">${{ subtotal.toFixed(2) }}</h3>
-                  </li>
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      {{ t('account.viewCart') }}
-                    </NuxtLink>
-                    <NuxtLink
-                      to="/checkout"
-                      class="btn btn-warning fs-14 text-white"
-                    >
-                      {{ t('account.checkout') }}
-                    </NuxtLink>
-                  </li>
-                </template>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+  <LayoutHeaderBar :with-categories="false" btn-class="btn-success" area-class="border-bottom" logo-class="style-two" search-class="search-style-two" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, computed } from "vue";
-
-import defaultLogoImg from "~/assets/images/grocery-shop-logo.png";
-
-export default defineComponent({
-  name: "MiddleHeaderThree",
-  setup() {
-    const active = ref(false);
-    const buttonActiveState = ref(false);
-    const searchQuery = ref("");
-    const defaultLogo = defaultLogoImg;
-    const router = useRouter();
-
-    const { t } = useI18n();
-    const { logoUrl, contactInfo } = useSiteConfig();
-    const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
-
-    const phone = computed(() => contactInfo.value?.phone);
-
-    const resolveImageUrl = (url: string) => {
-      if (!url) return '';
-      if (url.startsWith('http')) return url;
-      const apiBase = getApiBaseUrl();
-      const baseUrl = apiBase.replace('/api', '');
-      return `${baseUrl}${url}`;
-    };
-
-    const toggleBuyInfo = () => {
-      active.value = !active.value;
-      buttonActiveState.value = !buttonActiveState.value;
-    };
-
-    const handleSearch = () => {
-      if (searchQuery.value.trim()) {
-        router.push(`/products?search=${encodeURIComponent(searchQuery.value.trim())}`);
-      }
-    };
-
-    return {
-      active,
-      buttonActiveState,
-      toggleBuyInfo,
-      searchQuery,
-      handleSearch,
-      defaultLogo,
-      logoUrl,
-      phone,
-      cart,
-      itemCount,
-      subtotal,
-      isEmpty,
-      removeFromCart,
-      resolveImageUrl,
-      t,
-    };
-  },
-});
-</script>

package/components/Layout/MiddleHeaderTwo.vue

@@ -1,241 +1,3 @@
 <template>
-  <div class="middle-header-area ptb-20">
-    <div class="container">
-      <div class="d-lg-flex justify-content-between align-items-center">
-        <div
-          class="d-flex align-items-center middle-header-left justify-content-center justify-content-lg-end"
-        >
-          <NuxtLink to="/" class="d-none d-lg-block middle-logo">
-            <img :src="logoUrl || defaultLogo" alt="logo" />
-          </NuxtLink>
-          <div class="d-flex">
-            <div class="dropdown">
-              <button
-                class="dropdown-toggle border border-2 bg-transparent all-categories"
-                @click="toggleAllCategories"
-                :aria-pressed="show ? 'true' : 'false'"
-                :class="{ show: buttonShowState }"
-              >
-                {{ t('nav.allCategories') }}
-              </button>
-              <ul class="dropdown-menu" :class="{ toggler: show }">
-                <li v-for="category in topLevelCategories" :key="category.id">
-                  <NuxtLink
-                    class="dropdown-item"
-                    :to="`/products?categoryId=${category.id}`"
-                  >
-                    {{ category.name }}
-                  </NuxtLink>
-                </li>
-                <li v-if="topLevelCategories.length === 0">
-                  <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
-                </li>
-              </ul>
-            </div>
-            <div class="position-relative">
-              <input
-                type="text"
-                class="form-control border-2"
-                :placeholder="t('nav.searchProducts')"
-                v-model="searchQuery"
-                @keyup.enter="handleSearch"
-              />
-              <button
-                type="submit"
-                class="position-absolute top-50 end-0 translate-middle-y btn btn-warning fs-14 fw-medium text-white"
-                @click="handleSearch"
-              >
-                <i class="ri-search-line"></i>
-                <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <ul
-          class="d-flex middle-header-right ps-0 mb-0 list-unstyled justify-content-center justify-content-lg-end mt-3 mt-lg-0"
-        >
-          <li class="info" v-if="phone">
-            <a :href="`tel:${phone}`" class="text-decoration-none">
-              <div class="d-flex align-items-center">
-                <div class="flex-shrink-0">
-                  <i class="ri-phone-line bg-danger-10"></i>
-                </div>
-                <div class="flex-grow-1 ms-10">
-                  <span>{{ t('nav.hotline') }}</span>
-                  <h3>{{ phone }}</h3>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="buy-info position-relative tops-3">
-            <NuxtLink to="/login" class="text-decoration-none success-hover-bg">
-              <div class="d-flex align-items-center">
-                <div class="flex-shrink-0">
-                  <i class="ri-user-line"></i>
-                </div>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info tops-4 position-relative">
-            <NuxtLink
-              to="/wishlist"
-              class="text-decoration-none success-hover-bg"
-            >
-              <div class="position-relative me-9">
-                <i class="ri-heart-line"></i>
-                <span class="count bg-success">0</span>
-              </div>
-            </NuxtLink>
-          </li>
-          <li class="buy-info">
-            <div class="dropdown">
-              <a
-                class="text-decoration-none success-hover-bg"
-                href="javascript:void(0);"
-                @click="toggleBuyInfo"
-                :aria-pressed="active ? 'true' : 'false'"
-                :class="{ active: buttonActiveState }"
-              >
-                <div class="d-flex align-items-center">
-                  <div class="flex-shrink-0">
-                    <div class="position-relative me-9">
-                      <i class="ri-shopping-cart-line"></i>
-                      <span class="count bg-success">{{ itemCount }}</span>
-                    </div>
-                  </div>
-                </div>
-              </a>
-              <ul
-                class="dropdown-menu cart-dropdown dropdown-menu-end"
-                :class="{ toggler: active }"
-              >
-                <li
-                  v-for="item in cart.items.slice(0, 3)"
-                  :key="item.productId"
-                  class="d-flex justify-content-between align-items-center cart-item"
-                >
-                  <button
-                    class="p-0 border-0 bg-transparent delete-btn"
-                    @click="removeFromCart(item.productId)"
-                  >
-                    <i class="ri-delete-bin-7-line"></i>
-                  </button>
-                  <NuxtLink
-                    class="dropdown-item d-flex align-items-center"
-                    :to="`/product-details?id=${item.productId}`"
-                  >
-                    <img
-                      v-if="item.image"
-                      :src="resolveImageUrl(item.image)"
-                      alt="product"
-                    />
-                    <div class="ms-3 d-inline-block text-truncate">
-                      <span>{{ item.name }}</span>
-                      <h3>${{ (item.discountPrice || item.price).toFixed(2) }}</h3>
-                    </div>
-                  </NuxtLink>
-                </li>
-                <li v-if="isEmpty" class="cart-item text-center text-muted py-3">
-                  Cart is empty
-                </li>
-                <template v-if="!isEmpty">
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <h3 class="fs-15 mb-0">Total</h3>
-                    <h3 class="fs-15 mb-0">${{ subtotal.toFixed(2) }}</h3>
-                  </li>
-                  <li
-                    class="d-flex justify-content-between align-items-center cart-item"
-                  >
-                    <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      {{ t('account.viewCart') }}
-                    </NuxtLink>
-                    <NuxtLink
-                      to="/checkout"
-                      class="btn btn-warning fs-14 text-white"
-                    >
-                      {{ t('account.checkout') }}
-                    </NuxtLink>
-                  </li>
-                </template>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+  <LayoutHeaderBar btn-class="btn-warning" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, computed } from "vue";
-
-import defaultLogoImg from "~/assets/images/grocery-shop-logo.png";
-
-export default defineComponent({
-  name: "MiddleHeaderTwo",
-  setup() {
-    const show = ref(false);
-    const buttonShowState = ref(false);
-    const active = ref(false);
-    const buttonActiveState = ref(false);
-    const searchQuery = ref("");
-    const defaultLogo = defaultLogoImg;
-    const router = useRouter();
-
-    const { t } = useI18n();
-    const { topLevelCategories } = useCategories();
-    const { logoUrl, contactInfo } = useSiteConfig();
-    const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
-
-    const phone = computed(() => contactInfo.value?.phone);
-
-    const resolveImageUrl = (url: string) => {
-      if (!url) return '';
-      if (url.startsWith('http')) return url;
-      const apiBase = getApiBaseUrl();
-      const baseUrl = apiBase.replace('/api', '');
-      return `${baseUrl}${url}`;
-    };
-
-    const toggleAllCategories = () => {
-      show.value = !show.value;
-      buttonShowState.value = !buttonShowState.value;
-    };
-    const toggleBuyInfo = () => {
-      active.value = !active.value;
-      buttonActiveState.value = !buttonActiveState.value;
-    };
-
-    const handleSearch = () => {
-      if (searchQuery.value.trim()) {
-        router.push(`/products?search=${encodeURIComponent(searchQuery.value.trim())}`);
-      }
-    };
-
-    return {
-      show,
-      buttonShowState,
-      active,
-      buttonActiveState,
-      toggleAllCategories,
-      toggleBuyInfo,
-      searchQuery,
-      handleSearch,
-      defaultLogo,
-      topLevelCategories,
-      logoUrl,
-      phone,
-      cart,
-      itemCount,
-      subtotal,
-      isEmpty,
-      removeFromCart,
-      resolveImageUrl,
-      t,
-    };
-  },
-});
-</script>