srcdev-nuxt-components 6.0.0 → 6.0.1

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

@@ -0,0 +1,325 @@
+<template>
+  <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>
+
+    <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'">
+          <slot :name="item"></slot>
+        </div>
+      </div>
+    </LayoutRow>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div tabindex="0" class="controls-container" ref="controlsContainerRef">
+        <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: currentVisibleIndex === index - 1 }]"
+                :aria-label="`Jump to item ${Math.floor(index + 1)}`"
+              ></button>
+            </li>
+          </ul>
+        </div>
+        <div class="buttons-container">
+          <button type="button" @click.prevent="actionPrevious()" class="btn-action" aria-label="Go to previous item">
+            <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+          </button>
+          <button type="button" @click.prevent="actionNext()" class="btn-action" aria-label="Go to next item">
+            <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+          </button>
+        </div>
+      </div>
+    </LayoutRow>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+
+const props = defineProps({
+  carouselDataIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 200,
+  },
+  allowCarouselOverflow: {
+    type: Boolean,
+    default: false,
+  },
+  returnToStart: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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 currentIndex = ref(0);
+const itemCount = ref(props.carouselDataIds.length);
+const transitionSpeedStr = props.transitionSpeed + 'ms';
+
+const itemWidth = ref(0);
+const itemWidthOffsetStr = computed(() => {
+  return `-${itemWidth.value}px`;
+});
+
+const currentVisibleIndex = ref(0);
+
+const carouselContainerRefLeftPosition = computed(() => {
+  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);
+
+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();
+  }
+};
+
+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());
+
+  // Apply new order and z-index based on direction
+  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
+
+    if (i === currentVisibleIndex.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;
+      }
+    }
+
+    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 actionPrevious = () => {
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
+
+  if (props.returnToStart && currentVisibleIndex.value === 0) {
+    currentVisibleIndex.value = itemCount.value - 1;
+  } else {
+    currentVisibleIndex.value = currentVisibleIndex.value === 0 ? itemCount.value - 1 : currentVisibleIndex.value - 1;
+  }
+
+  reorderItems('previous');
+  currentIndex.value = currentVisibleIndex.value;
+};
+
+const actionNext = () => {
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
+
+  if (props.returnToStart && currentVisibleIndex.value === itemCount.value - 1) {
+    currentVisibleIndex.value = 0;
+  } else {
+    currentVisibleIndex.value = currentVisibleIndex.value === itemCount.value - 1 ? 0 : currentVisibleIndex.value + 1;
+  }
+
+  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;
+  }
+};
+
+const checkAndMoveLastItem = () => {
+  if (props.allowCarouselOverflow) {
+    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;
+
+    // Set initial order and z-index for all items
+    carouselItemsRef.value.forEach((item, index) => {
+      item.style.order = String(index + 1);
+      // First item gets higher z-index, others get normal z-index
+      item.style.zIndex = index === 0 ? '3' : '2';
+    });
+  }
+
+  carouselInitComplete.value = true;
+  checkAndMoveLastItem();
+};
+
+const { direction } = useSwipe(carouselContainerRef, {
+  passive: false,
+  onSwipeEnd() {
+    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(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
+  if (event.key === 'ArrowLeft') {
+    actionPrevious();
+  } else if (event.key === 'ArrowRight') {
+    actionNext();
+  }
+});
+
+useResizeObserver(carouselWrapperRef, async () => {
+  initialSetup();
+});
+
+onMounted(() => {
+  initialSetup();
+  console.log('onMounted: carouselContainerRefLeftPosition:', carouselContainerRefLeftPosition.value, 'fullScreenOffsset:', fullScreenOffsset.value);
+});
+</script>
+
+<style lang="css">
+.carousel-infinite {
+  --_carousel-item-track-gap: 10px;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+
+  .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;
+  }
+
+  .item-container {
+    display: flex;
+    gap: var(--_carousel-item-track-gap);
+    overflow-x: hidden;
+    position: relative;
+
+    &.allow-overflow {
+      overflow-x: initial;
+
+      .item {
+        translate: calc(v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap)) 0;
+      }
+    }
+
+    .item {
+      display: flex;
+      flex: 0 0 100%;
+      max-inline-size: 800px;
+      position: relative;
+    }
+  }
+
+  .controls-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .markers-container {
+      .markers-list {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        list-style-type: none;
+        margin: unset;
+        padding: unset;
+
+        .markers-item {
+          .btn-marker {
+            border: none;
+            outline: none;
+            box-shadow: none;
+            cursor: pointer;
+            transition: background-color v-bind(transitionSpeedStr) linear;
+
+            &.active {
+              background-color: red;
+            }
+          }
+        }
+      }
+    }
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 20px;
+
+      .btn-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        cursor: pointer;
+        height: fit-content;
+
+        .arrows-icon {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="clip-element-wrapper" ref="container" :class="elementClasses">
+    <div class="clipped-element" :style="`--_clip-path: inset(${clipOffset}px 0 0 0)`" ref="clipElement">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps({
+  maxClip: {
+    type: Number,
+    default: 100,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+
+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);
+
+    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;
+    }
+  }
+};
+
+onMounted(() => {
+
+  if (import.meta.client) {
+    updateClip(); // Initial check
+    window.addEventListener('scroll', updateClip, { passive: true });
+  }
+
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', updateClip);
+});
+
+
+</script>
+
+<style lang="css">
+.clip-element-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.clipped-element {
+  width: 100%;
+  clip-path: var(--_clip-path);
+  display: block;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
+    <slot name="default"></slot>
+  </component>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  variant: {
+    type: String,
+    default: 'square',
+    validator(value: string) {
+      return ['circle-cutout', 'rectangle', 'square'].includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.clipped-panel {
+  --_foreground-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+
+  /* Component styles */
+
+  background-color: red;
+  /* color: var(--_foreground-color); */
+  outline: 1px solid var(--_foreground-color);
+  /* box-shadow: 5px 5px 5px 5px white; */
+
+  aspect-ratio: 1;
+
+  &.rectangle {
+
+    --_max-x-position: 300px;
+    --_curve-radius: 10px;
+
+    clip-path: path('M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    width: 300px;
+  }
+  &.square {
+    /* clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 L 110, 0 L 190, 0 L 200, 10 L 200, 190 L 190, 200 L 10, 200 L 0, 190 L 0, 60 L 10, 50 Z'); */
+    clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    width: 200px;
+  }
+  &.circle-cutout {
+    clip-path: path('M  Z');
+  }
+}
+</style>

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

@@ -0,0 +1,211 @@
+<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">
+      <div class="glows"></div>
+      <slot :name="`container-glow-${key}`"></slot>
+    </component>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Config {
+  proximity: number;
+  spread: number;
+  blur: number;
+  gap: number;
+  vertical: boolean;
+  opacity: number;
+}
+
+const props = defineProps({
+  itemCount: {
+    type: Number,
+    required: true,
+  },
+  tag: {
+    type: String as PropType<string>,
+    default: 'div',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  config: {
+    type: Object as PropType<Config>,
+    default: () => ({
+      proximity: 40,
+      spread: 80,
+      blur: 20,
+      gap: 32,
+      vertical: false,
+      opacity: 0.15,
+    }),
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const controller = new AbortController();
+
+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();
+    // Get distance between pointer and outerbounds of card
+    if (
+      event?.x > cardBounds.left - props.config.proximity &&
+      event?.x < cardBounds.left + cardBounds.width + props.config.proximity &&
+      event?.y > cardBounds.top - props.config.proximity &&
+      event?.y < cardBounds.top + cardBounds.height + props.config.proximity
+    ) {
+      // If within proximity set the active opacity
+      cardElem.style.setProperty('--opacity-active', String(1));
+    } else {
+      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 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');
+};
+
+// document.body.addEventListener('pointermove', updateStyles);
+
+onMounted(() => {
+  applyStyles();
+  if (containerGlowWrapper.value) {
+    document.body.addEventListener('pointermove', updateStyles, {
+      signal: controller.signal,
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  return controller.abort();
+});
+</script>
+
+<style lang="css">
+.container-glow-wrapper {
+  @property --start {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  display: flex;
+  gap: 3.2rem;
+
+  .container-glow-core {
+    & *,
+    & *:after,
+    & *:before {
+      box-sizing: border-box;
+    }
+
+    --gradient: conic-gradient(
+      from 180deg at 50% 70%,
+      hsla(0, 0%, 98%, 1) 0deg,
+      #eec32d 72.0000010728836deg,
+      #ec4b4b 144.0000021457672deg,
+      #709ab9 216.00000858306885deg,
+      #4dffbf 288.0000042915344deg,
+      hsla(0, 0%, 98%, 1) 1turn
+    );
+    --opacity-active: 0.15;
+    --start: 0;
+
+    position: relative;
+
+    height: 100%;
+    background: light-dark(white, hsl(246 44% 7%));
+    padding: 2rem;
+    aspect-ratio: 330 / 400;
+    border-radius: 12px;
+    min-width: 280px;
+    max-width: 280px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    &:is(:hover, :focus-visible) {
+      z-index: 2;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    &::before {
+      pointer-events: none;
+
+      border: 2px solid transparent;
+      border-radius: 12px;
+      background: hsl(280 10% 50% / 1);
+      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));
+      mask-clip: padding-box, border-box;
+      mask-composite: intersect;
+      opacity: var(--opacity-active);
+      transition: opacity 1s;
+    }
+
+    &::after {
+      pointer-events: none;
+
+      background: var(--gradient);
+      background-attachment: fixed;
+      border-radius: 12px;
+      opacity: var(--opacity-active, 0);
+      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));
+      filter: brightness(1.5);
+      mask-clip: padding-box, border-box;
+      mask-composite: intersect;
+    }
+
+    .glows {
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      filter: blur(calc(var(--blur) * 1px));
+
+      &::after,
+      &::before {
+        --alpha: 0;
+        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-composite: intersect;
+        mask-clip: padding-box, border-box;
+        opacity: var(--opacity-active);
+        transition: opacity 1s;
+      }
+    }
+  }
+}
+</style>