srcdev-nuxt-components 6.2.0 → 6.2.2

package/app/components/alert-mask/AlertMaskCore.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="alert-mask-core" :class="[elementClasses]">
+    <svg class="alert-mask-decorator" :style="{ '--alertHeight': svgHeight + 'px' }" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="borderMask" maskUnits="userSpaceOnUse">
+          <path :d="outerPath" fill="white" />
+          <path :d="innerPath" fill="black" />
+        </mask>
+      </defs>
+
+      <path :d="outerPath" :fill="cfg.color" mask="url(#borderMask)" vector-effect="non-scaling-stroke" />
+      <path :d="innerPath" fill="rgba(0,0,0,0.5)" />
+    </svg>
+
+    <div
+      class="alert-mask-content"
+      :style="{
+        '--insetInlineStart': (props.config?.borderLeft ?? 0) + 'px',
+        '--insetInlineEnd': (props.config?.borderRight ?? 0) + 'px',
+        '--insetBlockStart': (props.config?.borderTop ?? 0) + 'px',
+        '--insetBlockEnd': (props.config?.borderBottom ?? 0) + 'px',
+      }"
+    >
+      <div class="alert-mask-content-slot" ref="alertContentRef">
+        <slot name="default"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export interface BorderConfig {
+  color?: string
+  radiusLeft?: number
+  radiusRight?: number
+  borderLeft?: number
+  borderTop?: number
+  borderRight?: number
+  borderBottom?: number
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  config: Object as PropType<BorderConfig>,
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
+})
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef")
+const svgWidth = ref(0)
+const svgHeight = ref(0)
+
+// Update dimensions based on content
+onMounted(() => {
+  const updateDimensions = () => {
+    const contentEl = alertContentRef.value
+    if (!contentEl) return
+
+    const rect = contentEl.getBoundingClientRect()
+    const { borderLeft, borderTop, borderRight, borderBottom } = cfg.value
+
+    // Calculate total dimensions including borders
+    svgWidth.value = rect.width + borderLeft + borderRight
+    svgHeight.value = rect.height + borderTop + borderBottom
+  }
+
+  // Initial measurement
+  nextTick(updateDimensions)
+
+  // Observe content changes
+  const contentEl = alertContentRef.value
+  if (contentEl) {
+    const resizeObserver = new ResizeObserver(updateDimensions)
+    resizeObserver.observe(contentEl)
+  }
+})
+
+const cfg = computed(() => ({
+  color: props.config?.color ?? "var(--orange-8)",
+  radiusLeft: props.config?.radiusLeft ?? 12,
+  radiusRight: props.config?.radiusRight ?? 12,
+  borderLeft: props.config?.borderLeft ?? 8,
+  borderTop: props.config?.borderTop ?? 8,
+  borderRight: props.config?.borderRight ?? 8,
+  borderBottom: props.config?.borderBottom ?? 8,
+}))
+
+// Outer border path (fixed radii)
+const outerPath = computed(() => {
+  const width = svgWidth.value
+  const height = svgHeight.value
+  const { radiusLeft, radiusRight } = cfg.value
+
+  if (!width || !height) return ""
+
+  return `
+    M ${radiusLeft} 0
+    L ${width - radiusRight} 0
+    Q ${width} 0 ${width} ${radiusRight}
+    L ${width} ${height - radiusRight}
+    Q ${width} ${height} ${width - radiusRight} ${height}
+    L ${radiusLeft} ${height}
+    Q 0 ${height} 0 ${height - radiusLeft}
+    L 0 ${radiusLeft}
+    Q 0 0 ${radiusLeft} 0 Z
+  `
+})
+
+// Inner cutout (based on fixed pixel border thickness)
+const innerPath = computed(() => {
+  const width = svgWidth.value
+  const height = svgHeight.value
+  const { radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom: borderBottom } = cfg.value
+
+  if (!width || !height) return ""
+
+  return `
+    M ${radiusLeft + borderLeft} ${borderTop}
+    L ${width - radiusRight - borderRight} ${borderTop}
+    Q ${width - borderRight} ${borderTop} ${width - borderRight} ${radiusRight + borderTop}
+    L ${width - borderRight} ${height - radiusRight - borderBottom}
+    Q ${width - borderRight} ${height - borderBottom} ${width - radiusRight - borderRight} ${height - borderBottom}
+    L ${radiusLeft + borderLeft} ${height - borderBottom}
+    Q ${borderLeft} ${height - borderBottom} ${borderLeft} ${height - radiusLeft - borderBottom}
+    L ${borderLeft} ${radiusLeft + borderTop}
+    Q ${borderLeft} ${borderTop} ${radiusLeft + borderLeft} ${borderTop} Z
+  `
+})
+</script>
+
+<style lang="css">
+.alert-mask-core {
+  display: grid;
+  grid-template-areas: "mask";
+
+  .alert-mask-decorator {
+    grid-area: mask;
+    width: 100%;
+    height: var(--alertHeight);
+  }
+
+  .alert-mask-content {
+    grid-area: mask;
+    margin-block: var(--insetBlockStart) var(--insetBlockEnd);
+    margin-inline: var(--insetInlineStart) var(--insetInlineEnd);
+  }
+}
+</style>

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

