srcdev-nuxt-components 2.5.18 → 3.0.0

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

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

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

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

@@ -1,7 +0,0 @@
-:root {
-  --accordian-panel-border: 0.1rem solid light-dark(var(--gray-3), var(--gray-6));
-  --accordian-panel-border-radius: 0.4rem;
-  --accordian-panel-mbe: 1.6rem;
-
-  --accordion-trigger-bg: light-dark(var(--gray-3), var(--gray-6));
-}

package/assets/styles/variables/components/_container-glow-core.css

@@ -1,16 +0,0 @@
-.container-glow-wrapper {
-  --container-bg-colour: light-dark(hsl(250, 18%, 93%), hsl(246 44% 7%));
-  --container-border-colour: hsl(280 10% 50% / 1);
-  --card: light-dark(white, hsl(246 44% 7%));
-  --container-border-width: 2px;
-  --container-border-radius: 12px;
-  --gradient: conic-gradient(
-    from 180deg at 50% 70%,
-    hsla(0, 0%, 98%, 1) 0deg,
-    #eec32d 72.0000010728836deg,
-    #fc0303 144.0000021457672deg,
-    #709ab9 216.00000858306885deg,
-    #4dffbf 288.0000042915344deg,
-    hsla(0, 0%, 98%, 1) 1turn
-  );
-}

package/assets/styles/variables/components/_display-dialog-core.css

@@ -1,35 +0,0 @@
-.display-dialog-core {
-  --dialog-border: 0.1rem solid light-dark(var(--gray-8), var(--gray-0));
-  --dialog-outline: 0.1rem solid light-dark(var(--gray-8), var(--gray-0));
-  --dialog-border-radius: 0.4rem;
-
-  --dialog-inner-background: light-dark(var(--gray-0), var(--gray-9));
-
-  /*
-  * Header styles
-  */
-  --dialog-header-padding: 0 1.2rem;
-
-  --dialog-header-button-margin: 0;
-  --dialog-header-button-padding: 0.4rem;
-  --dialog-header-button-border-radius: 50%;
-
-  --dialog-header-button-border: 1px solid transparent;
-  --dialog-header-button-outline: 1px solid transparent;
-
-  --dialog-header-button-border-hover: 1px solid light-dark(var(--gray-8), var(--gray-0));
-  --dialog-header-button-outline-hover: 1px solid light-dark(var(--gray-8), var(--gray-0));
-
-  --dialog-header-button-icon-color: light-dark(var(--gray-8), var(--gray-0));
-  --dialog-header-button-icon-font-size: 1.4rem;
-
-  /*
-  * Header styles
-  */
-  --dialog-content-padding: 1.2rem;
-
-  /*
-  * Footerer styles
-  */
-  --dialog-footer-padding: 1.2rem;
-}

package/assets/styles/variables/components/_tabs.css

@@ -1,18 +0,0 @@
-:root {
-  --tabs-default-text: light-dark(var(--gray-12), var(--gray-0));
-  --tabs-active-bg: light-dark(var(--gray-12), var(--gray-0));
-  --tabs-active-text: light-dark(var(--gray-0), var(--gray-12));
-  --tabs-active-indicator: var(--green-6);
-  --tabs-hovered-bg: light-dark(var(--gray-7), var(--gray-3));
-  --tabs-hovered-text: light-dark(var(--gray-0), var(--gray-12));
-  --tabs-border-bottom: 0px solid var(--green-6);
-
-  --tabs-content-border: 0.1rem solid var(--green-6);
-  --tabs-content-outline: 0.1rem solid var(--green-12);
-  --tabs-content-bg: light-dark(var(--gray-1), var(--gray-8));
-
-  --tabs-content-start-start-radius: 0;
-  --tabs-content-start-end-radius: 0;
-  --tabs-content-end-start-radius: 1rem;
-  --tabs-content-end-end-radius: 1rem;
-}

package/assets/styles/variables/components/display-prompt-core/_scaffolding.css

