srcdev-nuxt-components 6.2.13 → 6.3.0

package/app/components/marquee-scroller/MarqueeScroller.vue

@@ -1,10 +1,44 @@
 <template>
-  <div v-if="displayComponent" class="marquee-scroller" :reverse>
-    <ul class="list">
-      <li v-for="item in marqueeData" :key="item.id" class="item" :style="{ '--position': item.id }">
-        <slot :name="item.id"></slot>
-      </li>
-    </ul>
+  <div
+    v-if="displayComponent"
+    class="marquee-scroller"
+    :class="{ reverse: reverse, paused: isPaused, 'reduced-motion': prefersReducedMotion }"
+    role="region"
+    :aria-label="ariaLabel || 'Scrolling content'"
+    :aria-live="isPaused ? 'polite' : 'off'"
+    tabindex="0"
+    @keydown="handleKeydown"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  >
+    <!-- Screen reader instructions -->
+    <div class="sr-only">
+      {{ ariaDescription || "Use spacebar to pause/play animation, arrow keys when focused for manual control" }}
+    </div>
+
+    <!-- Pause/Play button -->
+    <button
+      v-if="showControls"
+      class="control-btn"
+      @click="togglePause"
+      :aria-label="isPaused ? 'Play animation' : 'Pause animation'"
+      type="button"
+    >
+      <span aria-hidden="true">{{ isPaused ? "▶" : "⏸" }}</span>
+    </button>
+
+    <div class="marquee-track" :aria-hidden="!isPaused">
+      <div class="marquee-group">
+        <div v-for="item in marqueeData" :key="item.id" class="item">
+          <slot :name="item.id"></slot>
+        </div>
+      </div>
+      <div class="marquee-group" aria-hidden="true">
+        <div v-for="item in marqueeData" :key="`duplicate-${item.id}`" class="item">
+          <slot :name="item.id"></slot>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -27,30 +61,95 @@ const props = defineProps({
     default: () => ({
       width: "50px",
       height: "50px",
-      quantity: 30,
+      gap: "16px",
     }),
     required: true,
   },
+  // Accessibility props
+  ariaLabel: {
+    type: String,
+    default: null,
+  },
+  ariaDescription: {
+    type: String,
+    default: null,
+  },
+  showControls: {
+    type: Boolean,
+    default: false,
+  },
+  respectReducedMotion: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const displayComponent = ref(false)
+const isPaused = ref(false)
+const isFocused = ref(false)
+const prefersReducedMotion = ref(false)
 
 const height = computed(() => props.itemConfig.height)
-const quantity = computed(() => props.itemConfig.quantity)
 const width = computed(() => props.itemConfig.width)
+const gap = computed(() => props.itemConfig.gap || "16px")
 
-const animationRuntimeNumber = computed(() => {
-  const [seconds] = props.animationRuntime.split("s")
-  return parseFloat(seconds ?? "0")
-})
+// Check for reduced motion preference
+const checkReducedMotion = () => {
+  if (typeof window !== "undefined" && props.respectReducedMotion) {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    prefersReducedMotion.value = mediaQuery.matches
 
-const animationDelay = computed(() => {
-  return Math.floor(animationRuntimeNumber.value * 1.25) + "s"
-})
+    // Listen for changes
+    mediaQuery.addEventListener("change", (e) => {
+      prefersReducedMotion.value = e.matches
+      if (e.matches) {
+        isPaused.value = true
+      }
+    })
+  }
+}
+
+const togglePause = () => {
+  isPaused.value = !isPaused.value
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case " ":
+    case "Spacebar":
+      event.preventDefault()
+      togglePause()
+      break
+    case "ArrowLeft":
+    case "ArrowRight":
+      // Could add manual stepping functionality here
+      event.preventDefault()
+      break
+  }
+}
+
+const handleFocus = () => {
+  isFocused.value = true
+  if (props.respectReducedMotion) {
+    isPaused.value = true
+  }
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+  if (!prefersReducedMotion.value) {
+    isPaused.value = false
+  }
+}
 
 onMounted(() => {
-  console.log(`Mounted: quantity(${quantity.value}) | animationDelay(${animationDelay.value})`)
   displayComponent.value = true
+  checkReducedMotion()
+
+  // Auto-pause if user prefers reduced motion
+  if (prefersReducedMotion.value) {
+    isPaused.value = true
+  }
 })
 </script>
 