@@ -41,7 +41,7 @@
               <button
                 @click.prevent="jumpToFrame(index - 1)"
                 class="btn-marker"
-                :class="[{ active: currentActiveIndex === getOffsetIndex(index - 1, circularOffsetBase, itemCount) }]"
+                :class="[{ active: displayActiveIndex === index - 1 }]"
                 :aria-label="`Jump to item ${Math.floor(index + 1)}`"
               ></button>
             </li>
@@ -82,7 +82,11 @@ const props = defineProps({
   },
   useFlipAnimation: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  useSpringEffect: {
+    type: Boolean,
+    default: false,
   },
 })
 
@@ -98,13 +102,6 @@ const userHasInteracted = ref(false)
 const initialItemOffset = computed(() => {
   return props.useFlipAnimation ? 1 : 2
 })
-const circularOffsetBase = computed(() => {
-  return props.useFlipAnimation ? 1 : Math.floor(2 * initialItemOffset.value)
-})
-
-function getOffsetIndex(index: number, offset: number, itemCount: number): number {
-  return (index + offset) % itemCount
-}
 
 const currentIndex = ref(0)
 const itemCount = ref(props.carouselDataIds.length)
@@ -112,25 +109,32 @@ const transitionSpeedStr = props.transitionSpeed + "ms"
 
 const itemWidth = ref(0)
 const itemWidthOffsetStr = computed(() => {
-  if (props.allowCarouselOverflow) {
-    if (props.useFlipAnimation) {
-      return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))` // Good
-    } else {
-      return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))` // Good
-    }
+  // if (props.allowCarouselOverflow) {
+  if (props.useFlipAnimation) {
+    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))` // Good
   } else {
-    if (props.useFlipAnimation) {
-      return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))` // Goof
-    } else {
-      return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))` // Good
-    }
+    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))` // Good
   }
+  // } else {
+  //   if (props.useFlipAnimation) {
+  //     return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))` // Goof
+  //   } else {
+  //     return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))` // Good
+  //   }
+  // }
 })
 const currentActiveIndex = ref(0)
 
+// Computed property to get the display index (what the user sees as active)
+const displayActiveIndex = computed(() => {
+  return currentActiveIndex.value
+})
+
 const updateItemOrder = (index: number, order: number, zIndex: number = 2) => {
   if (carouselItemsRef?.value && carouselItemsRef.value[index]) {
-    carouselItemsRef.value[index].style.order = order.toString()
+    if (order !== -1) {
+      carouselItemsRef.value[index].style.order = order.toString()
+    }
     carouselItemsRef.value[index].style.zIndex = zIndex.toString()
   }
 }
