srcdev-nuxt-components 9.1.35 → 9.1.37

package/app/components/02.molecules/qr-code/stories/QrCode.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CaptureQrCodeComponent from "../CaptureQrCode.vue";
+import DecodeQrCodeComponent from "../DecodeQrCode.vue";
+
+// ===== CAPTURE QR CODE =====
+
+const CaptureQrCodeMeta: Meta<typeof CaptureQrCodeComponent> = {
+  title: "Molecules/QR Code/CaptureQrCode",
+  component: CaptureQrCodeComponent,
+  argTypes: {
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Interactive QR code scanner using device camera. Requires camera permissions to function properly. Features automatic detection, error handling, and camera management.",
+      },
+    },
+  },
+};
+
+const CaptureTemplate: StoryFn<typeof CaptureQrCodeComponent> = (args) => ({
+  components: { CaptureQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+        <h3 style="margin: 0 0 10px 0; color: #374151;">Live Camera QR Scanner</h3>
+        <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 14px;">
+          This component uses your device camera to scan QR codes in real-time.
+          Make sure to allow camera access when prompted.
+        </p>
+        <div style="background: #fff3cd; padding: 12px; border-radius: 4px; border: 1px solid #ffeaa7;">
+          <p style="margin: 0; color: #856404; font-size: 12px;">
+            <strong>Features:</strong> Automatic detection, multiple code scanning, camera management, error recovery
+          </p>
+        </div>
+      </div>
+      <CaptureQrCodeComponent :style-class-passthrough="args.styleClassPassthrough" />
+    </div>
+  `,
+});
+
+export const CaptureDefault = CaptureTemplate.bind({});
+export const CaptureDefaultMeta = CaptureQrCodeMeta;
+
+// ===== DECODE QR CODE =====
+
+const DecodeQrCodeMeta: Meta<typeof DecodeQrCodeComponent> = {
+  title: "Molecules/QR Code/DecodeQrCode",
+  component: DecodeQrCodeComponent,
+  argTypes: {
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Upload or drag-and-drop QR code images to decode their content. Supports various image formats including PNG, JPEG, WEBP, and more.",
+      },
+    },
+  },
+};
+
+const DecodeTemplate: StoryFn<typeof DecodeQrCodeComponent> = (args) => ({
+  components: { DecodeQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+        <h3 style="margin: 0 0 10px 0; color: #374151;">QR Image Decoder</h3>
+        <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 14px;">
+          Upload or drag QR code images to extract their content.
+          Supports PNG, JPEG, WEBP, and other common image formats.
+        </p>
+        <div style="background: #d1ecf1; padding: 12px; border-radius: 4px; border: 1px solid #bee5eb;">
+          <p style="margin: 0; color: #0c5460; font-size: 12px;">
+            <strong>Supported formats:</strong> PNG, JPEG, WEBP, BMP, GIF • <strong>Methods:</strong> File upload, drag & drop
+          </p>
+        </div>
+      </div>
+      <DecodeQrCodeComponent :style-class-passthrough="args.styleClassPassthrough" />
+    </div>
+  `,
+});
+
+export const DecodeDefault = DecodeTemplate.bind({});
+export const DecodeDefaultMeta = DecodeQrCodeMeta;
+
+export default CaptureQrCodeMeta;

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

@@ -0,0 +1,212 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import CaptureQrCode from "../CaptureQrCode.vue";
+
+interface CaptureVM {
+  state: { error: boolean; errorMsg: string; cameraOn: boolean };
+  result: string[] | undefined;
+  onDetect: (codes: { rawValue: string }[]) => void;
+  onError: (err: Error) => void;
+  resetCamera: () => void;
+}
+
+describe("CaptureQrCode", () => {
+  // QrcodeStream (from nuxt-qrcode) runs canvas-based detection internally.
+  // jsdom defines HTMLCanvasElement but returns null for getContext, which
+  // causes the library to throw. We provide a minimal non-null mock.
+  beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as a div", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("always has the capture-qr-stream class", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.classes()).toContain("capture-qr-stream");
+  });
+
+  // ─── Initial state ────────────────────────────────────────────────────────
+
+  it("has camera on by default", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    expect(vm.state.cameraOn).toBe(true);
+  });
+
+  it("does not show camera-stopped on mount", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".camera-stopped").exists()).toBe(false);
+  });
+
+  it("does not show scanned results initially", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+  });
+
+  it("does not show the error state initially", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".camera-error").exists()).toBe(false);
+  });
+
+  // ─── Camera off ───────────────────────────────────────────────────────────
+
+  it("hides the stream and shows camera-stopped when cameraOn is false", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.state.cameraOn = false;
+    await nextTick();
+    expect(vm.state.cameraOn).toBe(false);
+    expect(wrapper.find(".camera-stopped").exists()).toBe(true);
+  });
+
+  // ─── Error state ──────────────────────────────────────────────────────────
+
+  it("shows camera-error when onError is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("Permission denied"));
+    await nextTick();
+    expect(wrapper.find(".camera-error").exists()).toBe(true);
+  });
+
+  it("shows the error message in the error state", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("Permission denied"));
+    await nextTick();
+    expect(wrapper.find(".camera-error p").text()).toContain("Permission denied");
+  });
+
+  it("sets state.error when onError is called, hiding the stream", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    expect(vm.state.error).toBe(true);
+    expect(wrapper.find(".camera-error").exists()).toBe(true);
+  });
+
+  it("shows a reset button in the error state", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    expect(wrapper.find(".camera-error button").exists()).toBe(true);
+  });
+
+  // ─── Reset camera ─────────────────────────────────────────────────────────
+
+  it("clears the error state when resetCamera is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    vm.resetCamera();
+    await nextTick();
+    expect(wrapper.find(".camera-error").exists()).toBe(false);
+    expect(vm.state.cameraOn).toBe(true);
+  });
+
+  it("clears the error state when the reset button is clicked", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    await wrapper.find(".camera-error button").trigger("click");
+    expect(wrapper.find(".camera-error").exists()).toBe(false);
+  });
+
+  // ─── Detect ───────────────────────────────────────────────────────────────
+
+  it("shows scanned results after onDetect is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    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(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    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 scanned", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    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 scans", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    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");
+  });
+
+  // ─── Visibility change ────────────────────────────────────────────────────
+
+  it("stops the camera when the page becomes hidden", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    Object.defineProperty(document, "hidden", { get: () => true, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    await nextTick();
+    expect(wrapper.find("qrcodestream").exists()).toBe(false);
+    Object.defineProperty(document, "hidden", { get: () => false, configurable: true });
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains capture-qr-stream class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("capture-qr-stream");
+    expect(wrapper.classes()).toContain("extra");
+  });
+});

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/components/parallax/SectionParallax.vue

