srcdev-nuxt-components 6.0.0 → 6.0.1

package/app/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/app/components/skip-links/SkipLinks.vue

@@ -0,0 +1,92 @@
+<template>
+  <ul class="home-link-navigation" aria-label="Home Navigation">
+    <li v-if="hasHomeLink" class="home-link">
+      <slot name="homeLink">
+        <NuxtLink to="/" class="home-link-default">Logo</NuxtLink>
+      </slot>
+    </li>
+    <li class="skip-links">
+      <ul class="skip-links-nav">
+        <li class="skip-link-item"><a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a></li>
+        <li class="skip-link-item"><a href="#footer" class="skip-link">Skip to footer</a></li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const slots = useSlots();
+const hasHomeLink = ref(slots.homeLink !== undefined);
+</script>
+
+<style lang="css">
+.home-link-navigation {
+  position: relative;
+  list-style: none;
+  padding: 0;
+
+  .skip-links {
+    list-style: none;
+    background-color: black;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+
+    &:focus-within {
+      height: auto;
+      z-index: 1000;
+    }
+
+    .skip-links-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      background-color: black;
+
+      border: 1px solid white;
+
+      list-style: none;
+      padding: 0.2rem;
+      margin: 0;
+
+      .skip-link-item {
+        padding: 0.2rem;
+
+        .skip-link {
+          display: block;
+          color: white;
+          text-decoration: none;
+          margin: 0.2rem;
+
+          padding: 0.8rem 1.2rem;
+          text-wrap: nowrap;
+
+          &:focus-visible {
+            outline: 2px solid white;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* .skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: top 0.3s;
+}
+
+.skip-link:focus {
+  top: 0;
+} */
+</style>

package/app/components/tabs/TabsCore.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="tabs-core" :class="`axis-${axis}`">
+    <ul role="tablist" aria-labelledby="channel-name" ref="tabsNavRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
+      <li v-for="(index, key) in itemCount" :key="key">
+        <button
+          @click.prevent="navItemClicked($event)"
+          @mouseover="navItemHovered($event)"
+          :id="`tab-${key}-trigger`"
+          :data-tab-index="key"
+          data-nav-item
+          role="tab"
+          aria-selected="false"
+          class="tabs-list-item"
+        >
+          <slot :name="`tab-${key}-trigger`"></slot>
+        </button>
+      </li>
+    </ul>
+    <div class="tab-content-wrapper">
+      <div v-for="(item, key) in itemCount" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
+        <slot :name="`tab-${key}-content`"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tag: {
+    type: String as PropType<string>,
+    default: 'button',
+  },
+  axis: {
+    type: String as PropType<'x' | 'y'>,
+    default: 'x',
+  },
+  transitionDuration: {
+    type: Number as PropType<number>,
+    default: 200,
+  },
+  itemCount: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  trackHover: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  trackActive: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  trackIndicator: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const tabsNavRef = ref<HTMLElement | null>(null);
+const tabsContentRefs = ref<HTMLElement[] | null>(null);
+
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(props.axis, tabsNavRef, tabsContentRefs, props.transitionDuration);
+
+onMounted(() => {
+  initNavDecorators();
+});
+</script>
+
+<style lang="css">
+.tabs-core {
+  .tabs-list {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    z-index: 1;
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    .nav__hovered {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      scale: var(--_width-hovered, 0.125) 1;
+      translate: var(--_x-hovered, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 1;
+    }
+
+    .nav__active {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      scale: var(--_width-active, 0.125) 1;
+      translate: var(--_x-active, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 2;
+    }
+
+    .nav__active-indicator {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      scale: var(--_width-active, 0.125) 1;
+      translate: var(--_x-active, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 3;
+    }
+
+    .tabs-list-item {
+      opacity: 0.7;
+      position: relative;
+      transition: color 100ms;
+      z-index: 4;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &[aria-selected='true'] {
+        opacity: 1;
+      }
+    }
+
+    border-bottom: var(--_tabs-border-bottom);
+
+    .nav__hovered {
+      background: light-dark(var(--gray-7), var(--gray-3));
+      color: light-dark(var(--gray-0), var(--gray-12));
+    }
+
+    .nav__active {
+      background: light-dark(var(--gray-12), var(--gray-0));
+      color: light-dark(var(--gray-0), var(--gray-12));
+    }
+
+    .nav__active-indicator {
+      background: light-dark(var(--gray-12), var(--gray-0));
+      height: 0.4rem;
+    }
+
+    .tabs-list-item {
+      background: transparent;
+      border: 0;
+      color: light-dark(var(--gray-12), var(--gray-0));
+      cursor: pointer;
+      font: inherit;
+      text-transform: uppercase;
+      font-weight: 500;
+      margin: 0;
+      padding: 1em 2em;
+
+      &:hover {
+        color: light-dark(var(--gray-0), var(--gray-12));
+      }
+
+      &[aria-selected='true'] {
+        color: light-dark(var(--gray-0), var(--gray-12));
+      }
+
+      &.transitioning {
+        color: light-dark(var(--gray-0), var(--gray-12));
+      }
+    }
+  }
+
+  .tab-content-wrapper {
+    display: grid;
+    grid-template-areas: 'element-stack';
+
+    background-color: light-dark(var(--gray-9), var(--gray-10));
+    border: 0.1rem solid var(--gray-6);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    outline: 0.1rem solid var(--gray-6);
+
+    .tab-content {
+      grid-area: element-stack;
+      display: none;
+    }
+  }
+}
+
+/*
+* Deal with axis-y
+**/
+
+.tabs-core {
+  &.axis-y {
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+
+    .tabs-list {
+      flex-direction: column;
+
+      border-bottom: initial;
+      border-left: var(--_tabs-border-bottom);
+      position: relative;
+
+      .tabs-list-item {
+        text-align: left;
+        width: 100%;
+
+        &:hover {
+          /* color: light-dark(var(--gray-0), var(--gray-12)); */
+        }
+
+        &[aria-selected='true'] {
+          /* color: var(--_tabs-active-text); */
+        }
+
+        &.transitioning {
+          /* color: light-dark(var(--gray-0), var(--gray-12)); */
+        }
+      }
+
+      .nav__hovered {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-hovered, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active-indicator {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        scale: var(--_width-active, 0.125) 1;
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: 0.4em;
+      }
+    }
+    .tab-content-wrapper {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

package/app/composables/useDialogControls.ts

@@ -0,0 +1,44 @@
+export const useDialogControls = () => {
+  interface DialogConfig {
+    [key: string]: boolean;
+  }
+
+  interface DialogCallbacks {
+    [key: string]: {
+      onConfirm?: () => void;
+      onCancel?: () => void;
+    };
+  }
+
+  const dialogsConfig = reactive<DialogConfig>({});
+  const dialogCallbacks = reactive<DialogCallbacks>({});
+
+  function initialiseDialogs(dialogIds: string[]) {
+    dialogIds.forEach((id) => {
+      dialogsConfig[id] = false;
+    });
+  }
+
+  function registerDialogCallbacks(dialogId: string, callbacks: { onConfirm?: () => void; onCancel?: () => void }) {
+    dialogCallbacks[dialogId] = callbacks;
+  }
+
+  const controlDialogs = (name: string, state: boolean, action?: 'confirm' | 'cancel') => {
+    if (!state && action && dialogCallbacks[name]) {
+      // Execute callback before closing dialog
+      if (action === 'confirm' && dialogCallbacks[name].onConfirm) {
+        dialogCallbacks[name].onConfirm!();
+      } else if (action === 'cancel' && dialogCallbacks[name].onCancel) {
+        dialogCallbacks[name].onCancel!();
+      }
+    }
+    dialogsConfig[name] = state;
+  };
+
+  return {
+    dialogsConfig,
+    controlDialogs,
+    initialiseDialogs,
+    registerDialogCallbacks,
+  };
+};

package/app/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,
+  };
+};