srcdev-nuxt-components 2.2.8 → 2.3.1

package/assets/styles/utils/_animations.css

@@ -0,0 +1,42 @@
+.auto-rotate {
+  animation: autoRotateAnimation;
+  animation-timeline: view();
+}
+@keyframes autoRotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.auto-show {
+  animation: autoShowAnimation both;
+  animation-timeline: view(70% 5%);
+}
+@keyframes autoShowAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.auto-bLur {
+  animation: autoBlurAnimation linear both;
+  animation-timeline: view();
+}
+@keyframes autoBlurAnimation {
+  0% {
+    filter: blur(40px);
+  }
+  45%,
+  55% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(40px);
+  }
+}

package/assets/styles/utils/index.css

@@ -4,3 +4,4 @@
 @import './_canvasWidths';
 @import './_display';
 @import './_placement';
+@import './_animations';

package/components/clipped-panels/{ClippedPanelSquare.vue → ClippedPanel.vue}

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" class="clipped-panel" :class="[elementClasses]">
+  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
     <slot name="default"></slot>
   </component>
 </template>
@@ -17,6 +17,13 @@ const props = defineProps({
       return TAGS_ALLOWED.includes(value);
     },
   },
+  variant: {
+    type: String,
+    default: 'square',
+    validator(value: string) {
+      return ['circle-cutout', 'rectangle', 'square'].includes(value);
+    },
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -45,15 +52,20 @@ watch(
   /* box-shadow: 5px 5px 5px 5px white; */
 
   aspect-ratio: 1;
-  width: 200px;
 
+  &.rectangle {
+
+    --_max-x-position: 300px;
+    --_curve-radius: 10px;
+
+    clip-path: path('M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    width: 300px;
+  }
   &.square {
     /* clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 L 110, 0 L 190, 0 L 200, 10 L 200, 190 L 190, 200 L 10, 200 L 0, 190 L 0, 60 L 10, 50 Z'); */
-    clip-path: path(
-      'M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z'
-    );
+    clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z');
+    width: 200px;
   }
-
   &.circle-cutout {
     clip-path: path('M  Z');
   }

package/package.json

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