srcdev-nuxt-components 6.1.2 → 6.1.4

package/app/components/carousel-basic/CarouselBasic.vue

@@ -1,11 +1,30 @@
 <template>
-  <section class="carousel-basic" :class="[elementClasses]" ref="carouselWrapperRef" role="region" aria-label="Image carousel">
+  <section
+    class="carousel-basic"
+    :class="[elementClasses]"
+    ref="carouselWrapperRef"
+    role="region"
+    aria-label="Image carousel"
+  >
     <!-- Screen reader announcement for current item -->
     <div aria-live="polite" aria-atomic="true" class="sr-only">Item {{ currentIndex + 1 }} of {{ itemCount }}</div>
 
     <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-      <div tabindex="0" class="item-container" :class="{ 'allow-overflow': allowCarouselOverflow }" ref="carouselContainerRef" role="group" aria-label="Carousel items">
-        <div v-for="(item, index) in carouselDataIds" :key="index" class="item" ref="carouselItems" :aria-current="currentIndex === index ? 'true' : 'false'">
+      <div
+        tabindex="0"
+        class="item-container"
+        :class="{ 'allow-overflow': allowCarouselOverflow }"
+        ref="carouselContainerRef"
+        role="group"
+        aria-label="Carousel items"
+      >
+        <div
+          v-for="(item, index) in carouselDataIds"
+          :key="index"
+          class="item"
+          ref="carouselItems"
+          :aria-current="currentIndex === index ? 'true' : 'false'"
+        >
           <slot :name="item"></slot>
         </div>
       </div>
@@ -24,7 +43,12 @@
         <div class="markers-container">
           <ul class="markers-list">
             <li v-for="index in itemCount" :key="index" class="markers-item">
-              <button @click.prevent="jumpToFrame(index - 1)" class="btn-marker" :class="[{ active: currentIndex === index - 1 }]" :aria-label="`Jump to item ${Math.floor(index + 1)}`"></button>
+              <button
+                @click.prevent="jumpToFrame(index - 1)"
+                class="btn-marker"
+                :class="[{ active: currentIndex === index - 1 }]"
+                :aria-label="`Jump to item ${Math.floor(index + 1)}`"
+              ></button>
             </li>
           </ul>
         </div>
@@ -42,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 
 const props = defineProps({
   carouselDataIds: {
@@ -65,108 +89,108 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const carouselWrapperRef = ref<HTMLDivElement | null>(null);
-const carouselContainerRef = ref<HTMLDivElement | null>(null);
-const carouselItemsRef = useTemplateRef<HTMLDivElement[]>('carouselItems');
-const controlsContainerRef = ref<HTMLDivElement | null>(null);
-const carouselInitComplete = ref(false);
+const carouselWrapperRef = ref<HTMLDivElement | null>(null)
+const carouselContainerRef = ref<HTMLDivElement | null>(null)
+const carouselItemsRef = useTemplateRef<HTMLDivElement[]>("carouselItems")
+const controlsContainerRef = ref<HTMLDivElement | null>(null)
+const carouselInitComplete = ref(false)
 
-const currentIndex = ref(0);
-const itemCount = ref(props.carouselDataIds.length);
-const offset = ref(0);
-const transitionSpeedStr = props.transitionSpeed + 'ms';
+const currentIndex = ref(0)
+const itemCount = ref(props.carouselDataIds.length)
+const offset = ref(0)
+const transitionSpeedStr = props.transitionSpeed + "ms"
 const itemTransform = computed(() => {
-  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`;
-});
+  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`
+})
 
-const itemWidth = ref('0px');
+const itemWidth = ref("0px")
 
 const actionPrevious = () => {
   if (props.returnToStart && currentIndex.value === 0) {
-    offset.value = -itemCount.value;
-    doAction();
+    offset.value = -itemCount.value
+    doAction()
   }
 
   if (offset.value >= 0) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value + 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value + 1)
+  doAction()
+}
 
 const actionNext = () => {
   if (props.returnToStart && offset.value <= -1 * (itemCount.value - 1)) {
-    offset.value = 0;
-    doAction();
-    return;
+    offset.value = 0
+    doAction()
+    return
   }
 
   if (offset.value <= -1 * (itemCount.value - 1)) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value - 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value - 1)
+  doAction()
+}
 
 const doAction = () => {
-  currentIndex.value = Math.abs(offset.value);
-};
+  currentIndex.value = Math.abs(offset.value)
+}
 
 const jumpToFrame = (index: number) => {
   if (index >= 0 && index < itemCount.value) {
-    offset.value = -index;
-    doAction();
+    offset.value = -index
+    doAction()
   }
-};
+}
 
 const initialSetup = () => {
   if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
-    itemWidth.value = carouselItemsRef.value[0].offsetWidth + 'px';
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth + "px"
   }
 
-  carouselInitComplete.value = true;
-};
+  carouselInitComplete.value = true
+}
 
 const { direction } = useSwipe(carouselContainerRef, {
   passive: false,
   onSwipeEnd() {
-    if (direction.value === 'left') {
-      actionNext();
-    } else if (direction.value === 'right') {
-      actionPrevious();
+    if (direction.value === "left") {
+      actionNext()
+    } else if (direction.value === "right") {
+      actionPrevious()
     }
   },
-});
+})
 
