srcdev-nuxt-components 9.4.6 → 9.4.8

package/app/components/rotating-carousel/RotatingCarouselImage.vue

@@ -1,216 +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 setup lang="ts">
-interface CarouselImageData {
-  src: string
-  alt: string
-}
-
-const props = defineProps({
-  data: {
-    type: Array as PropType<CarouselImageData[]>,
-    default: () => [],
-  },
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return [
-        "div",
-        "p",
-        "span",
-        "section",
-        "article",
-        "aside",
-        "header",
-        "footer",
-        "main",
-        "nav",
-        "ul",
-        "ol",
-      ].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: [String, Array] as PropType<string | 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">
-@layer components {
-/* @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

@@ -1,60 +0,0 @@
-<template>
-  <div class="home-link-navigation">
-    <div v-if="slots.homeLink" class="home-link">
-      <slot name="homeLink"></slot>
-    </div>
-    <nav class="skip-links-nav" aria-label="Skip navigation">
-      <a ref="skipLink" href="#main-content" class="skip-link">Skip to main content</a>
-      <a href="#footer-content" class="skip-link">Skip to footer</a>
-    </nav>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const slots = useSlots();
-</script>
-
-<style lang="css">
-@layer components {
-  .home-link-navigation {
-    position: relative;
-
-    .skip-links-nav {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 1000;
-
-      display: flex;
-      flex-direction: column;
-      gap: 0.2rem;
-      background-color: black;
-      border: 1px solid white;
-      padding: 0.2rem;
-      margin: 0;
-
-      /* Hidden off-screen via transform — does NOT break keyboard focusability */
-      opacity: 0;
-      transform: translateY(-100%);
-      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-
-      &:focus-within {
-        opacity: 1;
-        transform: translateY(0);
-      }
-
-      .skip-link {
-        display: block;
-        color: white;
-        text-decoration: none;
-        padding: 0.8rem 1.2rem;
-        text-wrap: nowrap;
-
-        &:focus-visible {
-          outline: 2px solid white;
-        }
-      }
-    }
-  }
-}
-</style>

package/app/components/tabs/TabsCore.vue

@@ -1,306 +0,0 @@
-<template>
-  <div class="tabs-core" :class="`axis-${axis}`">
-    <ul
-      ref="tabsNavRef"
-      role="tablist"
-      aria-labelledby="channel-name"
-      class="tabs-list"
-      :class="[elementClasses]"
-      @mouseleave="resetHoverToActivePosition()"
-    >
-      <li v-for="(index, key) in itemCount" :key="key">
-        <button
-          :id="`tab-${key}-trigger`"
-          :data-tab-index="key"
-          data-nav-item
-          role="tab"
-          aria-selected="false"
-          class="tabs-list-item"
-          @click.prevent="navItemClicked($event)"
-          @mouseover="navItemHovered($event)"
-        >
-          <slot :name="`tab-${key}-trigger`"></slot>
-        </button>
-      </li>
-    </ul>
-    <div class="tab-content-wrapper">
-      <div
-        v-for="(item, key) in itemCount"
-        :id="`tab-${key}-content`"
-        :key="key"
-        ref="tabsContentRefs"
-        class="tab-content"
-        :aria-labelledby="`tab-${key}-trigger`"
-        role="region"
-        aria-hidden="true"
-      >
-        <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: [String, Array] as PropType<string | 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">
-@layer components {
-.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(--slate-07), var(--slate-03));
-      color: light-dark(var(--slate-00), var(--slate-10));
-    }
-
-    .nav__active {
-      background: light-dark(var(--slate-10), var(--slate-00));
-      color: light-dark(var(--slate-00), var(--slate-10));
-    }
-
-    .nav__active-indicator {
-      background: light-dark(var(--slate-10), var(--slate-00));
-      height: 0.4rem;
-    }
-
-    .tabs-list-item {
-      background: transparent;
-      border: 0;
-      color: light-dark(var(--slate-10), var(--slate-00));
-      cursor: pointer;
-      font: inherit;
-      text-transform: uppercase;
-      font-weight: 500;
-      margin: 0;
-      padding: 1em 2em;
-
-      &:hover {
-        color: light-dark(var(--slate-00), var(--slate-10));
-      }
-
-      &[aria-selected="true"] {
-        color: light-dark(var(--slate-00), var(--slate-10));
-      }
-
-      &.transitioning {
-        color: light-dark(var(--slate-00), var(--slate-10));
-      }
-    }
-  }
-
-  .tab-content-wrapper {
-    display: grid;
-    grid-template-areas: "element-stack";
-
-    background-color: light-dark(var(--slate-09), var(--slate-10));
-    border: 0.1rem solid var(--slate-06);
-    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(--slate-06);
-
-    .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(--slate-00), var(--slate-10)); */
-        }
-
-        &[aria-selected="true"] {
-          /* color: var(--_tabs-active-text); */
-        }
-
-        &.transitioning {
-          /* color: light-dark(var(--slate-00), var(--slate-10)); */
-        }
-      }
-
-      .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/components/typography/HeaderBlock.vue

@@ -1,35 +0,0 @@
-<template>
-  <component :is="tag" :class="[classLevelClass, elementClasses]">
-    <slot></slot>
-  </component>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  tagLevel?: number | string
-  classLevel?: number | string
-  styleClassPassthrough?: string | string[]
-}>()
-
-const tagLevel = computed(() => {
-  const n = Number(props.tagLevel ?? 1)
-  return [1, 2, 3, 4, 5, 6].includes(n) ? n : 1
-})
-
-const classLevel = computed(() => {
-  const n = Number(props.classLevel ?? 1)
-  return [1, 2, 3, 4, 5, 6].includes(n) ? n : 1
-})
-
-const tag = computed(() => `h${tagLevel.value}`)
-const classLevelClass = computed(() => `page-heading-${classLevel.value}`)
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough ?? [])
-
-watch(
-  () => props.styleClassPassthrough,
-  (newVal) => {
-    resetElementClasses(newVal ?? [])
-  }
-)
-</script>