@@ -60,63 +159,129 @@ onMounted(() => {
   height: v-bind(height);
   overflow: hidden;
   mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
+  position: relative;
+
+  /* Focus styles */
+  &:focus {
+    outline: 2px solid var(--color-focus, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Paused state */
+  &.paused .marquee-track {
+    animation-play-state: paused;
+  }
+
+  /* Reduced motion - disable animation completely */
+  &.reduced-motion .marquee-track {
+    animation: none !important;
+  }
+
+  &:hover .marquee-track {
+    animation-play-state: paused;
+  }
 
   &:hover .item {
-    animation-play-state: paused !important;
     filter: grayscale(1);
   }
 
-  &[reverse="true"] .item {
-    animation: reversePlay v-bind(animationRuntime) linear infinite;
+  /* Screen reader only text */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 
-  .list {
+  /* Control button */
+  .control-btn {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-focus, #0066cc);
+      outline-offset: 2px;
+    }
+  }
+
+  .marquee-track {
     display: flex;
-    width: 100%;
+    width: fit-content;
+    gap: v-bind(gap);
+    animation: marqueeMove v-bind(animationRuntime) linear infinite;
+  }
+
+  &.reverse .marquee-track {
+    animation-direction: reverse;
+  }
+
+  .marquee-group {
+    display: flex;
+    gap: v-bind(gap);
+    flex-shrink: 0;
+  }
+
+  .item {
+    width: v-bind(width);
     height: v-bind(height);
-    min-width: calc(v-bind(width) * v-bind(quantity));
-    position: relative;
-
-    .item {
-      width: v-bind(width);
-      height: v-bind(height);
-      display: grid;
-      place-items: center;
-      position: absolute;
-      aspect-ratio: 1 / 1;
-      left: 100%;
-      animation: autoRun v-bind(animationRuntime) linear infinite;
-      transition: filter 0.5s;
-      /* animation-delay: calc((50s / v-bind(quantity)) * (var(--position) - 1) - 50s) !important; */
-      animation-delay: calc(
-        (v-bind(animationDelay) / v-bind(quantity)) * (var(--position) - 1) - v-bind(animationDelay)
-      ) !important;
-
-      border: 1px solid light-dark(var(--gray-12), var(--gray-0));
-      border-radius: 4px;
-
-      &:hover {
-        filter: grayscale(0);
-      }
+    display: grid;
+    place-items: center;
+    aspect-ratio: 1 / 1;
+    transition: filter 0.5s;
+    flex-shrink: 0;
+
+    border: 1px solid light-dark(var(--gray-12), var(--gray-0));
+    border-radius: 4px;
+
+    &:hover {
+      filter: grayscale(0);
     }
   }
 }
 
-@keyframes autoRun {
+@keyframes marqueeMove {
   from {
-    left: 100%;
+    transform: translateX(0);
   }
   to {
-    left: calc(v-bind(width) * -1);
+    transform: translateX(-50%);
   }
 }
 
-@keyframes reversePlay {
-  from {
-    left: calc(v-bind(width) * -1);
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .marquee-scroller {
+    .control-btn {
+      background: ButtonFace;
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
   }
-  to {
-    left: 100%;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .marquee-scroller .marquee-track {
+    animation: none !important;
   }
 }
 </style>

package/app/components/masonry-grid/MasonryGrid.vue

@@ -53,8 +53,8 @@ watch(
   --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
   --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
 
-  columns: var(--_item-min-width);
-  gap: 12px;
+  columns: auto var(--_item-min-width);
+  column-gap: var(--_masonry-grid-gap);
 
   .masonry-grid-item {
     break-inside: avoid;

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

@@ -0,0 +1,181 @@
+<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">
+.capture-qr-stream {
+  aspect-ratio: 1 / 1;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<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">
+        <li v-for="(r, i) in result" :key="i">
+          <span class="text-wrap wrap-anywhere">
+            {{ r }}
+          </span>
+        </li>
+      </ul>
+    </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 result = ref<string[]>()
+const isDropping = ref(false)
+
+function onDropping(dropping: boolean) {
+  isDropping.value = dropping
+}
+
+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
+  })
+}
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+</script>
+
+<style lang="css">
+.decode-qr-code {
+  aspect-ratio: 1 / 1;
+
+  .qr-code-capture {
+  }
+
+  .qr-code-dropzone {
+    min-height: 3rem;
+    border-radius: 0.5rem;
+    border: 2px dashed gray;
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<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/qr-code" // Adjust the import path as needed
+
+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">
+.display-qr-code {
+  aspect-ratio: 1 / 1;
+  width: v-bind(size);
+}
+</style>