srcdev-nuxt-components 9.4.5 → 9.4.7

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

@@ -1,289 +0,0 @@
-<template>
-  <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>
-
-<script setup lang="ts">
-const props = defineProps({
-  animationRuntime: {
-    type: String,
-    default: "40s",
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-  marqueeData: {
-    type: Array as PropType<Array<{ id: number; content: string }>>,
-    default: () => [],
-  },
-  itemConfig: {
-    type: Object,
-    default: () => ({
-      width: "50px",
-      height: "50px",
-      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 width = computed(() => props.itemConfig.width);
-const gap = computed(() => props.itemConfig.gap || "16px");
-
-// 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;
-
-    // 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(() => {
-  displayComponent.value = true;
-  checkReducedMotion();
-
-  // Auto-pause if user prefers reduced motion
-  if (prefersReducedMotion.value) {
-    isPaused.value = true;
-  }
-});
-</script>
-
-<style lang="css">
-@layer components {
-.marquee-scroller {
-  width: 100%;
-  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 {
-    filter: grayscale(1);
-  }
-
-  /* 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;
-  }
-
-  /* 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: 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);
-    display: grid;
-    place-items: center;
-    aspect-ratio: 1 / 1;
-    transition: filter 0.5s;
-    flex-shrink: 0;
-
-    border: 1px solid light-dark(var(--slate-10), var(--slate-00));
-    border-radius: 4px;
-
-    &:hover {
-      filter: grayscale(0);
-    }
-  }
-}
-
-@keyframes marqueeMove {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .marquee-scroller {
-    .control-btn {
-      background: ButtonFace;
-      color: ButtonText;
-      border: 1px solid ButtonText;
-    }
-  }
-}
-
-/* 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

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="masonry-grid-wrapper"
-    :class="[elementClasses]"
-    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
-  >
-    <template v-for="item in gridData" :key="item.id">
-      <div class="masonry-grid-item">
-        <slot :name="item.id"></slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  itemMinWidth: {
-    type: Number,
-    default: 300,
-  },
-  gap: {
-    type: Number,
-    default: 1.2,
-  },
-  unit: {
-    type: String,
-    default: "rem",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridData = toRef(() => props.gridData);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-wrapper {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  columns: auto var(--_item-min-width);
-  column-gap: var(--_masonry-grid-gap);
-
-  .masonry-grid-item {
-    break-inside: avoid;
-    outline: 0.1rem solid var(--_border-color);
-    padding: 1.2rem;
-    margin-block-end: var(--_masonry-grid-gap);
-  }
-}
-}
-</style>

package/app/components/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="masonry-grid-ordered" :class="[elementClasses]">
-    <div class="masonry-grid-ordered-wrapper" ref="gridWrapper">
-      <div v-for="item in gridData" :key="item.id" class="masonry-grid-ordered-item" ref="gridItemsRefs">
-        <slot :name="item.id"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize, useResizeObserver } from "@vueuse/core"
-
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  minTileWidth: {
-    type: Number,
-    default: 312,
-  },
-  gap: {
-    type: Number,
-    default: 12,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  mobilePreferredColCount: {
-    type: Number,
-    default: 1,
-  },
-  fixedWidth: {
-    type: Boolean,
-    default: false,
-  },
-  justify: {
-    type: String as PropType<String>,
-    default: "left",
-    validator: (val: string) => ["left", "center", "right"].includes(val),
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-const gridData = toRef(() => props.gridData)
-
-const minTileWidth = toRef(() => props.minTileWidth)
-const gridWrapper = ref<null | HTMLDivElement>(null)
-const gridItemsRefs = ref<HTMLDivElement[]>([])
-const { width } = useElementSize(gridWrapper)
-const columnCount = computed(() => {
-  return Math.floor(width.value / minTileWidth.value)
-})
-
-const gapNum = toRef(props.gap)
-const gapStr = toRef(props.gap + "px")
-
-const fixedWidth = toRef(() => props.fixedWidth)
-const minTileWidthStr = toRef(props.minTileWidth + "px")
-const maxTileWidth = computed(() => {
-  return fixedWidth.value ? minTileWidth.value + "px" : "1fr"
-})
-
-const justify = computed(() => {
-  return fixedWidth.value ? props.justify : "stretch"
-})
-
-const updateGrid = () => {
-  if (gridWrapper.value !== null) {
-    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0
-    const itemWidth = fixedWidth.value
-      ? minTileWidth.value
-      : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value)
-
-    const colHeights = Array(columnCount.value).fill(0)
-
-    gridItemsRefs.value.forEach((item) => {
-      const minHeight = Math.min(...colHeights)
-      const minIndex = colHeights.indexOf(minHeight)
-
-      item?.style.setProperty("--_position", "absolute")
-      item?.style.setProperty("--_position-top", minHeight + "px")
-      item?.style.setProperty("--_position-left", minIndex * (100 / columnCount.value) + "%")
-      item?.style.setProperty("--_element-width", itemWidth + "px")
-
-      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value)
-    })
-
-    const maxHeight = Math.max(...colHeights)
-    gridWrapper.value?.style.setProperty("--_wrapper-height", maxHeight + "px")
-  }
-}
-
-useResizeObserver(gridWrapper, () => {
-  updateGrid()
-})
-
-watch(
-  () => fixedWidth.value,
-  () => {
-    updateGrid()
-  }
-)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style scoped lang="css">
-@layer components {
-.masonry-grid-ordered {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_transition-duration: 0.3s;
-
-  container-type: inline-size;
-  position: relative;
-
-  transition: max-width var(--_transition-duration) ease;
-
-  .masonry-grid-ordered-wrapper {
-    display: grid;
-    justify-self: v-bind(justify);
-    grid-gap: v-bind(gapStr);
-    grid-template-columns: repeat(1, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    position: relative;
-
-    height: var(--_wrapper-height);
-
-    @container (min-width: 768px) {
-      grid-template-columns: repeat(2, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-
-    @container (min-width: 1024px) {
-      grid-template-columns: repeat(3, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-    @container (min-width: 1280px) {
-      grid-template-columns: repeat(4, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-
-    .masonry-grid-ordered-item {
-      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease,
-        left var(--_transition-duration) ease;
-
-      position: var(--_position);
-      top: var(--_position-top);
-      left: var(--_position-left);
-      width: var(--_element-width);
-
-      outline: 0.1rem solid var(--_border-color);
-      padding: 1.2rem;
-      border-radius: 4px;
-    }
-  }
-}
-}
-</style>