srcdev-nuxt-components 6.1.3 → 6.1.5

package/README.md

@@ -12,8 +12,8 @@ npm install --save srcdev-nuxt-components
 
 ```ts
 defineNuxtConfig({
-  extends: 'srcdev-nuxt-components',
-});
+  extends: "srcdev-nuxt-components",
+})
 ```
 
 ## Styles Architecture
@@ -49,7 +49,7 @@ The setup layer provides the foundational styles and utilities:
 - **Responsive Font Sizes** - Fluid typography using clamp() functions:
   - `--step-8` to `--step-1` providing 8 responsive font size steps
 - **Utility Classes** - Pre-built typography classes:
-  - `.heading-1` through `.heading-5` - Semantic heading styles
+  - `.page-heading-1` through `.page-heading-5` - Semantic heading styles
   - Generic font weight and variation settings
 - **Font Variation Settings** - Advanced typography controls
 

package/app/components/carousel-basic/CarouselBasic.vue

@@ -1,11 +1,30 @@
 <template>
-  <section class="carousel-basic" :class="[elementClasses]" ref="carouselWrapperRef" role="region" aria-label="Image carousel">
+  <section
+    class="carousel-basic"
+    :class="[elementClasses]"
+    ref="carouselWrapperRef"
+    role="region"
+    aria-label="Image carousel"
+  >
     <!-- Screen reader announcement for current item -->
     <div aria-live="polite" aria-atomic="true" class="sr-only">Item {{ currentIndex + 1 }} of {{ itemCount }}</div>
 
     <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-      <div tabindex="0" class="item-container" :class="{ 'allow-overflow': allowCarouselOverflow }" ref="carouselContainerRef" role="group" aria-label="Carousel items">
-        <div v-for="(item, index) in carouselDataIds" :key="index" class="item" ref="carouselItems" :aria-current="currentIndex === index ? 'true' : 'false'">
+      <div
+        tabindex="0"
+        class="item-container"
+        :class="{ 'allow-overflow': allowCarouselOverflow }"
+        ref="carouselContainerRef"
+        role="group"
+        aria-label="Carousel items"
+      >
+        <div
+          v-for="(item, index) in carouselDataIds"
+          :key="index"
+          class="item"
+          ref="carouselItems"
+          :aria-current="currentIndex === index ? 'true' : 'false'"
+        >
           <slot :name="item"></slot>
         </div>
       </div>
@@ -24,7 +43,12 @@
         <div class="markers-container">
           <ul class="markers-list">
             <li v-for="index in itemCount" :key="index" class="markers-item">
-              <button @click.prevent="jumpToFrame(index - 1)" class="btn-marker" :class="[{ active: currentIndex === index - 1 }]" :aria-label="`Jump to item ${Math.floor(index + 1)}`"></button>
+              <button
+                @click.prevent="jumpToFrame(index - 1)"
+                class="btn-marker"
+                :class="[{ active: currentIndex === index - 1 }]"
+                :aria-label="`Jump to item ${Math.floor(index + 1)}`"
+              ></button>
             </li>
           </ul>
         </div>
@@ -42,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 
 const props = defineProps({
   carouselDataIds: {
@@ -65,108 +89,108 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const carouselWrapperRef = ref<HTMLDivElement | null>(null);
-const carouselContainerRef = ref<HTMLDivElement | null>(null);
-const carouselItemsRef = useTemplateRef<HTMLDivElement[]>('carouselItems');
-const controlsContainerRef = ref<HTMLDivElement | null>(null);
-const carouselInitComplete = ref(false);
+const carouselWrapperRef = ref<HTMLDivElement | null>(null)
+const carouselContainerRef = ref<HTMLDivElement | null>(null)
+const carouselItemsRef = useTemplateRef<HTMLDivElement[]>("carouselItems")
+const controlsContainerRef = ref<HTMLDivElement | null>(null)
+const carouselInitComplete = ref(false)
 
-const currentIndex = ref(0);
-const itemCount = ref(props.carouselDataIds.length);
-const offset = ref(0);
-const transitionSpeedStr = props.transitionSpeed + 'ms';
+const currentIndex = ref(0)
+const itemCount = ref(props.carouselDataIds.length)
+const offset = ref(0)
+const transitionSpeedStr = props.transitionSpeed + "ms"
 const itemTransform = computed(() => {
-  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`;
-});
+  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`
+})
 
-const itemWidth = ref('0px');
+const itemWidth = ref("0px")
 
 const actionPrevious = () => {
   if (props.returnToStart && currentIndex.value === 0) {
-    offset.value = -itemCount.value;
-    doAction();
+    offset.value = -itemCount.value
+    doAction()
   }
 
   if (offset.value >= 0) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value + 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value + 1)
+  doAction()
+}
 
 const actionNext = () => {
   if (props.returnToStart && offset.value <= -1 * (itemCount.value - 1)) {
-    offset.value = 0;
-    doAction();
-    return;
+    offset.value = 0
+    doAction()
+    return
   }
 
   if (offset.value <= -1 * (itemCount.value - 1)) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value - 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value - 1)
+  doAction()
+}
 
 const doAction = () => {
-  currentIndex.value = Math.abs(offset.value);
-};
+  currentIndex.value = Math.abs(offset.value)
+}
 
 const jumpToFrame = (index: number) => {
   if (index >= 0 && index < itemCount.value) {
-    offset.value = -index;
-    doAction();
+    offset.value = -index
+    doAction()
   }
-};
+}
 
 const initialSetup = () => {
   if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
-    itemWidth.value = carouselItemsRef.value[0].offsetWidth + 'px';
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth + "px"
   }
 
