srcdev-nuxt-components 5.0.3 → 6.0.0

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

@@ -1,15 +0,0 @@
-: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/assets/styles/setup/variables/colors/_red.css

@@ -1,15 +0,0 @@
-: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/assets/styles/setup/variables/colors/_yellow.css

@@ -1,15 +0,0 @@
-: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/assets/styles/setup/variables/colors/index.css

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

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

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

package/components/accordian/AccordianCore.vue

@@ -1,46 +0,0 @@
-<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 #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/components/animated-svg-text/AnimatedSvgText.vue

@@ -1,87 +0,0 @@
-<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/components/canvas-switcher/CanvasSwitcher.vue

@@ -1,77 +0,0 @@
-<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/components/carousel-basic/CarouselBasic.vue

@@ -1,291 +0,0 @@
-<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>