@@ -1,57 +0,0 @@
-:root {
-  /*
-  * Wrapper styles
-  */
-  --display-prompt-wrapper-border-radius: 0.5rem;
-
-  /*
-  * Inner styles
-  */
-  --display-prompt-inner-margin: 0 0 0 0.7rem;
-  --display-prompt-inner-padding: 1rem 1.5rem;
-  --display-prompt-inner-gap: 1.6rem;
-  --display-prompt-inner-border-radius: 0.2rem;
-
-  /*
-  * Icon styles
-  */
-  --display-prompt-icon-size: 3rem;
-  --display-prompt-icon-weight: normal;
-
-  /*
-  * Title styles
-  */
-  --display-prompt-inner-content-gap: 1rem;
-  --display-prompt-content-margin: 0;
-  --display-prompt-content-padding: 0.2rem;
-
-  /*
-  * Title styles
-  */
-  --display-prompt-content-title-font-size: var(--step-2);
-  --display-prompt-content-title-font-weight: bold;
-  --display-prompt-content-title-line-height: 1.3;
-  --display-prompt-content-title-margin: 0;
-  --display-prompt-content-title-padding: 0;
-
-  /*
-  * Text styles
-  */
-  --display-prompt-content-text-font-size: var(--step-2);
-  --display-prompt-content-text-font-weight: normal;
-  --display-prompt-content-text-line-height: 1.3;
-  --display-prompt-content-title-margin: 0;
-  --display-prompt-content-title-padding: 0;
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-border-radius: 50%;
-  --display-prompt-button-margin: 1rem;
-  --display-prompt-button-padding: 0.5rem;
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-icon-font-size: var(--step-2);
-}

package/assets/styles/variables/components/display-prompt-core/index.css

@@ -1,2 +0,0 @@
-@import './_scaffolding.css';
-@import './themes';

package/assets/styles/variables/components/display-prompt-core/themes/_error.css

