srcdev-nuxt-components 2.5.18 → 3.0.0

package/components/rotating-carousel/RotatingCarouselImage.vue

@@ -1,200 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="rotating-carousel"
-    :class="[elementClasses]"
-    :style="`--_rotate-x: ${rotateXProp}deg; --_perspective: ${perspectiveProp}; --_translateZ: ${translateZProp}; --_animation-play-state: ${pauseOnHover ? 'paused' : 'running'}`"
-    ref="carouselRef"
-  >
-    <div class="slider" :style="`--quantity: ${Object.keys(data).length}`">
-      <div v-for="(item, key) in data" :key="key" class="item" :style="`--_position: ${key}`"><NuxtImg :src="item.src" :alt="item.alt" /></div>
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
-interface IAccordianData {
-  src: string;
-  alt: string;
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  data: {
-    type: Array as PropType<IAccordianData[]>,
-    default: () => [],
-  },
-  tag: {
-    type: String,
-    default: 'div',
-    validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
-    },
-  },
-  rotateX: {
-    type: Number,
-    default: 0,
-  },
-  perspective: {
-    type: Number,
-    default: 1000,
-  },
-  translateZ: {
-    type: Number,
-    default: 1000,
-  },
-  pauseOnHover: {
-    type: Boolean,
-    default: false,
-  },
-  useParallaxEffect: {
-    type: Boolean,
-    default: true,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const perspectiveProp = computed(() => `${props.perspective.toString()}px`);
-const translateZProp = computed(() => `${props.translateZ.toString()}px`);
-
-const carouselRef = ref<HTMLElement | null>(null);
-const rotateXProp = ref(props.rotateX);
-const minRotateX = -32;
-const maxRotateX = 32;
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-
-watch(
-  () => props.rotateX,
-  () => {
-    if (!props.useParallaxEffect) {
-      console.log('rotateXProp changed: ', rotateXProp.value);
-
-      rotateXProp.value = props.rotateX;
-    }
-  }
-);
-
-watch(
-  () => props.useParallaxEffect,
-  (currentValue) => {
-    if (currentValue) {
-      handleScroll();
-      window.addEventListener('scroll', handleScroll);
-    } else {
-      window.removeEventListener('scroll', handleScroll);
-    }
-  }
-);
-
-const handleScroll = () => {
-  if (!carouselRef.value) return;
-  if ('IntersectionObserver' in window) {
-    const rect = carouselRef.value.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-
-    const elementCenter = rect.top + rect.height / 2;
-    const viewportCenter = viewportHeight / 2;
-    const distanceFromCenter = viewportCenter - elementCenter;
-    const maxDistance = viewportHeight / 2 + rect.height / 2;
-
-    const progress = (distanceFromCenter + maxDistance) / (maxDistance * 2);
-    const clampedProgress = Math.max(0, Math.min(1, progress));
-
-    rotateXProp.value = minRotateX + (maxRotateX - minRotateX) * clampedProgress;
-  }
-};
-
-onMounted(async () => {
-  if (props.useParallaxEffect) {
-    handleScroll();
-    await nextTick();
-    window.addEventListener('scroll', handleScroll);
-  }
-});
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
-</script>
-
-<style lang="css">
-/* @property --_rotate-x {
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 0deg;
-}
-
-@keyframes autoRotateAnimation {
-  from {
-    --_rotate-x: -16deg;
-  }
-  to {
-    --_rotate-x: 16deg;
-  }
-} */
-
-@keyframes autoRun {
-  from {
-    transform: perspective(var(--_perspective)) rotateX(var(--_rotate-x)) rotateY(0deg);
-  }
-  to {
-    transform: perspective(var(--_perspective)) rotateX(var(--_rotate-x)) rotateY(360deg);
-  }
-}
-
-.rotating-carousel {
-  width: 100%;
-  height: 70svh;
-  text-align: center;
-  overflow: hidden;
-  position: relative;
-
-  /* padding-block: 800px; */
-
-  /* &.scroll-effect {
-    animation: autoRotateAnimation;
-    animation-timeline: view();
-  } */
-
-  .slider {
-    position: absolute;
-    width: 200px;
-    height: 250px;
-    bottom: 35%;
-    left: calc(50% - 100px);
-    transform-style: preserve-3d;
-    transform: perspective(var(--_perspective));
-    animation: autoRun 30s linear infinite;
-    z-index: 2;
-
-    &:has(.item img:hover) {
-      animation-play-state: var(--_animation-play-state);
-    }
-
-    .item {
-      position: absolute;
-      inset: 0 0 0 0;
-      transform: rotateY(calc((var(--_position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(var(--_translateZ));
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-}
-</style>

package/composables/useDialogControls.ts

@@ -1,23 +0,0 @@
-export const useDialogControls = () => {
-  interface DialogConfig {
-    [key: string]: boolean;
-  }
-
-  const dialogsConfig = reactive<DialogConfig>({});
-
-  function initialiseDialogs(dialogIds: string[]) {
-    dialogIds.forEach((id) => {
-      dialogsConfig[id] = false;
-    });
-  }
-
-  const controlDialogs = (name: string, state: boolean) => {
-    dialogsConfig[name] = state;
-  };
-
-  return {
-    dialogsConfig,
-    controlDialogs,
-    initialiseDialogs,
-  };
-};

package/composables/useStyleClassPassthrough.ts

@@ -1,35 +0,0 @@
-export const useStyleClassPassthrough = (styleClassPassthrough: string[]) => {
-  const styleClassPassthroughRef = ref(styleClassPassthrough);
-
-  const elementClasses = computed(() => {
-    return styleClassPassthroughRef.value.join(' ');
-  });
-
-  const updateElementClasses = (cssClass: string | string[]) => {
-    let cssClasses = [] as string[];
-    if (typeof cssClass === 'string') {
-      cssClasses = [cssClass];
-    } else if (Array.isArray(cssClass)) {
-      cssClasses = cssClass;
-    }
-
-    cssClasses.forEach((cssClass) => {
-      if (styleClassPassthroughRef.value.includes(cssClass)) {
-        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((className) => className !== cssClass);
-      } else {
-        styleClassPassthroughRef.value.push(cssClass);
-      }
-    });
-  };
-
-  const resetElementClasses = (propsClasses: string[]) => {
-    styleClassPassthroughRef.value = propsClasses;
-  };
-
-  return {
-    elementClasses,
-    updateElementClasses,
-    resetElementClasses,
-    styleClassPassthroughRef,
-  };
-};

package/composables/useTabs.ts

@@ -1,201 +0,0 @@
-import { useResizeObserver } from '@vueuse/core';
-
-const useTabs = (axis: string, tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number) => {
-  const navItems = ref<HTMLElement[] | null>(null);
-  const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
-  const currentActiveTab = ref<HTMLElement>();
-
-  const previousHoveredTab = ref<HTMLElement>();
-  const currentHoveredTab = ref<HTMLElement>();
-  const tagName = ref<string>();
-
-  const initNavDecorators = () => {
-    navItems.value = tabsNavRef.value ? (Array.from(tabsNavRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
-    tagName.value = navItems.value[0].tagName.toLowerCase();
-
-    const activeIndex = ref(0);
-
-    // Temporarily set the first nav item as active
-    navItems.value[0].setAttribute('aria-selected', 'true');
-
-    // Test if navItems are hyperlinks
-    if (navItems.value[0].tagName.toLowerCase() === 'a') {
-      // Find index of element with class "router-link-active"
-      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains('router-link-active'));
-    }
-    // else {
-    //  Set actve tab
-    // }
-
-    currentActiveTab.value = navItems.value[activeIndex.value];
-    currentHoveredTab.value = navItems.value[activeIndex.value];
-
-    previousActiveTab.value = navItems.value[activeIndex.value];
-    previousHoveredTab.value = navItems.value[activeIndex.value];
-
-    addNavDecorators();
-    setActiveTabContent();
-  };
-
-  const addNavDecorators = () => {
-    const elementClasses = ['nav__active-indicator', 'nav__active', 'nav__hovered'];
-    if (tabsNavRef.value) {
-      for (let i = 0; i < 3; i++) {
-        const div = document.createElement('div');
-        div.classList.add(elementClasses[i]);
-        tabsNavRef.value.appendChild(div);
-      }
-    }
-  };
-
-  const navItemHovered = (event: Event) => {
-    const target = event.target as HTMLElement;
-    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0;
-
-    if (newTabPosition !== 0) {
-      previousHoveredTab.value = currentHoveredTab.value;
-      currentHoveredTab.value = target;
-      moveHoveredIndicator();
-    }
-  };
-
-  const resetHoverToActivePosition = () => {
-    previousHoveredTab.value = currentHoveredTab.value;
-    currentHoveredTab.value = currentActiveTab.value;
-    moveHoveredIndicator();
-  };
-
-  const navItemClicked = (event: Event) => {
-    const target = event.target as HTMLElement;
-
-    previousActiveTab.value = currentActiveTab.value || null;
-    currentActiveTab.value = target;
-
-    navItems.value?.forEach((tab) => {
-      tab.setAttribute('aria-selected', currentActiveTab.value === tab ? 'true' : 'false');
-    });
-
-    moveActiveIndicator();
-    setActiveTabContent();
-  };
-
-  const handleTransitioningClass = (transitionDuration: number = 200) => {
-    if (previousHoveredTab.value && currentHoveredTab.value) {
-      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value);
-      const navItemsArray = navItems.value || [];
-
-      const timeout = Math.floor(transitionDuration / Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value)));
-
-      if (newTabPosition === 4) {
-        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i < navItemsArray.indexOf(currentHoveredTab.value); i++) {
-          navItemsArray[i].classList.add('transitioning');
-          if (i >= navItemsArray.indexOf(previousHoveredTab.value) && i < navItemsArray.indexOf(currentHoveredTab.value)) {
-            setTimeout(() => {
-              navItemsArray[i].classList.remove('transitioning');
-              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-            }, duration * 1.5);
-          }
-        }
-      } else {
-        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i > navItemsArray.indexOf(currentHoveredTab.value); i--) {
-          navItemsArray[i].classList.add('transitioning');
-          if (i <= navItemsArray.indexOf(previousHoveredTab.value) && i > navItemsArray.indexOf(currentHoveredTab.value)) {
-            setTimeout(() => {
-              navItemsArray[i].classList.remove('transitioning');
-              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-            }, duration * 1.5);
-          }
-        }
-      }
-    }
-  };
-
-  const setFinalHoveredPositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration;
-    // const tabsNavRefYPosition = tabsNavRef.value?.getBoundingClientRect().top || 0;
-    const newTabWidth = currentHoveredTab.value && tabsNavRef.value ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
-    tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value?.offsetLeft + 'px');
-
-    tabsNavRef.value?.style.setProperty('--_width-hovered', newTabWidth?.toString());
-    tabsNavRef.value?.style.setProperty('--_y-hovered', currentHoveredTab.value?.offsetTop + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-height', currentHoveredTab.value?.offsetHeight + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-width', currentHoveredTab.value?.offsetWidth + 'px');
-  };
-
-  const setFinalActivePositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration;
-    const newTabWidth = currentActiveTab.value && tabsNavRef.value ? currentActiveTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
-    tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value?.offsetLeft + 'px');
-    tabsNavRef.value?.style.setProperty('--_width-active', newTabWidth?.toString());
-    tabsNavRef.value?.style.setProperty('--_y-active', currentActiveTab.value?.offsetTop + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-height', currentActiveTab.value?.offsetHeight + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-width', currentActiveTab.value?.offsetWidth + 'px');
-  };
-
-  const moveActiveIndicator = () => {
-    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
-
-    const newTabPosition = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value) : 0;
-    let transitionWidth;
-
-    if (newTabPosition === 4) {
-      transitionWidth = currentActiveTab.value && previousActiveTab.value ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft : 0;
-    } else {
-      transitionWidth = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
-    }
-
-    tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
-
-    handleTransitioningClass(duration);
-
-    setTimeout(() => {
-      setFinalActivePositions();
-    }, Math.floor(duration + 20));
-  };
-
-  const moveHoveredIndicator = () => {
-    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
-
-    const newTabPosition = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value) : 0;
-    let transitionWidth;
-
-    if (newTabPosition === 4) {
-      transitionWidth = currentHoveredTab.value && previousHoveredTab.value ? currentHoveredTab.value.offsetLeft + currentHoveredTab.value.offsetWidth - previousHoveredTab.value.offsetLeft : 0;
-    } else {
-      transitionWidth = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.offsetLeft + previousHoveredTab.value.offsetWidth - currentHoveredTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
-    }
-
-    tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
-
-    handleTransitioningClass(duration);
-
-    setTimeout(() => {
-      setFinalHoveredPositions();
-    }, Math.floor(duration + 20));
-  };
-
-  const setActiveTabContent = () => {
-    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value);
-    tabsContentRefs.value?.forEach((tabContent: HTMLElement, index: number) => {
-      tabContent.style.display = activeIndex === index ? 'block' : 'none';
-    });
-  };
-
-  useResizeObserver(tabsNavRef, () => {
-    setFinalActivePositions(true);
-    setFinalHoveredPositions(true);
-  });
-
-  return {
-    initNavDecorators,
-    navItemClicked,
-    navItemHovered,
-    resetHoverToActivePosition,
-  };
-};
-
-export default useTabs;

package/types/gallery-data.ts

@@ -1,13 +0,0 @@
-export interface IGalleryData {
-  src: string;
-  alt: string;
-  stylist?: string;
-  title?: string;
-  category?: string;
-  description?: string;
-  thumbnail?: {
-    title: string;
-    description: string;
-  };
-  textBrightness: 'light' | 'dark';
-}

package/types/responsiveHeader.ts

@@ -1,38 +0,0 @@
-export interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  iconName?: string;
-  imageSrc?: string;
-  imageAlt?: string;
-  description?: string;
-  isActive?: boolean;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
-  config?: ResponsiveHeaderItemRects;
-}
-
-export interface ResponsiveHeaderProp {
-  [key: string]: ResponsiveHeaderNavItem[];
-}
-
-export interface IFlooredRect {
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-  width: number;
-  height: number;
-}
-
-export interface ResponsiveHeaderItemRects {
-  left: number;
-  right: number;
-  width?: number;
-  visible: boolean;
-}
-
-export interface ResponsiveHeaderState {
-  navListVisibility: Record<string, boolean>;
-  clonedNavLinks?: ResponsiveHeaderProp;
-}