-  carouselInitComplete.value = true;
-};
+  carouselInitComplete.value = true
+}
 
 const { direction } = useSwipe(carouselContainerRef, {
   passive: false,
   onSwipeEnd() {
-    if (direction.value === 'left') {
-      actionNext();
-    } else if (direction.value === 'right') {
-      actionPrevious();
+    if (direction.value === "left") {
+      actionNext()
+    } else if (direction.value === "right") {
+      actionPrevious()
     }
   },
-});
+})
 
-useEventListener(carouselContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(carouselContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
-useEventListener(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(controlsContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
 useResizeObserver(carouselWrapperRef, async () => {
-  initialSetup();
-});
+  initialSetup()
+})
 
 onMounted(() => {
-  initialSetup();
-});
+  initialSetup()
+})
 </script>
 
 <style lang="css">
@@ -203,7 +227,7 @@ onMounted(() => {
       position: relative;
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         height: 2px;
         background-color: #fff;

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -11,7 +11,7 @@
           </button>
 
           <div class="navigation-group-panel" popover role="menu" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
               <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
                 <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
+const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
 
 interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinks?: ResponsiveHeaderNavItem[];
-  childLinksTitle?: string;
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinks?: ResponsiveHeaderNavItem[]
+  childLinksTitle?: string
 }
 </script>
 
@@ -40,9 +40,9 @@ interface ResponsiveHeaderNavItem {
 const props = defineProps({
   tag: {
     type: String,
-    default: 'nav',
+    default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return TAGS_ALLOWED.includes(value)
     },
   },
   navLinks: {
@@ -53,17 +53,17 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 // const detailsRef = useTemplateRef('detailsRef');
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
@@ -85,7 +85,7 @@ watch(
 
     container-type: inline-size;
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
 
     .inner {
       grid-area: element-stack;

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -9,7 +9,7 @@
             <Icon name="bi:caret-down-fill" class="icon" />
           </summary>
           <div class="navigation-group-panel" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
               <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
                 <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
@@ -23,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside } from "@vueuse/core"
 
 const props = defineProps({
   tag: {
     type: String,
-    default: 'nav',
+    default: "nav",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return TAGS_ALLOWED.includes(value)
     },
   },
   navLinks: {
@@ -41,37 +41,37 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const navigationGroupRef = useTemplateRef<HTMLElement[]>('navigationGroupRef');
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef")
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 
 onMounted(() => {
   navigationGroupRef.value?.forEach((element, index) => {
     onClickOutside(element, () => {
-      navigationGroupRef.value?.[index]?.removeAttribute('open');
-    });
-  });
-});
+      navigationGroupRef.value?.[index]?.removeAttribute("open")
+    })
+  })
+})
 </script>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
+const TAGS_ALLOWED = <string[]>["div", "section", "nav", "ul", "ol"]
 
 interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinksTitle?: string
+  childLinks?: ResponsiveHeaderNavItem[]
 }
 </script>
 