-useEventListener(carouselContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(carouselContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
-useEventListener(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(controlsContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
 useResizeObserver(carouselWrapperRef, async () => {
-  initialSetup();
-});
+  initialSetup()
+})
 
 onMounted(() => {
-  initialSetup();
-});
+  initialSetup()
+})
 </script>
 
 <style lang="css">
@@ -203,7 +227,7 @@ onMounted(() => {
       position: relative;
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         height: 2px;
         background-color: #fff;

package/app/components/display-details/DisplayDetailsCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <details @click.prevent="handleClick()" :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
+  <details :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
     <summary class="display-details-summary" :id="triggerId" :aria-controls="contentId" ref="summaryRef">
       <span class="label">
         <slot name="summary"></slot>
@@ -9,175 +9,13 @@
       </slot>
     </summary>
     <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
-      <slot name="content"></slot>
+      <div class="inner">
+        <slot name="details-content"></slot>
+      </div>
     </div>
   </details>
 </template>
 
-<script lang="ts">
-// Create a global store to track open details elements by name
-const openDetailsByName = reactive(new Map<string, HTMLDetailsElement>());
-
-export const useDetailsTransition = (
-  detailsRef: Ref<HTMLDetailsElement | null>,
-  summaryRef: Ref<HTMLElement | null>,
-  contentRef: Ref<HTMLDivElement | null>,
-  name: string,
-  animationDuration: number
-) => {
-  // State
-  const animation = ref<Animation | null>(null);
-  const isClosing = ref(false);
-  const isExpanding = ref(false);
-
-  // Check if refs are available
-  if (!detailsRef.value || !summaryRef.value || !contentRef.value) {
-    console.warn('Details, summary, or content ref is null');
-    return {
-      clickAction: () => console.warn('Component not fully initialized'),
-    };
-  }
-
-  const closeOtherDetailsWithSameName = () => {
-    const currentDetails = detailsRef.value;
-    if (!currentDetails || !name) return;
-
-    // Get the currently open details with the same name
-    const openDetails = openDetailsByName.get(name);
-
-    // If there's an open details with the same name and it's not the current one, close it
-    if (openDetails && openDetails !== currentDetails && openDetails.open) {
-      // Simulate a click on the other details to close it with animation
-      const otherSummary = openDetails.querySelector('summary');
-      if (otherSummary) {
-        otherSummary.click();
-      } else {
-        // Fallback: close directly without animation
-        openDetails.open = false;
-      }
-    }
-
-    // Update the map with the current details if it's open
-    if (currentDetails.open) {
-      openDetailsByName.set(name, currentDetails);
-    } else {
-      // If it's closed and was the one in the map, remove it
-      if (openDetailsByName.get(name) === currentDetails) {
-        openDetailsByName.delete(name);
-      }
-    }
-  };
-
-  const clickAction = () => {
-    const details = detailsRef.value;
-    const summary = summaryRef.value;
-    const content = contentRef.value;
-
-    if (!details || !summary || !content) return;
-
-    // Add overflow hidden to avoid content jumping
-    details.style.overflow = 'hidden';
-
-    if (isClosing.value || !details.open) {
-      // Close other details with the same name first
-      closeOtherDetailsWithSameName();
-
-      // Open the details
-      details.open = true;
-      isExpanding.value = true;
-      isClosing.value = false;
-
-      // Get the height of the content
-      const detailsHeight = details.offsetHeight;
-      const contentHeight = content.offsetHeight;
-      const summaryHeight = summary.offsetHeight;
-
-      const startHeight = `${detailsHeight - contentHeight}px`;
-      const endHeight = `${summaryHeight + contentHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'linear',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isExpanding.value = false;
-        animation.value = null;
-
-        // Register this as the open details for this name
-        openDetailsByName.set(name, details);
-      };
-
-      animation.value.oncancel = () => {
-        isExpanding.value = false;
-      };
-    } else if (isExpanding.value || details.open) {
-      // Close the details
-      isClosing.value = true;
-      isExpanding.value = false;
-
-      // Get the height of the content
-      const startHeight = `${details.offsetHeight}px`;
-      const endHeight = `${details.offsetHeight - content.offsetHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'linear',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.open = false;
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isClosing.value = false;
-        animation.value = null;
-
-        // Remove this from the open details map if it's there
-        if (openDetailsByName.get(name) === details) {
-          openDetailsByName.delete(name);
-        }
-      };
-
-      animation.value.oncancel = () => {
-        isClosing.value = false;
-      };
-    }
-  };
-
-  return {
-    clickAction,
-    isClosing,
-    isExpanding,
-  };
-};
-</script>
-
 <script setup lang="ts">
 const props = defineProps({
   name: {
@@ -188,58 +26,31 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  animationDuration: {
-    type: Number,
-    default: 400,
-  },
   iconSize: {
     type: String,
-    default: 'small',
+    default: "small",
     validator(value: string) {
-      return ['small', 'medium', 'large'].includes(value);
+      return ["small", "medium", "large"].includes(value)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
-
-const triggerId = computed(() => `${props.id}-trigger`);
-const contentId = computed(() => `${props.id}-content`);
+})
 
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const triggerId = computed(() => `${props.id}-trigger`)
+const contentId = computed(() => `${props.id}-content`)
 
-updateElementClasses([props.iconSize]);
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
+  props.styleClassPassthrough
+)
 
-const detailsRef = ref<HTMLDetailsElement | null>(null);
-const summaryRef = ref<HTMLElement | null>(null);
-const contentRef = ref<HTMLDivElement | null>(null);
+updateElementClasses([props.iconSize])
 
-// Initialize with dummy function that will be replaced when refs are available
-let clickAction = () => console.warn('Component not fully initialized');
-
-// Handle click with the current clickAction function
-const handleClick = () => {
-  clickAction();
-};
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-
-onMounted(() => {
-  // Initialize the composable once the component is mounted and refs are available
-  if (detailsRef.value && contentRef.value && summaryRef.value) {
-    const details = useDetailsTransition(detailsRef, summaryRef, contentRef, props.name, props.animationDuration);
-    clickAction = details.clickAction; // Assign the real click handler
-  } else {
-    console.error('Refs not available after mounting');
-  }
-});
+const detailsRef = useTemplateRef<HTMLDetailsElement>("detailsRef")
+const summaryRef = useTemplateRef<HTMLElement | null>("summaryRef")
+const contentRef = useTemplateRef<HTMLDivElement | null>("contentRef")
 </script>
 
 <style lang="css">
@@ -255,6 +66,10 @@ onMounted(() => {
         transform: scaleY(-1);
       }
     }
+    .display-details-content {
+      grid-template-rows: 1fr;
+      overflow: hidden;
+    }
   }
 
   .display-details-summary {
@@ -282,7 +97,6 @@ onMounted(() => {
       display: block;
 
       transform: scaleY(1);
-      transition: transform 200ms;
 
       font-size: 1.2rem;
       &.medium {
@@ -295,7 +109,12 @@ onMounted(() => {
   }
 
   .display-details-content {
-    /* Use an inner element for styling */
+    display: grid;
+    grid-template-rows: 0;
+
+    .inner {
+      overflow: hidden;
+    }
   }
 }
 </style>

package/app/components/expanding-panel/ExpandingPanel.vue

@@ -57,17 +57,17 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       align-items: center;
       justify-content: space-between;
       flex-direction: row;
-      gap: 0;
+      gap: 1rem;
       list-style: none;
 
-      padding-inline: 0.5rem;
+      padding-block: 0.5rem;
 
       &::-webkit-details-marker,
       &::marker {
         display: none;
       }
 
-      overflow: clip;
+      overflow: hidden;
 
       .label-wrapper {
       }
@@ -77,8 +77,6 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
         justify-content: space-between;
 
         aspect-ratio: 1;
-        outline: 1px solid var(--gray-3);
-        padding: 1rem;
         overflow: hidden;
 
         .icon {
@@ -101,7 +99,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       + .expanding-panel-content {
         grid-template-rows: 1fr;
         .inner {
-          /* transform: scaleY(1); */
+          transition: all v-bind(animationDurationStr) ease-in-out;
         }
       }
     }
@@ -114,10 +112,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     .inner {
       overflow: hidden;
-      padding: 0.5rem;
-
-      /* transform: scaleY(0); */
-      /* transition: transform v-bind(animationDurationStr) ease-in-out; */
+      margin-top: 0;
     }
   }
 }

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

@@ -0,0 +1,122 @@
+<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>
+</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",
+      quantity: 30,
+    }),
+    required: true,
+  },
+})
+
+const displayComponent = ref(false)
+
+const height = computed(() => props.itemConfig.height)
+const quantity = computed(() => props.itemConfig.quantity)
+const width = computed(() => props.itemConfig.width)
+
+const animationRuntimeNumber = computed(() => {
+  const [seconds] = props.animationRuntime.split("s")
+  return parseFloat(seconds ?? "0")
+})
+
+const animationDelay = computed(() => {
+  return Math.floor(animationRuntimeNumber.value * 1.25) + "s"
+})
+
+onMounted(() => {
+  console.log(`Mounted: quantity(${quantity.value}) | animationDelay(${animationDelay.value})`)
+  displayComponent.value = true
+})
+</script>
+
+<style lang="css">
+.marquee-scroller {
+  width: 100%;
+  height: v-bind(height);
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
+
+  &:hover .item {
+    animation-play-state: paused !important;
+    filter: grayscale(1);
+  }
+
+  &[reverse="true"] .item {
+    animation: reversePlay v-bind(animationRuntime) linear infinite;
+  }
+
+  .list {
+    display: flex;
+    width: 100%;
+    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);
+      }
+    }
+  }
+}
+
+@keyframes autoRun {
+  from {
+    left: 100%;
+  }
+  to {
+    left: calc(v-bind(width) * -1);
+  }
+}
+
+@keyframes reversePlay {
+  from {
+    left: calc(v-bind(width) * -1);
+  }
+  to {
+    left: 100%;
+  }
+}
+</style>