srcdev-nuxt-components 6.0.0 → 6.0.1

package/app/assets/styles/setup/utility-classes/index.css

@@ -0,0 +1,2 @@
+@import './_fluid-spacing';
+@import './animations/';

package/app/assets/styles/setup/variables/colors/_blue.css

@@ -0,0 +1,15 @@
+:root {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0e01cd;
+}

package/app/assets/styles/setup/variables/colors/_gray.css

@@ -0,0 +1,16 @@
+:root {
+  --gray-00: #ffffff;
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+}

package/app/assets/styles/setup/variables/colors/_green.css

@@ -0,0 +1,15 @@
+:root {
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #017f18;
+}

package/app/assets/styles/setup/variables/colors/_orange.css

@@ -0,0 +1,15 @@
+:root {
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #ff7400;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #c23903;
+}

package/app/assets/styles/setup/variables/colors/_red.css

@@ -0,0 +1,15 @@
+:root {
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #ff0b0b;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #cc0000;
+}

package/app/assets/styles/setup/variables/colors/_yellow.css

@@ -0,0 +1,15 @@
+:root {
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
+}

package/app/assets/styles/setup/variables/colors/index.css

@@ -0,0 +1,6 @@
+@import './_blue.css';
+@import './_gray.css';
+@import './_green.css';
+@import './_orange.css';
+@import './_red.css';
+@import './_yellow.css';

package/app/assets/styles/setup/variables/index.css

@@ -0,0 +1 @@
+@import './colors';

