srcdev-nuxt-components 6.1.21 → 6.1.23

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

@@ -1,11 +1,32 @@
 <template>
-  <section class="carousel-infinite" :class="[elementClasses]" ref="carouselWrapperRef" role="region" aria-label="Image carousel">
+  <section
+    class="carousel-infinite"
+    :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 {{ currentVisibleIndex + 1 }} of {{ itemCount }}</div>
+    <div aria-live="polite" aria-atomic="true" class="sr-only">
+      Item {{ currentVisibleIndex + 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="currentVisibleIndex === 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="currentVisibleIndex === index ? 'true' : 'false'"
+        >
           <slot :name="item"></slot>
         </div>
       </div>
@@ -39,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 
 const props = defineProps({
   carouselDataIds: {
@@ -47,7 +68,7 @@ const props = defineProps({
     default: () => [],
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   transitionSpeed: {
@@ -62,170 +83,180 @@ 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 transitionSpeedStr = props.transitionSpeed + 'ms';
+const currentIndex = ref(0)
+const itemCount = ref(props.carouselDataIds.length)
+const transitionSpeedStr = props.transitionSpeed + "ms"
 
-const itemWidth = ref(0);
+const itemWidth = ref(0)
 const itemWidthOffsetStr = computed(() => {
-  return `-${itemWidth.value}px`;
-});
+  return `-${itemWidth.value}px`
+})
 
-const currentVisibleIndex = ref(0);
+const currentVisibleIndex = ref(0)
 
 const carouselContainerRefLeftPosition = computed(() => {
-  return carouselContainerRef.value ? carouselContainerRef.value.getBoundingClientRect().left : 0;
-});
+  return carouselContainerRef.value ? carouselContainerRef.value.getBoundingClientRect().left : 0
+})
 const fullScreenOffsset = computed(() => {
-  return `-${Math.floor(carouselContainerRefLeftPosition.value)}px`;
-});
-console.log('INIT: carouselContainerRefLeftPosition:', carouselContainerRefLeftPosition.value, 'fullScreenOffsset:', fullScreenOffsset.value);
+  return `-${Math.floor(carouselContainerRefLeftPosition.value)}px`
+})
+console.log(
+  "INIT: carouselContainerRefLeftPosition:",
+  carouselContainerRefLeftPosition.value,
+  "fullScreenOffsset:",
+  fullScreenOffsset.value
+)
 
 const updateItemOrder = (index: number, order: number, zIndex: number = 2) => {
   if (carouselItemsRef?.value && carouselItemsRef.value[index]) {
-    carouselItemsRef.value[index].style.order = order.toString();
-    carouselItemsRef.value[index].style.zIndex = zIndex.toString();
+    carouselItemsRef.value[index].style.order = order.toString()
+    carouselItemsRef.value[index].style.zIndex = zIndex.toString()
   }
-};
+}
 
-const reorderItems = (direction: 'next' | 'previous' | 'jump' = 'jump') => {
-  console.log(`Reordering items in direction: ${direction}`);
-  if (!carouselItemsRef?.value || !carouselInitComplete.value) return;
+const reorderItems = (direction: "next" | "previous" | "jump" = "jump") => {
+  console.log(`Reordering items in direction: ${direction}`)
+  if (!carouselItemsRef?.value || !carouselInitComplete.value) return
 
   // Capture positions before reordering
-  const beforeRects = carouselItemsRef.value.map((item) => item.getBoundingClientRect());
+  const beforeRects = carouselItemsRef.value.map((item) => item.getBoundingClientRect())
 
   // Apply new order and z-index based on direction
-  let order = 1;
+  let order = 1
 
   // For items from currentVisibleIndex to end
   for (let i = currentVisibleIndex.value; i < itemCount.value; i++) {
-    let zIndex = 2; // default normal z-index
+    let zIndex = 2 // default normal z-index
 
     if (i === currentVisibleIndex.value) {
       // The item becoming visible
-      if (direction === 'previous') {
+      if (direction === "previous") {
         // When going previous, the item moving to first position should go behind
-        zIndex = 1;
+        zIndex = 1
       } else {
         // Normal case - visible item gets highest z-index
-        zIndex = 3;
+        zIndex = 3
       }
     }
 
-    updateItemOrder(i, order++, zIndex);
+    updateItemOrder(i, order++, zIndex)
   }
 
   // For items from 0 to currentVisibleIndex
   for (let i = 0; i < currentVisibleIndex.value; i++) {
     // Items that wrap around get lower z-index to slide behind
-    const zIndex = 1;
-    updateItemOrder(i, order++, zIndex);
+    const zIndex = 1
+    updateItemOrder(i, order++, zIndex)
   }
-};
+}
 
 const actionPrevious = () => {
-  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return
 
   if (props.returnToStart && currentVisibleIndex.value === 0) {
-    currentVisibleIndex.value = itemCount.value - 1;
+    currentVisibleIndex.value = itemCount.value - 1
   } else {
-    currentVisibleIndex.value = currentVisibleIndex.value === 0 ? itemCount.value - 1 : currentVisibleIndex.value - 1;
+    currentVisibleIndex.value = currentVisibleIndex.value === 0 ? itemCount.value - 1 : currentVisibleIndex.value - 1
   }
 
-  reorderItems('previous');
-  currentIndex.value = currentVisibleIndex.value;
-};
+  reorderItems("previous")
+  currentIndex.value = currentVisibleIndex.value
+}
 
 const actionNext = () => {
-  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return
 
   if (props.returnToStart && currentVisibleIndex.value === itemCount.value - 1) {
-    currentVisibleIndex.value = 0;
+    currentVisibleIndex.value = 0
   } else {
-    currentVisibleIndex.value = currentVisibleIndex.value === itemCount.value - 1 ? 0 : currentVisibleIndex.value + 1;
+    currentVisibleIndex.value = currentVisibleIndex.value === itemCount.value - 1 ? 0 : currentVisibleIndex.value + 1
   }
 
-  reorderItems('next');
-  currentIndex.value = currentVisibleIndex.value;
-};
+  reorderItems("next")
+  currentIndex.value = currentVisibleIndex.value
+}
 
 const jumpToFrame = (index: number) => {
   if (index >= 0 && index < itemCount.value) {
-    currentVisibleIndex.value = index;
-    reorderItems('jump');
-    currentIndex.value = currentVisibleIndex.value;
+    currentVisibleIndex.value = index
+    reorderItems("jump")
+    currentIndex.value = currentVisibleIndex.value
   }
-};
+}
 
 const checkAndMoveLastItem = () => {
   if (props.allowCarouselOverflow) {
-    const itemsFit = Math.floor(carouselContainerRefLeftPosition.value / itemWidth.value + 1);
-    jumpToFrame(itemCount.value - 1);
+    const itemsFit = Math.floor(carouselContainerRefLeftPosition.value / itemWidth.value + 1)
+    jumpToFrame(itemCount.value - 1)
   }
-};
+}
 
 const initialSetup = () => {
   if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
-    itemWidth.value = carouselItemsRef.value[0].offsetWidth;
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth
 
     // Set initial order and z-index for all items
     carouselItemsRef.value.forEach((item, index) => {
-      item.style.order = String(index + 1);
+      item.style.order = String(index + 1)
       // First item gets higher z-index, others get normal z-index
-      item.style.zIndex = index === 0 ? '3' : '2';
-    });
+      item.style.zIndex = index === 0 ? "3" : "2"
+    })
   }
 
