srcdev-nuxt-components 5.0.2 → 6.0.0

package/components/carousel-basic/CarouselInfinite.vue

@@ -1,325 +0,0 @@
-<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/components/clip-element/ClipElement.vue

@@ -1,73 +0,0 @@
-<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/components/clipped-panels/ClippedPanel.vue

@@ -1,73 +0,0 @@
-<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/components/container-glow/ContainerGlowCore.vue

@@ -1,211 +0,0 @@
-<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>