@@ -1,39 +0,0 @@
-[data-prompt-theme='error'] {
-  /*
-  * Wrapper styles
-  */
-  --display-prompt-wrapper-background-color: var(--red-8);
-  --display-prompt-wrapper-border: 0.1rem solid var(--red-8);
-  --display-prompt-wrapper-outline: 0.1rem solid var(--red-5);
-
-  /*
-  * Inner styles
-  */
-  --display-prompt-inner-background-color: var(--red-0);
-
-  /*
-  * Icon styles
-  */
-  --display-prompt-icon-color: var(--red-8);
-
-  /*
-  * Title styles
-  */
-  --display-prompt-content-title-color: var(--red-8);
-
-  /*
-  * Text styles
-  */
-  --display-prompt-content-text-color: var(--red-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-border: 0.1rem solid var(--red-8);
-  --display-prompt-button-outline: 0.1rem solid var(--red-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-icon-color: var(--red-8);
-}

package/assets/styles/variables/components/display-prompt-core/themes/_info.css

@@ -1,39 +0,0 @@
-[data-prompt-theme='info'] {
-  /*
-  * Wrapper styles
-  */
-  --display-prompt-wrapper-background-color: var(--blue-8);
-  --display-prompt-wrapper-border: 0.1rem solid var(--blue-8);
-  --display-prompt-wrapper-outline: 0.1rem solid var(--blue-5);
-
-  /*
-  * Inner styles
-  */
-  --display-prompt-inner-background-color: var(--blue-0);
-
-  /*
-  * Icon styles
-  */
-  --display-prompt-icon-color: var(--blue-8);
-
-  /*
-  * Title styles
-  */
-  --display-prompt-content-title-color: var(--blue-8);
-
-  /*
-  * Text styles
-  */
-  --display-prompt-content-text-color: var(--blue-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-border: 0.1rem solid var(--blue-8);
-  --display-prompt-button-outline: 0.1rem solid var(--blue-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-icon-color: var(--blue-8);
-}

package/assets/styles/variables/components/display-prompt-core/themes/_success.css

@@ -1,39 +0,0 @@
-[data-prompt-theme='success'] {
-  /*
-  * Wrapper styles
-  */
-  --display-prompt-wrapper-background-color: var(--green-8);
-  --display-prompt-wrapper-border: 0.1rem solid var(--green-8);
-  --display-prompt-wrapper-outline: 0.1rem solid var(--green-5);
-
-  /*
-  * Inner styles
-  */
-  --display-prompt-inner-background-color: var(--green-0);
-
-  /*
-  * Icon styles
-  */
-  --display-prompt-icon-color: var(--green-8);
-
-  /*
-  * Title styles
-  */
-  --display-prompt-content-title-color: var(--green-8);
-
-  /*
-  * Text styles
-  */
-  --display-prompt-content-text-color: var(--green-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-border: 0.1rem solid var(--green-8);
-  --display-prompt-button-outline: 0.1rem solid var(--green-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-icon-color: var(--green-8);
-}

package/assets/styles/variables/components/display-prompt-core/themes/_warning.css

@@ -1,39 +0,0 @@
-[data-prompt-theme='warning'] {
-  /*
-  * Wrapper styles
-  */
-  --display-prompt-wrapper-background-color: var(--orange-8);
-  --display-prompt-wrapper-border: 0.1rem solid var(--orange-8);
-  --display-prompt-wrapper-outline: 0.1rem solid var(--orange-5);
-
-  /*
-  * Inner styles
-  */
-  --display-prompt-inner-background-color: var(--orange-0);
-
-  /*
-  * Icon styles
-  */
-  --display-prompt-icon-color: var(--orange-8);
-
-  /*
-  * Title styles
-  */
-  --display-prompt-content-title-color: var(--orange-8);
-
-  /*
-  * Text styles
-  */
-  --display-prompt-content-text-color: var(--orange-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-border: 0.1rem solid var(--orange-8);
-  --display-prompt-button-outline: 0.1rem solid var(--orange-8);
-
-  /*
-  * Button styles
-  */
-  --display-prompt-button-icon-color: var(--orange-8);
-}

package/assets/styles/variables/components/display-prompt-core/themes/index.css

@@ -1,4 +0,0 @@
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_info';

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

@@ -1,5 +0,0 @@
-@import './_accordian';
-@import './_tabs';
-@import './display-prompt-core';
-@import './_display-dialog-core';
-@import './_container-glow-core.css';

package/assets/styles/variables/index.css

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

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/clip-element/ClipElement.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="clip-element-wrapper" ref="container" :class="elementClasses">
-    <div class="clipped-element" :style="`--_clip-path: inset(${clipOffset}px 0 0 0)`" ref="clipElement">
-      <slot name="default"></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-const props = defineProps({
-  maxClip: {
-    type: Number,
-    default: 100,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-
-const container = ref(null);
-const clipElement = ref<HTMLDivElement | null>(null);
-const clipOffset = ref(0);
-
-const updateClip = () => {
-
-  if (clipElement.value) {
-
-    const topPosition = Math.floor(clipElement.value.getBoundingClientRect().top);
-
-    if (topPosition < props.maxClip && topPosition > 0) {
-      clipOffset.value = props.maxClip - topPosition;
-    }
-    else if (topPosition < 0) {
-      clipOffset.value = props.maxClip + Math.abs(topPosition);
-    }
-    else if (topPosition > props.maxClip) {
-      clipOffset.value = 0;
-    }
-  }
-};
-
-onMounted(() => {
-
-  if (import.meta.client) {
-    updateClip(); // Initial check
-    window.addEventListener('scroll', updateClip, { passive: true });
-  }
-
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', updateClip);
-});
-
-
-</script>
-
-<style lang="css">
-.clip-element-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-.clipped-element {
-  width: 100%;
-  clip-path: var(--_clip-path);
-  display: block;
-}
-</style>