-  carouselInitComplete.value = true;
-  checkAndMoveLastItem();
-};
+  carouselInitComplete.value = true
+  checkAndMoveLastItem()
+}
 
 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();
-  console.log('onMounted: carouselContainerRefLeftPosition:', carouselContainerRefLeftPosition.value, 'fullScreenOffsset:', fullScreenOffsset.value);
-});
+  initialSetup()
+  console.log(
+    "onMounted: carouselContainerRefLeftPosition:",
+    carouselContainerRefLeftPosition.value,
+    "fullScreenOffsset:",
+    fullScreenOffsset.value
+  )
+})
 </script>
 
 <style lang="css">

package/app/components/clip-element/ClipElement.vue

@@ -7,57 +7,47 @@
 </template>
 
 <script lang="ts" setup>
-
 const props = defineProps({
   maxClip: {
     type: Number,
     default: 100,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+})
 
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const container = ref(null);
-const clipElement = ref<HTMLDivElement | null>(null);
-const clipOffset = ref(0);
+const container = ref(null)
+const clipElement = ref<HTMLDivElement | null>(null)
+const clipOffset = ref(0)
 
 const updateClip = () => {
-
   if (clipElement.value) {
-
-    const topPosition = Math.floor(clipElement.value.getBoundingClientRect().top);
+    const topPosition = Math.floor(clipElement.value.getBoundingClientRect().top)
 
     if (topPosition < props.maxClip && topPosition > 0) {
-      clipOffset.value = props.maxClip - topPosition;
-    }
-    else if (topPosition < 0) {
-      clipOffset.value = props.maxClip + Math.abs(topPosition);
-    }
-    else if (topPosition > props.maxClip) {
-      clipOffset.value = 0;
+      clipOffset.value = props.maxClip - topPosition
+    } else if (topPosition < 0) {
+      clipOffset.value = props.maxClip + Math.abs(topPosition)
+    } else if (topPosition > props.maxClip) {
+      clipOffset.value = 0
     }
   }
-};
+}
 
 onMounted(() => {
-
   if (import.meta.client) {
-    updateClip(); // Initial check
-    window.addEventListener('scroll', updateClip, { passive: true });
+    updateClip() // Initial check
+    window.addEventListener("scroll", updateClip, { passive: true })
   }
-
-});
+})
 
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', updateClip);
-});
-
-
+  window.removeEventListener("scroll", updateClip)
+})
 </script>
 
 <style lang="css">

