@shopbite-de/storefront 1.7.6 → 1.7.8

package/app/components/Footer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// Fetch navigation from content
 const { data: navigationData } = await useAsyncData("navigation", () =>
   queryCollection("navigation").first(),
 );

package/app/components/Header/Body.vue

@@ -1,5 +1,26 @@
 <script setup lang="ts">
-const { navi } = await useHeaderNavigation();
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const { data: navigationData } = useAsyncData("navigation", () =>
+  queryCollection("navigation").first(),
+);
+
+const navi = computed<NavigationMenuItem[]>(() => {
+  if (!navigationData.value?.main) return [];
+
+  return navigationData.value.main.map((item) => ({
+    label: item.label,
+    icon: item.icon,
+    to: item.to,
+    target: item.target,
+    active:
+      item.to === "/"
+        ? route.path.length === 1
+        : route.path.startsWith(item.to),
+  }));
+});
 </script>
 
 <template>

package/app/components/Header.vue

@@ -1,5 +1,27 @@
 <script setup lang="ts">
-const { navi } = await useHeaderNavigation();
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const { data: navigationData } = await useAsyncData("navigation", () =>
+  queryCollection("navigation").first(),
+);
+
+const navi = computed<NavigationMenuItem[]>(() => {
+  if (!navigationData.value?.main) return [];
+
+  return navigationData.value.main.map((item) => ({
+    label: item.label,
+    icon: item.icon,
+    to: item.to,
+    target: item.target,
+    active:
+      item.to === "/"
+        ? route.path.length === 1
+        : route.path.startsWith(item.to),
+  }));
+});
+
 const loginSlide = ref(false);
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -18,7 +18,7 @@
     "@heroicons/vue": "^2.2.0",
     "@iconify-json/lucide": "^1.2.73",
     "@iconify-json/simple-icons": "^1.2.59",
-    "@nuxt/content": "^3.8.2",
+    "@nuxt/content": "^3.11.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.1.0",

package/app/composables/useHeaderNavigation.ts

@@ -1,29 +0,0 @@
-import type { NavigationMenuItem } from "@nuxt/ui";
-
-export const useHeaderNavigation = async () => {
-  const route = useRoute();
-
-  const { data: navigationData } = await useAsyncData("navigation", () =>
-    queryCollection("navigation").first(),
-  );
-
-  const navi = computed<NavigationMenuItem[]>(() => {
-    if (!navigationData.value?.main) return [];
-
-    return navigationData.value.main.map((item) => ({
-      label: item.label,
-      icon: item.icon,
-      to: item.to,
-      target: item.target,
-      active:
-        item.to === "/"
-          ? route.path.length === 1
-          : route.path.startsWith(item.to),
-    }));
-  });
-
-  return {
-    navigationData,
-    navi,
-  };
-};

package/test/nuxt/Header.test.ts

@@ -1,67 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
-import Header from "~/components/Header.vue";
-import { ref } from "vue";
-
-mockNuxtImport("useHeaderNavigation", () => () => ({
-  navi: ref([{ label: "Home", to: "/" }]),
-}));
-
-mockNuxtImport("useUser", () => () => ({
-  isLoggedIn: ref(false),
-  isGuestSession: ref(false),
-  user: ref(null),
-  logout: vi.fn(),
-}));
-
-mockNuxtImport("useShopBiteConfig", () => () => ({
-  isCheckoutEnabled: ref(true),
-}));
-
-mockNuxtImport("useCart", () => () => ({
-  count: ref(0),
-}));
-
-mockNuxtImport("useToast", () => () => ({
-  add: vi.fn(),
-}));
-
-mockNuxtImport("useRuntimeConfig", () => () => ({
-  app: { baseURL: "/" },
-  public: { site: { name: "ShopBite" } },
-}));
-
-// Mock Nuxt Content queryCollection
-mockNuxtImport("queryCollection", () => (collection: string) => ({
-  first: () =>
-    Promise.resolve({
-      account: {
-        loggedIn: [],
-        loggedOut: [],
-      },
-    }),
-}));
-
-describe("Header", () => {
-  it("renders structure correctly", async () => {
-    const component = await mountSuspended(Header);
-
-    const srOnlySiteName = component.find(".sr-only");
-    expect(srOnlySiteName.exists()).toBe(true);
-    expect(srOnlySiteName.text()).toBe("ShopBite");
-    expect(component.html()).toContain("i-lucide:phone");
-    expect(component.html()).toContain("i-lucide:shopping-cart");
-
-    const navMenu = component.findComponent({ name: "UNavigationMenu" });
-    expect(navMenu.exists()).toBe(true);
-  });
-
-  it("renders login slideover", async () => {
-    const component = await mountSuspended(Header);
-
-    // USlideover might not be directly in HTML if it uses teleport and is closed
-    const slideover = component.findComponent({ name: "USlideover" });
-    expect(slideover.exists()).toBe(true);
-    expect(slideover.props("title")).toBe("Konto");
-  });
-});

package/test/nuxt/HeaderBody.test.ts

@@ -1,33 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
-import HeaderBody from "~/components/Header/Body.vue";
-import { ref } from "vue";
-
-const mockNavi = [
-  { label: "Home", to: "/", icon: "i-lucide-home" },
-  { label: "Products", to: "/products", icon: "i-lucide-package" },
-];
-
-mockNuxtImport("useHeaderNavigation", () => () => ({
-  navi: ref(mockNavi),
-}));
-
-describe("HeaderBody", () => {
-  it("renders navigation menu with correct items", async () => {
-    const component = await mountSuspended(HeaderBody);
-    const navMenu = component.findComponent({ name: "UNavigationMenu" });
-
-    expect(navMenu.exists()).toBe(true);
-    expect(navMenu.props("items")).toEqual(mockNavi);
-    expect(navMenu.props("orientation")).toBe("vertical");
-  });
-
-  it("renders SalesChannelSwitch", async () => {
-    const component = await mountSuspended(HeaderBody);
-    const switchComponent = component.findComponent({
-      name: "SalesChannelSwitch",
-    });
-
-    expect(switchComponent.exists()).toBe(true);
-  });
-});