package/app/components/accordian/AccordianCore.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="display-accordian" :class="[elementClasses]">
+    <ExpandingPanel v-for="(item, key) in itemCount" :key="key" :name :animation-duration="300" icon-size="medium" :style-class-passthrough="['accordian-item']">
+      <template #summary>
+        <slot :name="`accordian-${key}-summary`"></slot>
+      </template>
+      <template #icon>
+        <slot :name="`accordian-${key}-icon`"></slot>
+      </template>
+      <template #layout-content>
+        <slot :name="`accordian-${key}-content`"></slot>
+      </template>
+    </ExpandingPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    default: null,
+  },
+  itemCount: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  animationDuration: {
+    type: Number,
+    default: 400,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+</script>
+
+<style lang="css">
+.display-accordian {
+  max-width: 600px;
+  margin: 0 auto;
+}
+</style>

package/app/components/animated-svg-text/AnimatedSvgText.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="animated-svg-text" :class="[elementClasses]">
+    <slot name="text"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+
+@keyframes animatedSvgText {
+  0% {
+    fill: transparent;
+    stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
+    stroke-width: 0.3;
+  }
+  70% {
+    fill: transparent;
+    stroke-width: 0.3;
+  }
+  100% {
+    fill: var(--_animated-svg-fill-color);
+    stroke-dashoffset: 0;
+    stroke-width: 0;
+  }
+}
+
+html {
+
+  &[data-color-scheme='light'] {
+    .animated-svg-text {
+      --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
+      --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
+    }
+  }
+  &[data-color-scheme='dark'] {
+    .animated-svg-text {
+      --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
+      --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
+    }
+  }
+  &[data-color-scheme='auto'] {
+    .animated-svg-text {
+      @media (prefers-color-scheme: light) {
+        --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
+        --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
+        --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
+      }
+    }
+  }
+
+  .animated-svg-text {
+
+    --_animated-svg-text-color: var(--_animated-svg-text-stroke-light):
+    --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
+
+    svg path {
+      stroke: var(--_animated-svg-text-color);
+      stroke-width: 0.3;
+      stroke-dasharray: var(--_animated-svg-text-stroke-dasharray);
+      stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
+      animation: animatedSvgText var(--_animated-svg-animation-duration) linear 1 forwards;
+    }
+  }
+
+}
+</style>

package/app/components/canvas-switcher/CanvasSwitcher.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="canvas-switcher">
+    <p>Canvas switcher</p>
+    <ul class="canvas-switcher mbe-20">
+      <li>
+        <button type="button" @click.stop.prevent="updateCanvas('mobileCanvas')">
+          <Icon name="ic:baseline-phone-iphone" class="icon" :class="[{ current: canvasName === 'mobileCanvas' }]" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click.stop.prevent="updateCanvas('tabletCanvas')">
+          <Icon name="ic:baseline-tablet-mac" class="icon" :class="[{ current: canvasName === 'tabletCanvas' }]" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click.stop.prevent="updateCanvas('laptopCanvas')">
+          <Icon name="ic:baseline-laptop-mac" class="icon" :class="[{ current: canvasName === 'laptopCanvas' }]" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click.stop.prevent="updateCanvas('desktopCanvas')">
+          <Icon name="ic:outline-desktop-mac" class="icon" :class="[{ current: canvasName === 'desktopCanvas' }]" />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MediaCanvas } from '@/types/types.canvasName';
+
+const canvasName = defineModel<MediaCanvas>('canvasName');
+
+const updateCanvas = (setCanvas: MediaCanvas) => {
+  canvasName.value = setCanvas;
+};
+</script>
+
+<style lang="css">
+.canvas-switcher {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+
+  ul {
+    display: flex;
+    gap: 10px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      button {
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5px;
+        border: 0px solid light-dark(var(--gray-10), var(--gray-2));
+        border-radius: 4px;
+        cursor: pointer;
+
+        .icon {
+          color: light-dark(var(--gray-10), var(--gray-2));
+
+          width: 24px;
+          height: 24px;
+
+          &.current {
+            color: light-dark(var(--green-10), var(--green-4));
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,291 @@
+<template>
+  <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'">
+          <slot :name="item"></slot>
+        </div>
+      </div>
+    </LayoutRow>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div class="timeline-container">
+        <div v-for="index in itemCount" :key="index" class="timeline-item">
+          <div class="count">Step {{ index }}</div>
+        </div>
+      </div>
+    </LayoutRow>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div tabindex="0" class="controls-container" ref="controlsContainerRef">
+        <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>
+            </li>
+          </ul>
+        </div>
+        <div class="buttons-container">
+          <button type="button" @click.prevent="actionPrevious()" class="btn-action" aria-label="Go to previous item">
+            <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+          </button>
+          <button type="button" @click.prevent="actionNext()" class="btn-action" aria-label="Go to next item">
+            <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+          </button>
+        </div>
+      </div>
+    </LayoutRow>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+
+const props = defineProps({
+  carouselDataIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 200,
+  },
+  allowCarouselOverflow: {
+    type: Boolean,
+    default: false,
+  },
+  returnToStart: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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 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))))`;
+});
+
+const itemWidth = ref('0px');
+
+const actionPrevious = () => {
+  if (props.returnToStart && currentIndex.value === 0) {
+    offset.value = -itemCount.value;
+    doAction();
+  }
+
+  if (offset.value >= 0) {
+    return;
+  }
+
+  offset.value = Math.min(offset.value + 1);
+  doAction();
+};
+
+const actionNext = () => {
+  if (props.returnToStart && offset.value <= -1 * (itemCount.value - 1)) {
+    offset.value = 0;
+    doAction();
+    return;
+  }
+
+  if (offset.value <= -1 * (itemCount.value - 1)) {
+    return;
+  }
+
+  offset.value = Math.min(offset.value - 1);
+  doAction();
+};
+
+const doAction = () => {
+  currentIndex.value = Math.abs(offset.value);
+};
+
+const jumpToFrame = (index: number) => {
+  if (index >= 0 && index < itemCount.value) {
+    offset.value = -index;
+    doAction();
+  }
+};
+
+const initialSetup = () => {
+  if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth + 'px';
+  }
+
+  carouselInitComplete.value = true;
+};
+
+const { direction } = useSwipe(carouselContainerRef, {
+  passive: false,
+  onSwipeEnd() {
+    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(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
+  if (event.key === 'ArrowLeft') {
+    actionPrevious();
+  } else if (event.key === 'ArrowRight') {
+    actionNext();
+  }
+});
+
+useResizeObserver(carouselWrapperRef, async () => {
+  initialSetup();
+});
+
+onMounted(() => {
+  initialSetup();
+});
+</script>
+
+<style lang="css">
+.carousel-basic {
+  --_carousel-item-track-gap: 10px;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .timeline-container {
+    display: flex;
+    gap: var(--_carousel-item-track-gap);
+    overflow-x: hidden;
+
+    .timeline-item {
+      display: flex;
+      flex: 0 0 100%;
+      max-inline-size: 800px;
+      align-items: center;
+      transform: v-bind(itemTransform);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        height: 2px;
+        background-color: #fff;
+        left: 70px;
+        right: 0;
+      }
+
+      .count {
+        width: fit-content;
+      }
+    }
+  }
+
+  .item-container {
+    display: flex;
+    gap: var(--_carousel-item-track-gap);
+    overflow-x: hidden;
+    position: relative;
+
+    &.allow-overflow {
+      overflow-x: initial;
+    }
+
+    .item {
+      display: flex;
+      flex: 0 0 100%;
+      max-inline-size: 800px;
+      transition: transform v-bind(transitionSpeedStr) ease;
+      transform: v-bind(itemTransform);
+    }
+  }
+
+  .controls-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .markers-container {
+      .markers-list {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        list-style-type: none;
+        margin: unset;
+        padding: unset;
+
+        .markers-item {
+          .btn-marker {
+            border: none;
+            outline: none;
+            box-shadow: none;
+            cursor: pointer;
+            transition: background-color v-bind(transitionSpeedStr) linear;
+
+            &.active {
+              background-color: red;
+            }
+          }
+        }
+      }
+    }
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 20px;
+
+      .btn-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        cursor: pointer;
+        height: fit-content;
+
+        .arrows-icon {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+}
+</style>