srcdev-nuxt-components 9.1.35 → 9.1.37

package/app/components/01.atoms/qr-code/stories/DisplayQrCode.stories.ts

@@ -0,0 +1,206 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import DisplayQrCodeComponent from "../DisplayQrCode.vue";
+import type { QrCodeVariant } from "../../../../types/components";
+
+const meta: Meta<typeof DisplayQrCodeComponent> = {
+  title: "Atoms/QR Code/DisplayQrCode",
+  component: DisplayQrCodeComponent,
+  argTypes: {
+    qrValue: {
+      control: { type: "text" },
+      description: "The value/content to encode in the QR code",
+      table: { category: "Content" },
+    },
+    size: {
+      control: { type: "text" },
+      description: "Size of the QR code (CSS value like '256px', '10rem')",
+      table: { category: "Appearance" },
+    },
+    radius: {
+      control: { type: "range", min: 0, max: 20, step: 1 },
+      description: "Border radius of the QR code corners",
+      table: { category: "Appearance" },
+    },
+    blackColor: {
+      control: { type: "color" },
+      description: "Color of the QR code foreground elements",
+      table: { category: "Appearance" },
+    },
+    whiteColor: {
+      control: { type: "color" },
+      description: "Color of the QR code background",
+      table: { category: "Appearance" },
+    },
+    variant: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    qrValue: "https://github.com/srcdev/nuxt-components",
+    size: "256px",
+    radius: 0,
+    blackColor: "#000000",
+    whiteColor: "transparent",
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+
+interface QrStoryArgs {
+  qrValue: string;
+  size: string;
+  radius: number;
+  blackColor: string;
+  whiteColor: string;
+  styleClassPassthrough: string[];
+}
+
+const DisplayTemplate: StoryFn<QrStoryArgs> = (args, { parameters }) => ({
+  components: { DisplayQrCodeComponent },
+  setup() {
+    const variant: QrCodeVariant = parameters?.variant || {
+      inner: "default",
+      marker: "default",
+      pixel: "default",
+    };
+    return { args, variant };
+  },
+  template: `
+    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 8px;">
+      <DisplayQrCodeComponent
+        :qrValue="args.qrValue"
+        :variant="variant"
+        :radius="args.radius"
+        :blackColor="args.blackColor"
+        :whiteColor="args.whiteColor"
+        :size="args.size"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+    </div>
+  `,
+});
+
+export const Default = DisplayTemplate.bind({});
+
+export const Website = DisplayTemplate.bind({});
+Website.args = { qrValue: "https://nuxt.com", radius: 8, blackColor: "#000000" };
+Website.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const VariantDefault = DisplayTemplate.bind({});
+VariantDefault.args = { qrValue: "Default variant style", radius: 4 };
+VariantDefault.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
+
+export const VariantCircle = DisplayTemplate.bind({});
+VariantCircle.args = { qrValue: "Circle variant style", radius: 8, blackColor: "#1e40af" };
+VariantCircle.parameters = { variant: { inner: "circle", marker: "circle", pixel: "circle" } };
+
+export const VariantRounded = DisplayTemplate.bind({});
+VariantRounded.args = { qrValue: "Rounded variant style", radius: 12, blackColor: "#059669" };
+VariantRounded.parameters = { variant: { inner: "rounded", marker: "rounded", pixel: "rounded" } };
+
+export const VariantDots = DisplayTemplate.bind({});
+VariantDots.args = { qrValue: "Dots variant style", radius: 6, blackColor: "#dc2626" };
+VariantDots.parameters = { variant: { inner: "dots", marker: "dots", pixel: "dots" } };
+
+export const VariantMixed = DisplayTemplate.bind({});
+VariantMixed.args = { qrValue: "Mixed variants for creative styling", radius: 10, blackColor: "#7c3aed" };
+VariantMixed.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const WiFiConnection = DisplayTemplate.bind({});
+WiFiConnection.args = { qrValue: "WIFI:T:WPA;S:MyHomeNetwork;P:mySecurePassword123;H:false;", blackColor: "#1e40af", radius: 4 };
+WiFiConnection.parameters = { variant: { inner: "rounded", marker: "circle", pixel: "default" } };
+
+export const VCardContact = DisplayTemplate.bind({});
+VCardContact.args = {
+  qrValue: "BEGIN:VCARD\\nVERSION:3.0\\nFN:John Doe\\nORG:Acme Corp\\nTITLE:Software Engineer\\nTEL:+1234567890\\nEMAIL:john.doe@acme.com\\nURL:https://johndoe.dev\\nEND:VCARD",
+  blackColor: "#059669",
+  radius: 12,
+};
+VCardContact.parameters = { variant: { inner: "dots", marker: "rounded", pixel: "circle" } };
+
+export const SmallSize = DisplayTemplate.bind({});
+SmallSize.args = { qrValue: "Small QR for tight spaces", size: "128px", radius: 2, blackColor: "#f59e0b" };
+SmallSize.parameters = { variant: { inner: "dots", marker: "circle", pixel: "rounded" } };
+
+export const LargeSize = DisplayTemplate.bind({});
+LargeSize.args = { qrValue: "Large QR for posters and signage", size: "400px", radius: 16, blackColor: "#0ea5e9" };
+LargeSize.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const HighContrast = DisplayTemplate.bind({});
+HighContrast.args = { qrValue: "High contrast for accessibility", blackColor: "#000000", whiteColor: "#ffffff", radius: 0, size: "256px" };
+HighContrast.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
+
+const PlaygroundTemplate: StoryFn<QrStoryArgs> = (args) => ({
+  components: { DisplayQrCodeComponent },
+  setup() {
+    const qrValue = ref(args.qrValue);
+    const variant = ref<QrCodeVariant>({ inner: "circle", marker: "rounded", pixel: "dots" });
+    const radius = ref(args.radius);
+    const blackColor = ref(args.blackColor);
+    const whiteColor = ref(args.whiteColor);
+    const sizeValue = ref(256);
+    const size = computed(() => `${sizeValue.value}px`);
+    const presetValues = [
+      { label: "Website URL", value: "https://nuxt.com" },
+      { label: "WiFi Network", value: "WIFI:T:WPA;S:MyNetwork;P:password123;" },
+      { label: "Phone Number", value: "tel:+1234567890" },
+      { label: "Email", value: "mailto:hello@example.com" },
+      { label: "SMS", value: "sms:+1234567890?body=Hello!" },
+      { label: "Location", value: "geo:40.7128,-74.0060" },
+    ];
+    const variantOptions = ["default", "circle", "rounded", "dots"];
+    return { qrValue, variant, radius, blackColor, whiteColor, sizeValue, size, presetValues, variantOptions };
+  },
+  template: `
+    <div style="padding: 40px;">
+      <div style="display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start;">
+        <div style="display: flex; align-items: center; justify-content: center; min-height: 400px; background: #f8fafc; border-radius: 8px; padding: 40px;">
+          <DisplayQrCodeComponent :qrValue="qrValue" :variant="variant" :radius="radius" :blackColor="blackColor" :whiteColor="whiteColor" :size="size" />
+        </div>
+        <div style="background: white; padding: 24px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <h3 style="margin: 0 0 20px 0; color: #374151; font-size: 18px;">QR Code Playground</h3>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Quick Presets:</label>
+            <select @change="qrValue = $event.target.value" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+              <option value="">Select a preset...</option>
+              <option v-for="preset in presetValues" :key="preset.label" :value="preset.value">{{ preset.label }}</option>
+            </select>
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Custom Content:</label>
+            <textarea v-model="qrValue" rows="3" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 12px;" placeholder="Enter QR code content..." />
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Style Variants:</label>
+            <div style="display: grid; gap: 8px;">
+              <div><label style="font-size: 12px; color: #6b7280;">Inner:</label><select v-model="variant.inner" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Marker:</label><select v-model="variant.marker" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Pixel:</label><select v-model="variant.pixel" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+            </div>
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Appearance:</label>
+            <div style="display: grid; gap: 12px;">
+              <div><label style="font-size: 12px; color: #6b7280;">Size: {{ sizeValue }}px</label><input v-model.number="sizeValue" type="range" min="128" max="400" step="16" style="width: 100%;" /></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Radius: {{ radius }}px</label><input v-model.number="radius" type="range" min="0" max="20" step="1" style="width: 100%;" /></div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                <div><label style="font-size: 12px; color: #6b7280;">Foreground:</label><input v-model="blackColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
+                <div><label style="font-size: 12px; color: #6b7280;">Background:</label><input v-model="whiteColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+export const InteractivePlayground = PlaygroundTemplate.bind({});
+InteractivePlayground.args = {
+  qrValue: "https://github.com/srcdev/nuxt-components",
+  radius: 8,
+  blackColor: "#000000",
+  whiteColor: "transparent",
+  size: "256px",
+  styleClassPassthrough: [],
+};

package/app/components/01.atoms/qr-code/tests/DisplayQrCode.spec.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayQrCode from "../DisplayQrCode.vue";
+import type { QrCodeVariant } from "~/types/components";
+
+const defaultProps = {
+  qrValue: "https://example.com",
+};
+
+describe("DisplayQrCode", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders a single root element", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.element).toBeTruthy();
+  });
+
+  it("always has the display-qr-code class", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.classes()).toContain("display-qr-code");
+  });
+
+  // ─── Default props ────────────────────────────────────────────────────────
+
+  it("defaults radius to 0", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(0);
+  });
+
+  it("defaults blackColor to currentColor", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("currentColor");
+  });
+
+  it("defaults whiteColor to transparent", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("transparent");
+  });
+
+  it("defaults size to 256px", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("256px");
+  });
+
+  it("defaults variant to all-default", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual({ inner: "default", marker: "default", pixel: "default" });
+  });
+
+  // ─── Custom props ─────────────────────────────────────────────────────────
+
+  it("reflects a custom radius prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, radius: 12 },
+    });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(12);
+  });
+
+  it("reflects a custom blackColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, blackColor: "#ff0000" },
+    });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("#ff0000");
+  });
+
+  it("reflects a custom whiteColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, whiteColor: "#ffffff" },
+    });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("#ffffff");
+  });
+
+  it("reflects a custom size prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, size: "128px" },
+    });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("128px");
+  });
+
+  it("reflects a custom variant prop", async () => {
+    const variant: QrCodeVariant = { inner: "circle", marker: "rounded", pixel: "dots" };
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, variant },
+    });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual(variant);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains display-qr-code class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("display-qr-code");
+    expect(wrapper.classes()).toContain("extra");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

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)