@@ -144,8 +148,17 @@ function analyzeOffsets(offsets: number[]) {
 
   const sorted = [...counts.entries()].sort((a, b) => b[1] - a[1])
 
-  const majorityValue = sorted[0][0]
-  const minorityValue = sorted[sorted.length - 1][0]
+  // Handle empty sorted array
+  if (sorted.length === 0) {
+    return {
+      majorityValue: 0,
+      minorityValue: 0,
+      minorityIndex: -1,
+    }
+  }
+
+  const majorityValue = sorted[0]![0]
+  const minorityValue = sorted[sorted.length - 1]![0]
   const minorityIndex = offsets.findIndex((val) => val === minorityValue)
 
   return {
@@ -161,32 +174,58 @@ const reorderItems = (direction: "next" | "previous" | "jump" = "jump", skipAnim
   // Capture positions before reordering (only if we're going to animate)
   const beforeRects = skipAnimation ? [] : carouselItemsRef.value.map((item) => item.getBoundingClientRect())
 
-  // Apply new order and z-index based on direction
+  // Store current order positions before reordering
+  const currentOrderMap = new Map<number, number>()
+  if (!skipAnimation) {
+    carouselItemsRef.value.forEach((item, index) => {
+      const currentOrder = parseInt(item.style.order || "1")
+      currentOrderMap.set(index, currentOrder)
+    })
+  }
+
+  // Apply new order and calculate z-index based on order transition
   let order = 1
 
-  // For items from currentActiveIndex to end
-  for (let i = currentActiveIndex.value; i < itemCount.value; i++) {
-    let zIndex = 2 // default normal z-index
-
-    if (i === currentActiveIndex.value) {
-      // The item becoming visible
-      if (direction === "previous") {
-        // When going previous, the item moving to first position should go behind
-        zIndex = 1
-      } else {
-        // Normal case - visible item gets highest z-index
-        zIndex = 3
-      }
-    }
+  // Helper function to determine if an item should go behind during transition
+  const shouldGoBehind = (currentOrder: number, newOrder: number) => {
+    // Normal case: moving to higher order (left to right)
+    if (currentOrder < newOrder) return true
 
-    updateItemOrder(i, order++, zIndex)
+    // Wrap case: moving from end to beginning (high order to low order with big gap)
+    // This happens when an item at the end wraps to the beginning
+    const orderDifference = Math.abs(currentOrder - newOrder)
+    const isWrapping = orderDifference > itemCount.value / 2
+    if (isWrapping && currentOrder > newOrder) return true
+
+    return false
   }
 
-  // For items from 0 to currentActiveIndex
-  for (let i = 0; i < currentActiveIndex.value; i++) {
-    // Items that wrap around get lower z-index to slide behind
-    const zIndex = 1
-    updateItemOrder(i, order++, zIndex)
+  // First, place the previous item (for visual continuity)
+  const prevIndex = currentActiveIndex.value === 0 ? itemCount.value - 1 : currentActiveIndex.value - 1
+  const prevCurrentOrder = currentOrderMap.get(prevIndex) || 1
+  const prevNewOrder = order++
+  const prevZIndex = shouldGoBehind(prevCurrentOrder, prevNewOrder) ? 1 : 2
+  updateItemOrder(prevIndex, prevNewOrder, prevZIndex)
+
+  // Then place the current active item
+  const currentOrder = currentOrderMap.get(currentActiveIndex.value) || 1
+  const newCurrentOrder = order++
+  const currentZIndex = shouldGoBehind(currentOrder, newCurrentOrder) ? 1 : 2
+  updateItemOrder(currentActiveIndex.value, newCurrentOrder, currentZIndex)
+
+  // Then place all remaining items in sequence
+  let nextIndex = currentActiveIndex.value + 1
+  while (nextIndex !== prevIndex) {
+    if (nextIndex >= itemCount.value) {
+      nextIndex = 0 // Wrap around
+    }
+    if (nextIndex === prevIndex) break // Don't place the previous item again
+
+    const itemCurrentOrder = currentOrderMap.get(nextIndex) || 1
+    const itemNewOrder = order++
+    const itemZIndex = shouldGoBehind(itemCurrentOrder, itemNewOrder) ? 1 : 2
+    updateItemOrder(nextIndex, itemNewOrder, itemZIndex)
+    nextIndex++
   }
 
   // Skip animation if requested (for initial setup)
@@ -201,15 +240,20 @@ const reorderItems = (direction: "next" | "previous" | "jump" = "jump", skipAnim
     // Calculate offset values
     const offsetValues = beforeRects.map((beforeRect, index) => {
       const afterRect = afterRects[index]
-      return beforeRect.left - afterRect.left
+      return beforeRect.left - (afterRect?.left ?? beforeRect.left)
     })
 
     const leftValues = analyzeOffsets(offsetValues)
 
     carouselItemsRef.value!.forEach((item, index) => {
-      const deltaX = beforeRects[index].left - afterRects[index].left
+      const beforeRect = beforeRects[index]
+      const afterRect = afterRects[index]
+      const deltaX = (beforeRect?.left ?? 0) - (afterRect?.left ?? 0)
+      const timingFunction = props.useSpringEffect ? "var(--spring-easing)" : "ease"
 
       if (deltaX !== 0) {
+        // Optimize for upcoming transform animation
+        item.style.willChange = "transform"
         item.style.transition = "none"
         item.style.transform = `translateX(${deltaX}px)`
 
@@ -220,18 +264,18 @@ const reorderItems = (direction: "next" | "previous" | "jump" = "jump", skipAnim
           if (shouldTransition) {
             if (props.allowCarouselOverflow) {
               if (props.useFlipAnimation) {
-                transitionProperties = `transform ${transitionSpeedStr} ease`
+                transitionProperties = `transform ${transitionSpeedStr} ${timingFunction}`
               } else {
                 if (leftValues.minorityIndex !== index) {
-                  transitionProperties = `transform ${transitionSpeedStr} ease`
+                  transitionProperties = `transform ${transitionSpeedStr} ${timingFunction}`
                 }
               }
             } else {
               if (props.useFlipAnimation) {
-                transitionProperties = `transform ${transitionSpeedStr} ease`
+                transitionProperties = `transform ${transitionSpeedStr} ${timingFunction}`
               } else {
                 if (leftValues.minorityIndex !== index) {
-                  transitionProperties = `transform ${transitionSpeedStr} ease`
+                  transitionProperties = `transform ${transitionSpeedStr} ${timingFunction}`
                 }
               }
             }
@@ -240,12 +284,10 @@ const reorderItems = (direction: "next" | "previous" | "jump" = "jump", skipAnim
           item.style.transition = transitionProperties
           item.style.transform = "translateX(0)"
 
-          // After animation completes, normalize z-index values
+          // After animation completes, clean up will-change (keep z-index as set)
           const handleTransitionEnd = (event: TransitionEvent) => {
             if (event.propertyName === "transform") {
-              // Set final z-index: current item gets highest, others get normal
-              const isCurrentlyVisible = index === currentActiveIndex.value
-              item.style.zIndex = isCurrentlyVisible ? "3" : "2"
+              item.style.willChange = "auto"
               item.removeEventListener("transitionend", handleTransitionEnd)
             }
           }
@@ -253,9 +295,8 @@ const reorderItems = (direction: "next" | "previous" | "jump" = "jump", skipAnim
           if (shouldTransition) {
             item.addEventListener("transitionend", handleTransitionEnd)
           } else {
-            // If no transition, immediately normalize z-index
-            const isCurrentlyVisible = index === currentActiveIndex.value
-            item.style.zIndex = isCurrentlyVisible ? "3" : "2"
+            // If no transition, just clean up will-change (keep z-index as set)
+            item.style.willChange = "auto"
           }
         })
       }
@@ -300,20 +341,18 @@ const jumpToFrame = (index: number) => {
       userHasInteracted.value = true
     }
 
-    currentActiveIndex.value = getOffsetIndex(index, circularOffsetBase.value, itemCount.value)
+    currentActiveIndex.value = index
 
-    // currentActiveIndex.value = index;
     reorderItems("jump")
     currentIndex.value = currentActiveIndex.value
   }
 }
 
 const checkAndMoveLastItem = () => {
-  if (props.allowCarouselOverflow || !props.useFlipAnimation) {
-    currentActiveIndex.value = itemCount.value - initialItemOffset.value
-    reorderItems("jump", true) // Skip animation during initial setup
-    currentIndex.value = currentActiveIndex.value
-  }
+  // We need to reorder items for the initial layout regardless of the settings
+  // Keep currentActiveIndex at 0 (first item) but reorder visually
+  reorderItems("jump", true) // Skip animation during initial setup
+  currentIndex.value = currentActiveIndex.value
 }
 
 const initialSetup = () => {
@@ -331,6 +370,13 @@ const initialSetup = () => {
 
   carouselInitComplete.value = true
   checkAndMoveLastItem()
+
+  // Add mounted class to trigger opacity transition after setup is complete
+  nextTick(() => {
+    if (carouselWrapperRef.value) {
+      carouselWrapperRef.value.classList.add("mounted")
+    }
+  })
 }
 
 const { direction } = useSwipe(carouselContainerRef, {
@@ -376,6 +422,11 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
+  opacity: 0;
+
+  &.mounted {
+    opacity: 1;
+  }
 
   .sr-only {
     position: absolute;
@@ -394,6 +445,7 @@ onMounted(() => {
     gap: var(--_carousel-item-track-gap);
     overflow-x: hidden;
     position: relative;
+    isolation: isolate;
 
     max-inline-size: var(--_carousel-display-max-width);
     margin-inline: auto;

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

@@ -2,7 +2,7 @@
   <div class="expanding-panel" :class="[elementClasses]">
     <details class="expanding-panel-details" :name :open>
       <summary
-        @click.prevent="handleToggle"
+        @click.prevent.stop="handleToggle"
         @keydown.enter.prevent="handleToggle"
         @keydown.space.prevent="handleToggle"
         class="expanding-panel-summary"
@@ -56,7 +56,7 @@ const props = defineProps({
   },
 })
 
-const name = computed(() => props.name || useId())
+const name = shallowRef(props.name || useId())
 const isPanelOpen = defineModel({ default: false }) as Ref<boolean>
 const animationDurationStr = computed(() => `${props.animationDuration}ms`)
 const open = computed(() => {
@@ -76,6 +76,9 @@ const handleToggle = (event: Event) => {
 <style lang="css">
 .expanding-panel {
   .expanding-panel-details {
+    &:hover {
+      cursor: pointer;
+    }
     .expanding-panel-summary {
       display: flex;
       align-items: center;
@@ -109,6 +112,7 @@ const handleToggle = (event: Event) => {
           transform: scaleY(1);
           transition: transform v-bind(animationDurationStr) ease-in-out;
           font-size: 1.2rem;
+          will-change: transform;
         }
       }
     }
@@ -134,6 +138,7 @@ const handleToggle = (event: Event) => {
     display: grid;
     grid-template-rows: 0fr;
     transition: all v-bind(animationDurationStr) ease-in-out;
+    will-change: grid-template-rows;
 
     .inner {
       overflow: hidden;

package/app/components/view-timeline/WipeAwayVertical.vue

@@ -15,6 +15,7 @@
           'animation-timeline': key === itemCount - 1 ? 'none' : `--section-${timelineId}-${key}`,
           'z-index': itemCount - key,
         }"
+        ref="stickyItemsRef"
       >
         <slot :name="`stickyItem-${key}`"></slot>
       </div>
@@ -27,6 +28,7 @@
       :style="{
         'view-timeline-name': `--section-${timelineId}-${key}`,
       }"
+      ref="scrollingItemsRef"
     >
       <slot :name="`scrollingItem-${key}`"></slot>
     </section>
@@ -54,7 +56,9 @@ const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.s
 
 const timelineId = useId()
 const stickyItemsContainerRef = useTemplateRef<HTMLElement | null>("stickyItemsContainerRef")
+const stickyItemsRef = useTemplateRef<HTMLElement[] | null>("stickyItemsRef")
 const scrollContainerRef = useTemplateRef<HTMLElement | null>("scrollContainerRef")
+const scrollingItemsRef = useTemplateRef<HTMLElement[] | null>("scrollingItemsRef")
 const timelineInset = ref("35% 35%")
 const topPercent = ref("0")
 const bottomPercent = ref("0")
@@ -94,13 +98,36 @@ watch(
   }
 )
 
+const fallbackScrollHandler = () => {
+  const sections = scrollingItemsRef.value || []
+  const layers = stickyItemsRef.value || []
+
+  const mid = window.innerHeight / 2
+
+  sections.forEach((section, i) => {
+    const rect = section.getBoundingClientRect()
+    const active = rect.top <= mid && rect.bottom >= mid
+    if (layers[i]) layers[i].style.opacity = active ? "1" : "0"
+  })
+}
+
+const supportsScrollTimeline = import.meta.client ? CSS.supports("animation-timeline: view()") : false
+
 onMounted(() => {
   calculateInset()
-  window.addEventListener("scroll", onScrollDebounce)
+  if (supportsScrollTimeline) {
+    window.addEventListener("scroll", onScrollDebounce)
+  } else {
+    window.addEventListener("scroll", fallbackScrollHandler)
+  }
 })
 
 onUnmounted(() => {
-  window.removeEventListener("scroll", onScrollDebounce)
+  if (supportsScrollTimeline) {
+    window.removeEventListener("scroll", onScrollDebounce)
+  } else {
+    window.removeEventListener("scroll", fallbackScrollHandler)
+  }
 })
 </script>
 
@@ -141,4 +168,11 @@ onUnmounted(() => {
     animation-range: entry 0% entry 100%;
   }
 }
+
+@supports not (animation-timeline: view()) {
+  .sticky-item {
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+}
 </style>

package/app/types/index.ts

@@ -3,3 +3,4 @@ export * from "../components/display-chip/DisplayChip.vue"
 export * from "../components/carousel-basic/CarouselBasic.vue"
 export * from "../components/image-galleries/SliderGallery.vue"
 export * from "../components/display-toast/DisplayToast.vue"
+export * from "../components/alert-mask/AlertMaskCore.vue"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",