srcdev-nuxt-components 3.0.0 → 4.0.0

package/components/rotating-carousel/RotatingCarouselImage.vue

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

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

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

@@ -0,0 +1,201 @@
+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/nuxt.config.ts

@@ -1,8 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  future: {
-    compatibilityVersion: 4,
-  },
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
   modules: ['@nuxt/icon', '@nuxt/image', '@nuxt/eslint'],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -32,7 +32,7 @@
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.17.2",
+    "nuxt": "3.17.5",
     "release-it": "18.1.2",
     "typescript": "5.8.3"
   },

package/types/gallery-data.ts

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

@@ -0,0 +1,38 @@
+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;
+}