srcdev-nuxt-components 9.2.6 → 9.2.7

package/app/components/01.atoms/page-row/PageRow.vue

@@ -112,6 +112,8 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
 
   /* Nested page-rows: symmetric placement by variant class */
   .page-row > .page-row {
+    align-content: start;
+
     &.full {
       grid-column: full;
     }

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -30,6 +30,14 @@ import type { InputTypesButton, FormUiTheme, InputButtonVariant } from "~/types/
 interface Props {
   type?: InputTypesButton;
   href?: string;
+  /**
+   * Force a real browser navigation instead of client-side routing, even for a same-origin
+   * href starting with "/". Needed for hrefs that aren't Vue Router pages — e.g. a Nitro
+   * server route like "/api/auth/github" — since NuxtLink otherwise treats any leading-"/"
+   * href as an internal route and does a client-side router.push, which fails silently
+   * (no matching route) instead of hitting the server.
+   */
+  external?: boolean;
   theme?: FormUiTheme;
   variant?: InputButtonVariant;
   isPill?: boolean;
@@ -43,6 +51,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   type: "button",
   href: undefined,
+  external: false,
   theme: "default",
   variant: "primary",
   isPill: false,
@@ -58,7 +67,9 @@ const NuxtLink = resolveComponent("NuxtLink");
 
 // If href is undefined tag is button, else it's a link
 const isLink = computed(() => Boolean(props.href));
-const isInternalLink = computed(() => isLink.value && props.href && props.href.startsWith("/"));
+const isInternalLink = computed(
+  () => isLink.value && props.href && props.href.startsWith("/") && !props.external
+);
 const tag = computed(() => {
   if (isInternalLink.value) return NuxtLink;
   if (isLink.value) return "a";

package/app/components/05.forms/input-button/tests/InputButtonCore.spec.ts

@@ -242,6 +242,34 @@ describe("InputButtonCore", () => {
     });
   });
 
+  // -------------------------
+  // Link rendering
+  // -------------------------
+  describe("Link rendering", () => {
+    it("renders a plain anchor for a non-internal href", async () => {
+      wrapper = await createWrapper({ href: "https://example.com" });
+      const link = wrapper.find("a");
+      expect(link.exists()).toBe(true);
+      expect(link.attributes("href")).toBe("https://example.com");
+    });
+
+    it("renders a real anchor with the exact href for a '/'-prefixed href when external is true", async () => {
+      // Regression test: InputButtonCore used to always route a leading-"/" href through
+      // NuxtLink (client-side router.push), which silently fails for non-page paths like a
+      // Nitro server route ("/api/auth/github") since no Vue Router route matches it. The
+      // `external` prop forces a real anchor so the browser makes an actual request instead.
+      wrapper = await createWrapper({ href: "/api/auth/github", external: true });
+      const link = wrapper.find("a");
+      expect(link.exists()).toBe(true);
+      expect(link.attributes("href")).toBe("/api/auth/github");
+    });
+
+    it("applies the is-link class for a link", async () => {
+      wrapper = await createWrapper({ href: "/api/auth/github", external: true });
+      expect(wrapper.find("a").classes()).toContain("is-link");
+    });
+  });
+
   // -------------------------
   // Computed (vm internals)
   // -------------------------

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.6",
+  "version": "9.2.7",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",