srcdev-nuxt-components 9.1.36 → 9.1.38

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

@@ -1,91 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { nextTick } from "vue";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ScrollParallaxSection from "../ScrollParallaxSection.vue";
-
-describe("ScrollParallaxSection", () => {
-  beforeEach(() => {
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      cb(0);
-      return 0;
-    });
-    vi.stubGlobal("cancelAnimationFrame", vi.fn());
-  });
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg" },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders the bg and content divs", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg" },
-    });
-    expect(wrapper.find(".scroll-parallax-section__bg").exists()).toBe(true);
-    expect(wrapper.find(".scroll-parallax-section__content").exists()).toBe(true);
-  });
-
-  it("renders slot content inside __content", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg" },
-      slots: { default: "<p>Hello</p>" },
-    });
-    expect(wrapper.find(".scroll-parallax-section__content p").text()).toBe("Hello");
-  });
-
-  it("renders as the given tag", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg", tag: "section" },
-    });
-    expect(wrapper.element.tagName.toLowerCase()).toBe("section");
-  });
-
-  it("defaults to div tag", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg" },
-    });
-    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
-  });
-
-  it("applies styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg", styleClassPassthrough: "my-custom-class" },
-    });
-    expect(wrapper.classes()).toContain("my-custom-class");
-  });
-
-  it("adds and removes scroll and resize listeners on mount/unmount", async () => {
-    const addSpy = vi.spyOn(window, "addEventListener");
-    const removeSpy = vi.spyOn(window, "removeEventListener");
-
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg" },
-    });
-
-    expect(addSpy).toHaveBeenCalledWith("scroll", expect.any(Function), { passive: true });
-    expect(addSpy).toHaveBeenCalledWith("resize", expect.any(Function), { passive: true });
-
-    wrapper.unmount();
-
-    expect(removeSpy).toHaveBeenCalledWith("scroll", expect.any(Function));
-    expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-  });
-
-  it("updates bg transform on scroll", async () => {
-    const wrapper = await mountSuspended(ScrollParallaxSection, {
-      props: { backgroundImage: "/img/bg.jpg", parallaxStrength: 0.3 },
-    });
-
-    const bg = wrapper.find(".scroll-parallax-section__bg").element as HTMLElement;
-
-    Object.defineProperty(wrapper.element, "offsetTop", { value: 400, configurable: true });
-    Object.defineProperty(wrapper.element, "offsetHeight", { value: 600, configurable: true });
-
-    window.dispatchEvent(new Event("scroll"));
-    await nextTick();
-
-    expect(bg.style.transform).toMatch(/translate3d\(/);
-  });
-});

package/app/components/display-grid/DisplayGridCore.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="[elementClasses]">
-    <slot v-for="item in gridData" :key="item.id" :name="item.id"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridData = toRef(() => props.gridData);
-</script>

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

@@ -1,183 +0,0 @@
-<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">
-          <li v-for="(r, i) in result" :key="i">
-            <span class="text-wrap wrap-anywhere">
-              {{ r }}
-            </span>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div v-else>
-      <h3>
-        {{ state.errorMsg }}
-      </h3>
-      <button @click="resetCamera">reset</button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { DetectedBarcode } from "nuxt-qrcode"
-
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const qrcodeStreamRef = ref()
-const result = ref<string[]>()
-const state = reactive({
-  errorMsg: "",
-  error: false,
-  cameraOn: true,
-})
-
-// Reset camera state when component mounts
-onMounted(() => {
-  // Reset to default state on mount
-  state.cameraOn = true
-  state.error = false
-  state.errorMsg = ""
-  result.value = []
-
-  const handleVisibilityChange = () => {
-    if (document.hidden) {
-      state.cameraOn = false
-      stopAllMediaStreams()
-    }
-  }
-
-  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
-  })
-}
-
-function onError(err: Error) {
-  state.error = true
-  state.errorMsg = `[${err.name}]: ${err.message}`
-}
-
-function resetCamera() {
-  state.error = false
-  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()
-        })
-        videoElement.srcObject = null
-      }
-    } catch (error) {
-      console.warn("Error stopping camera stream:", error)
-    }
-  }
-
-  // Global cleanup: Find all video elements and stop their streams
-  try {
-    const allVideoElements = document.querySelectorAll("video")
-    allVideoElements.forEach((video) => {
-      if (video.srcObject) {
-        const stream = video.srcObject as MediaStream
-        const tracks = stream.getTracks()
-        tracks.forEach((track) => {
-          track.stop()
-        })
-        video.srcObject = null
-      }
-    })
-  } catch (error) {
-    console.warn("Error in global video cleanup:", error)
-  }
-}
-
-// Watch for camera state changes
-watch(
-  () => state.cameraOn,
-  (newValue) => {
-    if (!newValue) {
-      // Wait a tick for the component to unmount, then clean up
-      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()
-})
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-</script>
-
-<style lang="css">
-@layer components {
-.capture-qr-stream {
-  aspect-ratio: 1 / 1;
-}
-}
-</style>

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>