srcdev-nuxt-components 9.1.36 → 9.1.38

package/app/components/02.molecules/qr-code/tests/DecodeQrCode.spec.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import DecodeQrCode from "../DecodeQrCode.vue";
+
+interface DecodeVM {
+  result: string[] | undefined;
+  isDropping: boolean;
+  onDetect: (codes: { rawValue: string }[]) => void;
+  onDropping: (dropping: boolean) => void;
+}
+
+describe("DecodeQrCode", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as a div", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("always has the decode-qr-code class", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.classes()).toContain("decode-qr-code");
+  });
+
+  // ─── Initial DOM structure ─────────────────────────────────────────────────
+
+  it("renders the file capture element", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.find(".qr-code-capture").exists()).toBe(true);
+  });
+
+  it("renders the drop zone element", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.find(".qr-code-dropzone").exists()).toBe(true);
+  });
+
+  it("does not show scanned results initially", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+  });
+
+  // ─── Detect ───────────────────────────────────────────────────────────────
+
+  it("shows scanned results after onDetect is called", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    expect(wrapper.find(".scanned-results").exists()).toBe(true);
+  });
+
+  it("shows the detected value in the results list", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    expect(wrapper.find(".scanned-results").text()).toContain("https://example.com");
+  });
+
+  it("shows all detected values when multiple codes are decoded", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
+    await nextTick();
+    const items = wrapper.findAll(".scanned-results li");
+    expect(items).toHaveLength(2);
+    expect(items[0]!.text()).toBe("https://one.com");
+    expect(items[1]!.text()).toBe("https://two.com");
+  });
+
+  it("replaces results on subsequent detections", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "first" }]);
+    await nextTick();
+    vm.onDetect([{ rawValue: "second" }]);
+    await nextTick();
+    const items = wrapper.findAll(".scanned-results li");
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toBe("second");
+  });
+
+  it("hides results when detecting an empty array", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    vm.onDetect([]);
+    await nextTick();
+    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+  });
+
+  // ─── Dropping state ───────────────────────────────────────────────────────
+
+  it("sets isDropping to true when onDropping is called with true", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDropping(true);
+    await nextTick();
+    expect(vm.isDropping).toBe(true);
+  });
+
+  it("sets isDropping to false when onDropping is called with false", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDropping(true);
+    await nextTick();
+    vm.onDropping(false);
+    await nextTick();
+    expect(vm.isDropping).toBe(false);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains decode-qr-code class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode, {
+      props: { styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("decode-qr-code");
+    expect(wrapper.classes()).toContain("extra");
+  });
+});

package/app/layouts/default.vue