package/app/components/clipped-panels/ClippedPanel.vue

@@ -34,7 +34,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/container-glow/ContainerGlowCore.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="container-glow-wrapper" :class="elementClasses" ref="containerGlowWrapper">
-    <component :is="tag" v-for="(item, key) in itemCount" :key="key" class="container-glow-core" ref="containerGlowItem">
+    <component
+      :is="tag"
+      v-for="(item, key) in itemCount"
+      :key="key"
+      class="container-glow-core"
+      ref="containerGlowItem"
+    >
       <div class="glows"></div>
       <slot :name="`container-glow-${key}`"></slot>
     </component>
@@ -9,12 +15,12 @@
 
 <script setup lang="ts">
 interface Config {
-  proximity: number;
-  spread: number;
-  blur: number;
-  gap: number;
-  vertical: boolean;
-  opacity: number;
+  proximity: number
+  spread: number
+  blur: number
+  gap: number
+  vertical: boolean
+  opacity: number
 }
 
 const props = defineProps({
@@ -24,10 +30,10 @@ const props = defineProps({
   },
   tag: {
     type: String as PropType<string>,
-    default: 'div',
+    default: "div",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   config: {
@@ -41,20 +47,20 @@ const props = defineProps({
       opacity: 0.15,
     }),
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const controller = new AbortController();
+const controller = new AbortController()
 
-const containerGlowWrapper = ref<HTMLElement>();
-const containerGlowItem = ref<HTMLElement[]>([]);
+const containerGlowWrapper = ref<HTMLElement>()
+const containerGlowItem = ref<HTMLElement[]>([])
 
 const updateStyles = (event: PointerEvent) => {
   // get the angle based on the center point of the card and pointer position
   for (const cardElem of containerGlowItem.value) {
     // Check the card against the proximity and then start updating
-    const cardBounds = cardElem.getBoundingClientRect();
+    const cardBounds = cardElem.getBoundingClientRect()
     // Get distance between pointer and outerbounds of card
     if (
       event?.x > cardBounds.left - props.config.proximity &&
@@ -63,44 +69,44 @@ const updateStyles = (event: PointerEvent) => {
       event?.y < cardBounds.top + cardBounds.height + props.config.proximity
     ) {
       // If within proximity set the active opacity
-      cardElem.style.setProperty('--opacity-active', String(1));
+      cardElem.style.setProperty("--opacity-active", String(1))
     } else {
-      cardElem.style.setProperty('--opacity-active', String(props.config.opacity));
+      cardElem.style.setProperty("--opacity-active", String(props.config.opacity))
     }
-    const cardCentre = [cardBounds.left + cardBounds.width * 0.5, cardBounds.top + cardBounds.height * 0.5];
-    let angle = (Math.atan2(event?.y - cardCentre[1], event?.x - cardCentre[0]) * 180) / Math.PI;
-    angle = angle < 0 ? angle + 360 : angle;
-    cardElem.style.setProperty('--start', String(angle + 90));
+    const cardCentre = [cardBounds.left + cardBounds.width * 0.5, cardBounds.top + cardBounds.height * 0.5]
+    let angle = (Math.atan2(event?.y - cardCentre[1], event?.x - cardCentre[0]) * 180) / Math.PI
+    angle = angle < 0 ? angle + 360 : angle
+    cardElem.style.setProperty("--start", String(angle + 90))
   }
-};
+}
 
 const applyStyles = () => {
-  containerGlowWrapper.value?.style.setProperty('--gap', String(props.config.gap));
-  containerGlowWrapper.value?.style.setProperty('--blur', String(props.config.blur));
-  containerGlowWrapper.value?.style.setProperty('--spread', String(props.config.spread));
-  containerGlowWrapper.value?.style.setProperty('--direction', props.config.vertical ? 'column' : 'row');
-};
+  containerGlowWrapper.value?.style.setProperty("--gap", String(props.config.gap))
+  containerGlowWrapper.value?.style.setProperty("--blur", String(props.config.blur))
+  containerGlowWrapper.value?.style.setProperty("--spread", String(props.config.spread))
+  containerGlowWrapper.value?.style.setProperty("--direction", props.config.vertical ? "column" : "row")
+}
 
 // document.body.addEventListener('pointermove', updateStyles);
 
 onMounted(() => {
-  applyStyles();
+  applyStyles()
   if (containerGlowWrapper.value) {
-    document.body.addEventListener('pointermove', updateStyles, {
+    document.body.addEventListener("pointermove", updateStyles, {
       signal: controller.signal,
-    });
+    })
   }
-});
+})
 
 onBeforeUnmount(() => {
-  return controller.abort();
-});
+  return controller.abort()
+})
 </script>
 
 <style lang="css">
 .container-glow-wrapper {
   @property --start {
-    syntax: '<number>';
+    syntax: "<number>";
     inherits: true;
     initial-value: 0;
   }
@@ -146,7 +152,7 @@ onBeforeUnmount(() => {
 
     &::before,
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
     }
@@ -160,7 +166,12 @@ onBeforeUnmount(() => {
       background-attachment: fixed;
       border-radius: 12px;
       mask: linear-gradient(#0000, #0000),
-        conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsl(0 0% 100% / 0.15) 0deg, white, hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
+        conic-gradient(
+          from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
+          hsl(0 0% 100% / 0.15) 0deg,
+          white,
+          hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg)
+        );
       mask-clip: padding-box, border-box;
       mask-composite: intersect;
       opacity: var(--opacity-active);
@@ -177,7 +188,13 @@ onBeforeUnmount(() => {
       transition: opacity 1s;
       --alpha: 0;
       border: 2px solid transparent;
-      mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
+      mask: linear-gradient(#0000, #0000),
+        conic-gradient(
+          from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
+          #0000 0deg,
+          #fff,
+          #0000 calc(var(--spread) * 0.5deg)
+        );
       filter: brightness(1.5);
       mask-clip: padding-box, border-box;
       mask-composite: intersect;
@@ -192,14 +209,20 @@ onBeforeUnmount(() => {
       &::after,
       &::before {
         --alpha: 0;
-        content: '';
+        content: "";
         background: var(--gradient);
         background-attachment: fixed;
         position: absolute;
         inset: -5px;
         border: 10px solid transparent;
         border-radius: 12px;
-        mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
+        mask: linear-gradient(#0000, #0000),
+          conic-gradient(
+            from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
+            #000 0deg,
+            #fff,
+            #0000 calc(var(--spread) * 1deg)
+          );
         mask-composite: intersect;
         mask-clip: padding-box, border-box;
         opacity: var(--opacity-active);

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -48,7 +48,7 @@ const props = defineProps({
     default: () => [],
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -38,7 +38,7 @@ const props = defineProps({
     default: () => [],
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/display-banner/DisplayBanner.vue

@@ -32,7 +32,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/display-card/DisplayCard.vue

@@ -41,7 +41,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

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

@@ -34,7 +34,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/display-dialog/DisplayDialogCore.vue

@@ -49,7 +49,7 @@
 import { FocusTrap } from "focus-trap-vue"
 const props = defineProps({
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   variant: {