srcdev-nuxt-components 5.0.3 → 6.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/components/skip-links/SkipLinks.vue

@@ -1,92 +0,0 @@
-<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/components/tabs/TabsCore.vue

@@ -1,277 +0,0 @@
-<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/composables/useDialogControls.ts

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