srcdev-nuxt-components 9.1.36 → 9.1.37

package/app/components/{qr-code → 02.molecules/qr-code}/CaptureQrCode.vue

@@ -1,27 +1,21 @@
 <template>
   <div class="capture-qr-stream" :class="[elementClasses]">
-    <h2>Capture QR Code</h2>
     <div v-if="!state.error">
       <QrcodeStream v-if="state.cameraOn" ref="qrcodeStreamRef" @error="onError" @detect="onDetect" />
       <div v-else class="camera-stopped">
         <p>Camera stopped</p>
       </div>
-      <div class="pt-4">
-        <h5>Scanned QRCodes:</h5>
-        <ul v-if="result" class="list-disc pl-4">
+      <div v-if="result?.length" class="scanned-results">
+        <ul>
           <li v-for="(r, i) in result" :key="i">
-            <span class="text-wrap wrap-anywhere">
-              {{ r }}
-            </span>
+            <span>{{ r }}</span>
           </li>
         </ul>
       </div>
     </div>
-    <div v-else>
-      <h3>
-        {{ state.errorMsg }}
-      </h3>
-      <button @click="resetCamera">reset</button>
+    <div v-else class="camera-error">
+      <p>{{ state.errorMsg }}</p>
+      <button @click="resetCamera">Reset camera</button>
     </div>
   </div>
 </template>
@@ -29,12 +23,13 @@
 <script setup lang="ts">
 import type { DetectedBarcode } from "nuxt-qrcode"
 
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
 
 const qrcodeStreamRef = ref()
 const result = ref<string[]>()
@@ -44,9 +39,7 @@ const state = reactive({
   cameraOn: true,
 })
 
-// Reset camera state when component mounts
 onMounted(() => {
-  // Reset to default state on mount
   state.cameraOn = true
   state.error = false
   state.errorMsg = ""
@@ -61,28 +54,13 @@ onMounted(() => {
 
   document.addEventListener("visibilitychange", handleVisibilityChange)
 
-  // Cleanup listener on unmount
   onBeforeUnmount(() => {
     document.removeEventListener("visibilitychange", handleVisibilityChange)
   })
 })
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
-  result.value = detectedCodes.map((code) => {
-    // toast.add({
-    //   title: 'Detected',
-    //   description: `Value: ${code.rawValue}`,
-    //   actions: [
-    //     {
-    //       label: 'Copy',
-    //       onClick: () => {
-    //         navigator.clipboard.writeText(code.rawValue)
-    //       },
-    //     },
-    //   ],
-    // })
-    return code.rawValue
-  })
+  result.value = detectedCodes.map((code) => code.rawValue)
 }
 
 function onError(err: Error) {
@@ -95,19 +73,13 @@ function resetCamera() {
   state.cameraOn = true
 }
 
-// Function to stop all media streams
 function stopAllMediaStreams() {
-  // Stop streams via the QrcodeStream component ref
   if (qrcodeStreamRef.value) {
     try {
-      // Try to access the video element and stop its tracks
       const videoElement = qrcodeStreamRef.value.$el?.querySelector("video")
       if (videoElement && videoElement.srcObject) {
         const stream = videoElement.srcObject as MediaStream
-        const tracks = stream.getTracks()
-        tracks.forEach((track) => {
-          track.stop()
-        })
+        stream.getTracks().forEach((track) => track.stop())
         videoElement.srcObject = null
       }
     } catch (error) {
@@ -115,16 +87,11 @@ function stopAllMediaStreams() {
     }
   }
 
-  // Global cleanup: Find all video elements and stop their streams
   try {
-    const allVideoElements = document.querySelectorAll("video")
-    allVideoElements.forEach((video) => {
+    document.querySelectorAll("video").forEach((video) => {
       if (video.srcObject) {
         const stream = video.srcObject as MediaStream
-        const tracks = stream.getTracks()
-        tracks.forEach((track) => {
-          track.stop()
-        })
+        stream.getTracks().forEach((track) => track.stop())
         video.srcObject = null
       }
     })
@@ -133,39 +100,31 @@ function stopAllMediaStreams() {
   }
 }
 
-// Watch for camera state changes
 watch(
   () => state.cameraOn,
   (newValue) => {
     if (!newValue) {
-      // Wait a tick for the component to unmount, then clean up
-      nextTick(() => {
-        stopAllMediaStreams()
-      })
+      nextTick(() => stopAllMediaStreams())
     }
   }
 )
 
-// Stop camera when component is unmounted (e.g., route change)
 onBeforeUnmount(() => {
   state.cameraOn = false
   stopAllMediaStreams()
 })
 
-// Also handle dynamic component switching (like in [componentName].vue)
 onDeactivated(() => {
   state.cameraOn = false
   stopAllMediaStreams()
 })
 
 onActivated(() => {
-  // Reset state when component becomes active again
   state.cameraOn = true
   state.error = false
   state.errorMsg = ""
 })
 
-// Use Nuxt's navigation guard to stop camera before route changes
 onBeforeRouteLeave(() => {
   state.cameraOn = false
   stopAllMediaStreams()

package/app/components/{qr-code → 02.molecules/qr-code}/DecodeQrCode.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="decode-qr-code" :class="[elementClasses]">
-    <h2>Upload QR Code</h2>
     <QrcodeCapture class="qr-code-capture" @detect="onDetect" />
-
-    <h2>Drop QR Code</h2>
     <QrcodeDropZone class="qr-code-dropzone" @detect="onDetect" @dragover="onDropping" />
-
-    <div v-if="isDropping">
-      <h5>Scanned QRCodes (Dropped): {{ isDropping ? "Dropping..." : "" }}</h5>
-    </div>
-
-    <div class="pt-4">
-      <h5>Scanned QRCodes:</h5>
-      <ul v-if="result" class="list-disc pl-4">
+    <div v-if="result?.length" class="scanned-results">
+      <ul>
         <li v-for="(r, i) in result" :key="i">
-          <span class="text-wrap wrap-anywhere">
-            {{ r }}
-          </span>
+          <span>{{ r }}</span>
         </li>
       </ul>
     </div>
@@ -26,12 +15,13 @@
 <script setup lang="ts">
 import type { DetectedBarcode } from "nuxt-qrcode"
 
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
 
 const result = ref<string[]>()
 const isDropping = ref(false)
@@ -41,21 +31,7 @@ function onDropping(dropping: boolean) {
 }
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
-  result.value = detectedCodes.map((code) => {
-    // toast.add({
-    //   title: 'Detected',
-    //   description: `Value: ${code.rawValue}`,
-    //   actions: [
-    //     {
-    //       label: 'Copy',
-    //       onClick: () => {
-    //         navigator.clipboard.writeText(code.rawValue)
-    //       },
-    //     },
-    //   ],
-    // })
-    return code.rawValue
-  })
+  result.value = detectedCodes.map((code) => code.rawValue)
 }
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)

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");
+  });
+});