srcdev-nuxt-components 3.0.0 → 4.0.0

package/assets/styles/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/assets/styles/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/assets/styles/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/assets/styles/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/assets/styles/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/assets/styles/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/assets/styles/variables/colors/colors.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/assets/styles/variables/index.css

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

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

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