@crm-market/template-shared 1.0.0

package/components/Layout/MiddleHeader.vue

@@ -0,0 +1,229 @@
+<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 }"
+              >
+                All Categories
+              </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">No categories</span>
+                </li>
+              </ul>
+            </div>
+            <div class="position-relative">
+              <input
+                type="text"
+                class="form-control border-2"
+                placeholder="Search for products..."
+                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">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>Login Your</span>
+                  <h3>Account</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>Your Cart</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">
+                      View Cart
+                    </NuxtLink>
+                    <NuxtLink
+                      to="/checkout"
+                      class="btn btn-warning fs-14 text-white"
+                    >
+                      Checkout
+                    </NuxtLink>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</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 { 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 config = useRuntimeConfig();
+      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      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,
+    };
+  },
+});
+</script>

package/components/Layout/MiddleHeaderThree.vue

@@ -0,0 +1,204 @@
+<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="Search for products..."
+              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">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>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">
+                      View Cart
+                    </NuxtLink>
+                    <NuxtLink
+                      to="/checkout"
+                      class="btn btn-warning fs-14 text-white"
+                    >
+                      Checkout
+                    </NuxtLink>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</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 { 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 config = useRuntimeConfig();
+      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      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,
+    };
+  },
+});
+</script>

package/components/Layout/MiddleHeaderTwo.vue

@@ -0,0 +1,240 @@
+<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 }"
+              >
+                All Categories
+              </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">No categories</span>
+                </li>
+              </ul>
+            </div>
+            <div class="position-relative">
+              <input
+                type="text"
+                class="form-control border-2"
+                placeholder="Search for products..."
+                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">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>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">
+                      View Cart
+                    </NuxtLink>
+                    <NuxtLink
+                      to="/checkout"
+                      class="btn btn-warning fs-14 text-white"
+                    >
+                      Checkout
+                    </NuxtLink>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</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 { 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 config = useRuntimeConfig();
+      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      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,
+    };
+  },
+});
+</script>