srcdev-nuxt-components 2.1.10 → 2.1.12

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

@@ -0,0 +1,53 @@
+<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 textAnimation {
+  0% {
+    stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
+    stroke-width: 0.3;
+  }
+  70% {
+    fill: transparent;
+    stroke-width: 0.3;
+  }
+  100% {
+    fill: var(--_animated-svg-text-color);
+    stroke-dashoffset: 0;
+    stroke-width: 0;
+  }
+}
+.animated-svg-text {
+  /* Component styles */
+
+  svg path {
+    fill: transparent;
+    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: textAnimation 4s ease-in-out 1 forwards;
+  }
+}
+</style>

package/components/display-details/DisplayDetailsCore.vue

@@ -5,7 +5,7 @@
         <slot name="summary"></slot>
       </span>
       <slot name="summaryIcon">
-        <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconsSize" />
+        <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconSize" />
       </slot>
     </summary>
     <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
@@ -234,70 +234,72 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.display-details {
-  /* Component setup */
-  --_display-details-icon-transform: scaleY(1);
-  --_display-details-icon-size: 1.2rem;
-
-  /* Configurable properties */
-  --_display-details-border: none;
-  --_display-details-outline: none;
-  --_display-details-box-shadow: none;
-  --_display-details-border-radius: 0;
-  --_display-details-mbe: 1em;
-
-  --_display-details-summary-gap: 12px;
-  --_display-details-summary-flex-direction: row;
+@scope (.display-details) {
+  .display-details {
+    /* Component setup */
+    --_display-details-icon-transform: scaleY(1);
+    --_display-details-icon-size: 1.2rem;
+
+    /* Configurable properties */
+    --_display-details-border: none;
+    --_display-details-outline: none;
+    --_display-details-box-shadow: none;
+    --_display-details-border-radius: 0;
+    --_display-details-mbe: 1em;
+
+    --_display-details-summary-gap: 12px;
+    --_display-details-summary-flex-direction: row;
+
+    --_display-details-content-padding: 0;
+
+    &.medium {
+      --_display-details-icon-size: 1.8rem;
+    }
+    &.large {
+      --_display-details-icon-size: 2.4rem;
+    }
 
-  --_display-details-content-padding: 0;
+    &[open] {
+      --_display-details-icon-transform: scaleY(-1);
+    }
 
-  &.medium {
-    --_display-details-icon-size: 1.8rem;
-  }
-  &.large {
-    --_display-details-icon-size: 2.4rem;
-  }
+    border: var(--_display-details-border);
+    outline: var(--_display-details-outline);
+    box-shadow: var(--_display-details-box-shadow);
+    border-radius: var(--_display-details-border-radius);
+    margin-block-end: var(--_display-details-mbe);
 
-  &[open] {
-    --_display-details-icon-transform: scaleY(-1);
-  }
+    .display-details-summary {
+      list-style: none;
 
-  border: var(--_display-details-border);
-  outline: var(--_display-details-outline);
-  box-shadow: var(--_display-details-box-shadow);
-  border-radius: var(--_display-details-border-radius);
-  margin-block-end: var(--_display-details-mbe);
+      &::-webkit-details-marker,
+      &::marker {
+        display: none;
+      }
 
-  .display-details-summary {
-    list-style: none;
+      display: flex !important;
+      flex-direction: var(--_display-details-summary-flex-direction);
+      align-items: center;
+      gap: var(--_display-details-summary-gap);
+      overflow: clip;
 
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-    }
+      .label {
+        display: block;
+        flex-grow: 1;
+      }
 
-    display: flex !important;
-    flex-direction: var(--_display-details-summary-flex-direction);
-    align-items: center;
-    gap: var(--_display-details-summary-gap);
-    overflow: clip;
+      .icon {
+        display: block;
 
-    .label {
-      display: block;
-      flex-grow: 1;
+        font-size: var(--_display-details-icon-size);
+        transform: var(--_display-details-icon-transform);
+        transition: transform 200ms;
+      }
     }
 
-    .icon {
-      display: block;
-
-      font-size: var(--_display-details-icon-size);
-      transform: var(--_display-details-icon-transform);
-      transition: transform 200ms;
+    .display-details-content {
+      padding: var(--_display-details-content-padding);
     }
   }
-
-  .display-details-content {
-    padding: var(--_display-details-content-padding);
-  }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.1.10",
+  "version": "2.1.12",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",