@@ -80,7 +80,7 @@ interface ResponsiveHeaderNavItem {
   .deep-expanding-menu-old {
     container-type: inline-size;
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
     align-items: center;
     gap: 12px;
 
@@ -117,7 +117,7 @@ interface ResponsiveHeaderNavItem {
         --_icon-transform: scaleY(1);
 
         display: grid;
-        grid-template-areas: 'details-stack';
+        grid-template-areas: "details-stack";
         z-index: 1;
         position: relative;
 

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -4,12 +4,7 @@
     :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]"
     :data-test-id="`display-prompt-core-${theme}`"
   >
-    <div
-      class="display-prompt-wrapper"
-      :data-component-theme="theme"
-      :class="[elementClasses]"
-      data-test-id="display-prompt"
-    >
+    <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
           <slot name="customDecoratorIcon">
@@ -106,11 +101,11 @@ const dismissPrompt = () => {
   }
 
   .display-prompt-wrapper {
-    background-color: var(--component-theme-0);
-    border: 1px solid var(--component-theme-8);
+    background-color: var(--colour-theme-0);
+    border: 1px solid var(--colour-theme-8);
     border-radius: 4px;
 
-    border-inline-start: 8px solid var(--component-theme-8);
+    border-inline-start: 8px solid var(--colour-theme-8);
     border-start-start-radius: 8px;
     border-end-start-radius: 8px;
 
@@ -127,7 +122,7 @@ const dismissPrompt = () => {
       .display-prompt-icon {
         display: inline-flex;
         .icon {
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           display: inline-block;
           font-size: 3rem;
           font-style: normal;
@@ -148,7 +143,7 @@ const dismissPrompt = () => {
           font-size: var(--step-5);
           font-weight: bold;
           line-height: 1.3;
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           margin: 0;
           padding: 0;
         }
@@ -157,7 +152,7 @@ const dismissPrompt = () => {
           font-size: var(--step-5);
           font-weight: normal;
           line-height: 1.3;
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           margin: 0;
           padding: 0;
         }
@@ -169,26 +164,26 @@ const dismissPrompt = () => {
         justify-content: center;
         margin: 1rem;
         padding: 0.5rem;
-        border: 0.1rem solid var(--component-theme-8);
+        border: 0.1rem solid var(--colour-theme-8);
         border-radius: 50%;
-        outline: 1px solid var(--component-theme-3);
+        outline: 1px solid var(--colour-theme-3);
 
         transition: border 200ms ease-in-out, outline 200ms ease-in-out;
 
         &:hover {
           cursor: pointer;
-          border: 0.1rem solid var(--component-theme-12);
-          outline: 2px solid var(--component-theme-6);
+          border: 0.1rem solid var(--colour-theme-12);
+          outline: 2px solid var(--colour-theme-6);
         }
 
         &:focus-visible {
           box-shadow: var(--focus-box-shadow-colour-on);
-          border: 0.1rem solid var(--component-theme-12);
-          outline: 2px solid var(--component-theme-6);
+          border: 0.1rem solid var(--colour-theme-12);
+          outline: 2px solid var(--colour-theme-6);
         }
 
         .icon {
-          color: var(--component-theme-8);
+          color: var(--colour-theme-8);
           display: block;
           font-size: var(--step-5);
           padding: 1rem;

package/app/components/marquee-scroller/MarqueeScroller.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-if="displayComponent" class="marquee-scroller" :reverse>
+    <ul class="list">
+      <li v-for="item in marqueeData" :key="item.id" class="item" :style="{ '--position': item.id }">
+        <slot :name="item.id"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  animationRuntime: {
+    type: String,
+    default: "40s",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  marqueeData: {
+    type: Array as PropType<Array<{ id: number; content: string }>>,
+    default: () => [],
+  },
+  itemConfig: {
+    type: Object,
+    default: () => ({
+      width: "50px",
+      height: "50px",
+      quantity: 30,
+    }),
+    required: true,
+  },
+})
+
+const displayComponent = ref(false)
+
+const height = computed(() => props.itemConfig.height)
+const quantity = computed(() => props.itemConfig.quantity)
+const width = computed(() => props.itemConfig.width)
+
+const animationRuntimeNumber = computed(() => {
+  const [seconds] = props.animationRuntime.split("s")
+  return parseFloat(seconds ?? "0")
+})
+
+const animationDelay = computed(() => {
+  return Math.floor(animationRuntimeNumber.value * 1.25) + "s"
+})
+
+onMounted(() => {
+  console.log(`Mounted: quantity(${quantity.value}) | animationDelay(${animationDelay.value})`)
+  displayComponent.value = true
+})
+</script>
+
+<style lang="css">
+.marquee-scroller {
+  width: 100%;
+  height: v-bind(height);
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
+
+  &:hover .item {
+    animation-play-state: paused !important;
+    filter: grayscale(1);
+  }
+
+  &[reverse="true"] .item {
+    animation: reversePlay v-bind(animationRuntime) linear infinite;
+  }
+
+  .list {
+    display: flex;
+    width: 100%;
+    height: v-bind(height);
+    min-width: calc(v-bind(width) * v-bind(quantity));
+    position: relative;
+
+    .item {
+      width: v-bind(width);
+      height: v-bind(height);
+      display: grid;
+      place-items: center;
+      position: absolute;
+      aspect-ratio: 1 / 1;
+      left: 100%;
+      animation: autoRun v-bind(animationRuntime) linear infinite;
+      transition: filter 0.5s;
+      /* animation-delay: calc((50s / v-bind(quantity)) * (var(--position) - 1) - 50s) !important; */
+      animation-delay: calc(
+        (v-bind(animationDelay) / v-bind(quantity)) * (var(--position) - 1) - v-bind(animationDelay)
+      ) !important;
+
+      border: 1px solid light-dark(var(--gray-12), var(--gray-0));
+      border-radius: 4px;
+
+      &:hover {
+        filter: grayscale(0);
+      }
+    }
+  }
+}
+
+@keyframes autoRun {
+  from {
+    left: 100%;
+  }
+  to {
+    left: calc(v-bind(width) * -1);
+  }
+}
+
+@keyframes reversePlay {
+  from {
+    left: calc(v-bind(width) * -1);
+  }
+  to {
+    left: 100%;
+  }
+}
+</style>