@@ -68,7 +68,6 @@ const responsiveNavLinks = {
         { name: "Banner", path: "/ui/display-banner" },
         { name: "Banner Video", path: "/banner-video" },
         { name: "Section Parallax", path: "/ui/section-parallax" },
-        { name: "Scroll Parallax Section", path: "/ui/scroll-parallax-section" },
         { name: "Animated SVG Text", path: "/ui/animated-svg-text" },
         { name: "Carousel (Basic)", path: "/ui/carousel-basic" },
         { name: "Carousel (Infinite)", path: "/ui/carousel-infinite" },

package/app/pages/ui/qr-code/[componentName].vue

@@ -121,9 +121,9 @@ type QrComponentName = "decode" | "capture" | "display";
 const componentName = computed<QrComponentName>(() => route.params.componentName as QrComponentName);
 
 // Component set up
-const DecodeQrCode = defineAsyncComponent(() => import("~/components/qr-code/DecodeQrCode.vue"));
-const CaptureQrCode = defineAsyncComponent(() => import("~/components/qr-code/CaptureQrCode.vue"));
-const DisplayQrCode = defineAsyncComponent(() => import("~/components/qr-code/DisplayQrCode.vue"));
+const DecodeQrCode = defineAsyncComponent(() => import("~/components/02.molecules/qr-code/DecodeQrCode.vue"));
+const CaptureQrCode = defineAsyncComponent(() => import("~/components/02.molecules/qr-code/CaptureQrCode.vue"));
+const DisplayQrCode = defineAsyncComponent(() => import("~/components/01.atoms/qr-code/DisplayQrCode.vue"));
 
 const components: Record<
   QrComponentName,

package/app/pages/ui/simple-grid.vue

@@ -6,7 +6,7 @@
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
-          <DisplayGridCore
+          <GridCore
             v-if="status === 'success'"
             :grid-data="postsData?.posts.slice(0, displayCount) ?? ({} as Posts)"
             :style-class-passthrough="['display-posts']"
@@ -18,7 +18,7 @@
                 <div>{{ item.body }}</div>
               </div>
             </template>
-          </DisplayGridCore>
+          </GridCore>
 
           <p v-else class="page-body-normal">&hellip;Loading</p>
         </LayoutRow>

package/package.json

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

package/.claude/skills/components/scroll-parallax-section.md

@@ -1,148 +0,0 @@
----
-name: ScrollParallaxSection
-description: ScrollParallaxSection JS-driven parallax background section — props, CSS height token, slot usage, parallaxStrength guide, reduced-motion, vs ScrollRevealFrame
-type: reference
----
-
-# ScrollParallaxSection
-
-## Overview
-
-`ScrollParallaxSection` is a full-width section with a parallax background image driven by `requestAnimationFrame` and `IntersectionObserver`. The background image bleeds beyond the container bounds and is translated vertically as the component scrolls through the viewport.
-
-Use this component for **full-width decorative background sections** — hero banners, dividers, and atmospheric breaks between content. For arbitrary slot content that itself needs to pan (grids of images, video), use `ScrollRevealFrame` instead.
-
-### How it works
-
-- The root element is a fixed-height container with `overflow: hidden`.
-- `.scroll-parallax-section__bg` is positioned absolutely with a negative inset (derived from `parallaxStrength`) so the image bleeds beyond the frame top and bottom, ensuring full coverage at all scroll positions.
-- On scroll/resize, a `requestAnimationFrame` callback reads `getBoundingClientRect()` and sets `translateY` on the background element.
-- An `IntersectionObserver` pauses the RAF loop when the component is offscreen, reducing CPU usage.
-- The background layer uses `will-change: transform` for GPU compositing.
-
-### Difference from ScrollRevealFrame / ScrollRevealImage
-
-| | `ScrollParallaxSection` | `ScrollRevealFrame` / `ScrollRevealImage` |
-|---|---|---|
-| Mechanism | JS (RAF + IntersectionObserver) | CSS Scroll-driven Animations |
-| Browser support | All modern + older browsers | Chrome 115+, Firefox 114+, Safari 17.2+ |
-| Content | Background image only (slot above) | Slot content pans as a unit |
-| Use case | Full-width decorative background sections | Clipping frames with panning image/content |
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tag` | `"div" \| "section" \| "article" \| "aside"` | `"div"` | HTML element rendered as the container. Use `"section"` for landmark regions. |
-| `backgroundImage` | `string` | — | **Required.** Path or URL of the background image. Passed via CSS `background-image`. |
-| `parallaxStrength` | `number` | `1` | Multiplier for the parallax movement and image bleed. `0` = no movement, `1` = standard, `2` = very dramatic. See the guide below. |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Content placed above the parallax background at `z-index: 1`. |
-
-## CSS custom properties
-
-Height is controlled entirely via CSS — there is no `height` prop.
-
-| Property | Default | Description |
-|----------|---------|-------------|
-| `--scroll-parallax-section-height` | `25svh` | Height of the visible section. Set on the component or a parent wrapper. |
-
-## Basic usage
-
-```vue
-<ScrollParallaxSection background-image="/images/banners/banner-mid-brown.webp" />
-```
-
-## With slot content
-
-Slot content is layered at `z-index: 1` above the parallax background. Use flexbox or grid on the root element (via `styleClassPassthrough` or an inline style) to position it.
-
-```vue
-<ScrollParallaxSection
-  background-image="/images/banners/banner-ginger.webp"
-  :parallax-strength="0.8"
-  tag="section"
-  style="
-    --scroll-parallax-section-height: 40svh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  "
->
-  <h2 style="color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5);">Section heading</h2>
-</ScrollParallaxSection>
-```
-
-## Custom height via CSS override
-
-Override the height in a scoped stylesheet — useful for responsive breakpoints.
-
-```css
-.my-page {
-  .scroll-parallax-section {
-    --scroll-parallax-section-height: 20svh;
-
-    @media (width >= 768px) {
-      --scroll-parallax-section-height: 35svh;
-    }
-
-    @media (width >= 1200px) {
-      --scroll-parallax-section-height: 25svh;
-    }
-  }
-}
-```
-
-## Choosing parallaxStrength
-
-`parallaxStrength` controls two things simultaneously:
-
-1. **Movement** — how far the background travels per pixel of scroll.
-2. **Image bleed** — the negative inset applied to `.scroll-parallax-section__bg`. The inset is calculated as `ceil(parallaxStrength × 100)%`, ensuring the image always fills the frame even at extremes of the scroll position.
-
-| `parallaxStrength` | Character | Inset |
-|---|---|---|
-| `0` | No movement (static background) | `0%` |
-| `0.3–0.5` | Subtle — good for text-heavy sections | `30–50%` |
-| `1` (default) | Standard parallax feel | `100%` |
-| `1.5–2` | Dramatic — large image travel | `150–200%` |
-
-Values above `2` are rarely useful and increase layout memory cost.
-
-## Reduced motion
-
-The component does not yet implement a `prefers-reduced-motion` media query. If your consuming app needs to respect user motion preferences, disable the parallax effect by setting `parallaxStrength` to `0` and watching the CSS media feature:
-
-```vue
-<script setup lang="ts">
-const prefersReducedMotion = ref(false);
-
-onMounted(() => {
-  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-  prefersReducedMotion.value = mq.matches;
-  mq.addEventListener("change", (e) => {
-    prefersReducedMotion.value = e.matches;
-  });
-});
-</script>
-
-<template>
-  <ScrollParallaxSection
-    background-image="/images/banner.webp"
-    :parallax-strength="prefersReducedMotion ? 0 : 1"
-  />
-</template>
-```
-
-## Notes
-
-- `backgroundImage` is passed through `v-bind()` as a CSS `background-image` value. The image is not processed by `@nuxt/image` — use a path under `public/` or a full URL.
-- `overflow: hidden` is on the root element. Content that needs to escape (dropdowns, tooltips) must be portalled outside.
-- The background layer uses `background-position: center` and `background-size: cover`. The focal point cannot be changed per-prop — override `background-position` in CSS if needed.
-- Multiple `ScrollParallaxSection` instances on the same page each run independent observers and RAF loops. They pause individually when offscreen.
-- Do not nest `ScrollParallaxSection` inside a container with CSS `transform` — this creates a new stacking context and breaks the `getBoundingClientRect` viewport calculation.

package/app/components/01.atoms/scroll-parallax-section/ScrollParallaxSection.vue

@@ -1,108 +0,0 @@
-<template>
-  <component :is="tag" ref="containerRef" class="scroll-parallax-section" :class="[elementClasses]">
-    <div ref="bgRef" class="scroll-parallax-section__bg"></div>
-    <div class="scroll-parallax-section__content">
-      <slot></slot>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  tag?: "div" | "section" | "article" | "aside";
-  backgroundImage: string;
-  parallaxStrength?: number;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tag: "div",
-  parallaxStrength: 1,
-  styleClassPassthrough: () => [],
-});
-
-const containerRef = useTemplateRef<HTMLElement>("containerRef");
-const bgRef = useTemplateRef<HTMLElement>("bgRef");
-
-const bgImage = computed(() => `url("${props.backgroundImage}")`);
-const bgInset = computed(() => `-${Math.ceil(props.parallaxStrength * 100)}% 0`);
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => resetElementClasses(props.styleClassPassthrough)
-);
-
-let rafId: number | null = null;
-let isVisible = false;
-let observer: IntersectionObserver | null = null;
-
-function updateParallax() {
-  if (!bgRef.value || !containerRef.value) return;
-  const rect = containerRef.value.getBoundingClientRect();
-  const viewportCenter = window.innerHeight / 2;
-  const elementCenter = rect.top + rect.height / 2;
-  const offset = (viewportCenter - elementCenter) * props.parallaxStrength;
-  bgRef.value.style.transform = `translate3d(0, ${offset}px, 0)`;
-}
-
-function onScroll() {
-  if (!isVisible || rafId !== null) return;
-  rafId = requestAnimationFrame(() => {
-    updateParallax();
-    rafId = null;
-  });
-}
-
-onMounted(() => {
-  updateParallax();
-
-  observer = new IntersectionObserver(
-    (entries) => {
-      isVisible = entries[0]!.isIntersecting;
-      if (isVisible) updateParallax();
-    },
-    { rootMargin: "50px" }
-  );
-
-  if (containerRef.value) observer.observe(containerRef.value);
-
-  window.addEventListener("scroll", onScroll, { passive: true });
-  window.addEventListener("resize", onScroll, { passive: true });
-});
-
-onUnmounted(() => {
-  window.removeEventListener("scroll", onScroll);
-  window.removeEventListener("resize", onScroll);
-  if (rafId !== null) cancelAnimationFrame(rafId);
-  observer?.disconnect();
-});
-</script>
-
-<style lang="css">
-@layer components {
-  .scroll-parallax-section {
-    --scroll-parallax-section-height: 25svh;
-    height: var(--scroll-parallax-section-height);
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-
-    .scroll-parallax-section__bg {
-      position: absolute;
-      inset: v-bind(bgInset);
-      background-image: v-bind(bgImage);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      will-change: transform;
-    }
-
-    .scroll-parallax-section__content {
-      position: relative;
-      z-index: 1;
-    }
-  }
-}
-</style>

package/app/components/01.atoms/scroll-parallax-section/stories/ScrollParallaxSection.stories.ts

@@ -1,151 +0,0 @@
-import ScrollParallaxSection from "../ScrollParallaxSection.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-const meta: Meta<typeof ScrollParallaxSection> = {
-  title: "Atoms/Effects/ScrollParallaxSection",
-  component: ScrollParallaxSection,
-  argTypes: {
-    tag: {
-      control: "select",
-      options: ["div", "section", "article", "aside"],
-      description: "HTML element rendered as the container",
-      table: { category: "Layout" },
-    },
-    backgroundImage: {
-      control: "text",
-      description: "Path or URL of the background image",
-      table: { category: "Image" },
-    },
-    parallaxStrength: {
-      control: { type: "range", min: 0, max: 2, step: 0.1 },
-      description:
-        "Multiplier for the parallax offset. 0 = no movement, 1 = standard, 2 = very dramatic. Also controls the image bleed (inset) so the full image fills the frame at all scroll positions.",
-      table: { category: "Layout" },
-    },
-    styleClassPassthrough: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "A section with a fixed-background parallax effect implemented via `requestAnimationFrame` and `IntersectionObserver`. The background image bleeds beyond the container bounds and is translated vertically as the component scrolls through the viewport. Height is controlled via the `--scroll-parallax-section-height` CSS custom property (default `25svh`). Slot content is layered above the background at `z-index: 1`.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ScrollParallaxSection>;
-
-const scrollWrapper = (inner: string) => `
-  <div style="padding-block: 60vh; max-width: 960px; margin-inline: auto;">
-    <p style="text-align: center; font-size: 1.4rem; opacity: 0.5; margin-block-end: 4rem;">Scroll to see the parallax effect</p>
-    ${inner}
-  </div>
-`;
-
-export const Default: Story = {
-  args: {
-    backgroundImage: "/images/banners/banner-mid-brown.webp",
-    parallaxStrength: 1,
-    tag: "div",
-  },
-  render: (args) => ({
-    components: { ScrollParallaxSection },
-    setup() {
-      return { args };
-    },
-    template: scrollWrapper(`<ScrollParallaxSection v-bind="args" />`),
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "Default configuration — standard parallax strength with no slot content.",
-      },
-    },
-  },
-};
-
-export const SubtleEffect: Story = {
-  args: {
-    backgroundImage: "/images/banners/banner-light-brunette.webp",
-    parallaxStrength: 0.4,
-    tag: "div",
-  },
-  render: Default.render,
-  parameters: {
-    docs: {
-      description: {
-        story: "A low parallaxStrength (0.4) gives a gentle, understated movement — good for hero banners where content legibility matters.",
-      },
-    },
-  },
-};
-
-export const DramaticEffect: Story = {
-  args: {
-    backgroundImage: "/images/banners/banner-ginger.webp",
-    parallaxStrength: 1.8,
-    tag: "div",
-  },
-  render: Default.render,
-  parameters: {
-    docs: {
-      description: {
-        story: "A high parallaxStrength (1.8) creates a dramatic sweep — the image travels a much larger distance relative to the scroll position.",
-      },
-    },
-  },
-};
-
-export const WithSlotContent: Story = {
-  args: {
-    backgroundImage: "/images/page/hero/hero-dark.jpg",
-    parallaxStrength: 1,
-    tag: "section",
-  },
-  render: (args) => ({
-    components: { ScrollParallaxSection },
-    setup() {
-      return { args };
-    },
-    template: scrollWrapper(`
-      <ScrollParallaxSection v-bind="args" style="--scroll-parallax-section-height: 40svh; display: flex; align-items: center; justify-content: center;">
-        <p style="color: white; font-size: 2.4rem; font-weight: 600; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.6); padding: 2rem;">
-          Slot content sits above the parallax background
-        </p>
-      </ScrollParallaxSection>
-    `),
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "Slot content is placed at `z-index: 1` above the parallax layer. Height is increased via the `--scroll-parallax-section-height` CSS custom property to accommodate the text.",
-      },
-    },
-  },
-};
-
-export const TallSection: Story = {
-  args: {
-    backgroundImage: "/images/page/hero/hero-blonde.jpg",
-    parallaxStrength: 1,
-    tag: "div",
-  },
-  render: (args) => ({
-    components: { ScrollParallaxSection },
-    setup() {
-      return { args };
-    },
-    template: scrollWrapper(`<ScrollParallaxSection v-bind="args" style="--scroll-parallax-section-height: 60svh;" />`),
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "The `--scroll-parallax-section-height` custom property overrides the default `25svh` height. Here it is set to `60svh` for a tall banner.",
-      },
-    },
-  },
-};