@@ -5,21 +5,15 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return ["div", "section", "article", "aside"].includes(value);
-    },
-  },
-  backgroundImage: {
-    type: String,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
+interface Props {
+  tag?: "div" | "section" | "article" | "aside";
+  backgroundImage: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
 });
 
 const slots = useSlots();
@@ -38,25 +32,25 @@ watch(
 
 <style lang="css">
 @layer components {
-.section-parallax {
-  /* Component styles */
-
-  min-height: 100svh;
-  background-image: v-bind(backgroundImage);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-
-  background-color: light-dark(var(--slate-01), var(--slate-08));
-  width: 100%;
-
-  @media (hover: hover) and (pointer: fine) {
-    @supports (background-attachment: fixed) {
-      background-attachment: fixed;
-      min-height: 120vh;
+  .section-parallax {
+    /* Component styles */
+
+    min-height: 100svh;
+    background-image: v-bind(backgroundImage);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    background-color: light-dark(var(--slate-01), var(--slate-08));
+    width: 100%;
+
+    @media (hover: hover) and (pointer: fine) {
+      @supports (background-attachment: fixed) {
+        background-attachment: fixed;
+        min-height: 120vh;
+      }
     }
   }
 }
-}
 </style>

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/package.json

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

package/app/components/qr-code/DisplayQrCode.vue

@@ -1,53 +0,0 @@
-<template>
-  <Qrcode :value="qrValue" class="display-qr-code" :variant :radius :blackColor :whiteColor :class="[elementClasses]" />
-</template>
-
-<script setup lang="ts">
-import type { QrCodeVariant } from "../../types/components";
-
-const props = defineProps({
-  qrValue: {
-    type: String,
-    required: true,
-  },
-  variant: {
-    type: Object as PropType<QrCodeVariant>,
-    default: () => ({
-      inner: "default",
-      marker: "default",
-      pixel: "default",
-    }),
-  },
-  radius: {
-    type: Number,
-    default: 0,
-  },
-  blackColor: {
-    type: String,
-    default: "currentColor",
-  },
-  whiteColor: {
-    type: String,
-    default: "transparent",
-  },
-  size: {
-    type: String,
-    default: "256px",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.display-qr-code {
-  aspect-ratio: 1 / 1;
-  width: v-bind(size);
-}
-}
-</style>