@maas/vue-equipment 0.11.3 → 0.11.4

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.11.2"
+  "version": "0.11.3"
 }

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -159,7 +159,10 @@ watch(isActive, async (value) => {
 })
 </script>
 
-<style lang="postcss">
+<style>
+@import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+@import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+
 :root {
   --magic-modal-z-index: 999;
   --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
@@ -169,6 +172,28 @@ watch(isActive, async (value) => {
   --magic-modal-content-overflow-y: auto;
 }
 
+@keyframes magic-modal-content-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes magic-modal-content-leave {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+}
+
 .magic-modal {
   position: fixed;
   inset: 0;
@@ -209,64 +234,30 @@ watch(isActive, async (value) => {
 }
 
 /* Content */
-.magic-modal--content-enter-active,
-.magic-modal--content-leave-active {
-  transition: all 300ms ease-out;
-}
-
-.magic-modal--content-enter-from {
-  opacity: 0;
-  transform: translateY(2rem);
-}
-
-.magic-modal--content-enter-to {
-  opacity: 1;
-  transform: translateY(0);
+.magic-modal--content-enter-active {
+  animation: magic-modal-content-enter 300ms ease;
 }
 
-.magic-modal--content-leave-from {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.magic-modal--content-leave-to {
-  opacity: 0;
-  transform: scale(1.02);
+.magic-modal--content-leave-active {
+  animation: magic-modal-content-leave 300ms ease;
 }
 
 @media (prefers-reduced-motion) {
-  .magic-modal--content-enter-active,
-  .magic-modal--content-leave-active {
-    transition: opacity 300ms ease-out;
+  .magic-modal--content-enter-active {
+    animation: fade-in 300ms ease;
   }
 
-  .magic-modal--content-enter-from,
-  .magic-modal--content-enter-to,
-  .magic-modal--content-leave-from,
-  .magic-modal--content-leave-to {
-    transform: none;
+  .magic-modal--content-leave-active {
+    animation: fade-out 300ms ease;
   }
 }
 
 /* Backdrop */
-.magic-modal--backdrop-enter-active,
-.magic-modal--backdrop-leave-active {
-  transition: opacity 300ms ease-out;
+.magic-modal--backdrop-enter-active {
+  animation: fade-in 300ms ease;
 }
 
-.magic-modal--backdrop-enter-from {
-  opacity: 0;
-}
-
-.magic-modal--backdrop-enter-to {
-  opacity: 1;
-}
-
-.magic-modal--backdrop-leave-from {
-  opacity: 1;
-}
-
-.magic-modal--backdrop-leave-to {
-  opacity: 0;
+.magic-modal--backdrop-leave-active {
+  animation: fade-out 300ms ease;
 }
 </style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue

@@ -137,7 +137,7 @@ defineExpose({
   --magic-player-controls-overlay-background-color: rgba(0, 0, 0, 0.3);
   --magic-player-controls-overlay-color: rgba(255, 255, 255, 1);
   --magic-player-controls-transition-duration: 300ms;
-  --magic-player-controls-transition-timing-function: ease-out: ;
+  --magic-player-controls-transition-timing-function: ease: ;
 }
 
 @media (max-width: 640px) {
@@ -160,7 +160,7 @@ defineExpose({
   color: var(--magic-player-controls-overlay-color);
   transition-duration: 300ms;
   transition-property: opacity;
-  transition-timing-function: ease-out;
+  transition-timing-function: ease;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue

@@ -111,7 +111,7 @@ const {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
-  transition: transform 300ms ease-out;
+  transition: transform 300ms ease;
   z-index: 10;
   background-color: var(--magic-player-thumb-bg-color);
   border-radius: 50rem;

package/dist/plugins/MagicToast/src/components/MagicToast.vue

@@ -112,13 +112,19 @@ watch(
 </script>
 
 <style lang="css">
+@import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
+
 :root {
-  --magic-toast-enter-x: 0;
-  --magic-toast-enter-y: 0;
+  --magic-toast-enter-animation: unset;
+  --magic-toast-leave-animation: fade-out 300ms ease;
   --magic-toast-scale: 0.1;
   --magic-toast-transform-x: 0;
   --magic-toast-transform-y: 0;
-  --magic-toast-transition: transform 300ms ease-out;
+  --magic-toast-transition: transform 300ms ease;
   --magic-toast-z-index: 999;
   --magic-toast-gap: 0.75rem;
   --magic-toast-padding-x: 1rem;
@@ -166,10 +172,11 @@ watch(
 .magic-toast.-top-center,
 .magic-toast.-top-right {
   --magic-toast-transform-y: 10;
-  --magic-toast-enter-y: -100%;
+  --magic-toast-enter-animation: slide-ttb-in 300ms ease;
   --mt-multiplier: 1;
   & .magic-toast-component {
-    top: var(--magic-toast-padding-y, 1rem);
+    top: 0;
+    padding-top: var(--magic-toast-padding-y, 1rem);
     --mt-transform-y: 0;
   }
 }
@@ -178,11 +185,12 @@ watch(
 .magic-toast.-bottom-center,
 .magic-toast.-bottom-right {
   --magic-toast-transform-y: 10;
-  --magic-toast-enter-y: 100%;
+  --magic-toast-enter-animation: slide-btt-in 300ms ease;
   --mt-multiplier: -1;
   & .magic-toast-component {
     top: unset;
-    bottom: var(--magic-toast-padding-y, 1rem);
+    bottom: 0;
+    padding-bottom: var(--magic-toast-padding-y, 1rem);
     --mt-transform-y: 0;
   }
 }
@@ -190,7 +198,8 @@ watch(
 .magic-toast.-top-left,
 .magic-toast.-bottom-left {
   & .magic-toast-component {
-    left: var(--magic-toast-padding-x, 1rem);
+    left: 0;
+    padding-left: var(--magic-toast-padding-x, 1rem);
     --mt-transform-x: 0;
   }
 }
@@ -199,39 +208,29 @@ watch(
 .magic-toast.-bottom-right {
   & .magic-toast-component {
     left: unset;
-    right: var(--magic-toast-padding-x, 1rem);
+    right: 0;
+    padding-right: var(--magic-toast-padding-x, 1rem);
     --mt-transform-x: 0;
   }
 }
 
 .magic-toast.-from-left {
-  --magic-toast-enter-x: -100%;
-  --magic-toast-enter-y: 0;
+  --magic-toast-enter-animation: slide-ltr-in 300ms ease;
   --magic-toast-transform-y: 0;
   --magic-toast-transform-x: -30;
 }
 
 .magic-toast.-from-right {
-  --magic-toast-enter-x: 100%;
-  --magic-toast-enter-y: 0;
+  --magic-toast-enter-animation: slide-rtl-in 300ms ease;
   --magic-toast-transform-y: 0;
   --magic-toast-transform-x: 30;
 }
 
-.magic-toast--list-enter-active * {
-  transition: all 300ms ease-out;
-}
-
-.magic-toast--list-enter-from * {
-  transform: translateY(var(--magic-toast-enter-y, 0))
-    translateX(var(--magic-toast-enter-x, 0));
+.magic-toast--list-enter-active {
+  animation: var(--magic-toast-enter-animation);
 }
 
 .magic-toast--list-leave-active {
-  transition: all 150ms ease-out;
-}
-
-.magic-toast--list-leave-to {
-  opacity: 0;
+  animation: var(--magic-toast-leave-animation);
 }
 </style>

package/dist/plugins/MagicToast/src/components/MagicToastComponent.vue

@@ -78,7 +78,7 @@ watchEffect(() => {
   position: relative;
   width: 100%;
   height: 100%;
-  transition: var(--magic-toast-transition, transform 300ms ease-out);
+  transition: var(--magic-toast-transition, transform 300ms ease);
   transform: matrix(
     var(--mt-matrix-scale),
     0,

package/dist/utils/css/animations/clip-in.css

@@ -0,0 +1,8 @@
+@keyframes clip-in {
+  0% {
+    clip-path: inset(0 0 100% 0);
+  }
+  100% {
+    clip-path: inset(0 0 0 0);
+  }
+}

package/dist/utils/css/animations/clip-out.css

@@ -0,0 +1,8 @@
+@keyframes clip-out {
+  0% {
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    clip-path: inset(0 0 100% 0);
+  }
+}

package/dist/utils/css/animations/fade-down-in.css

@@ -0,0 +1,10 @@
+@keyframes fade-down-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/fade-down-out.css

@@ -0,0 +1,10 @@
+@keyframes fade-down-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}

package/dist/utils/css/animations/fade-in.css

@@ -0,0 +1,9 @@
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/utils/css/animations/fade-out.css

@@ -0,0 +1,8 @@
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/dist/utils/css/animations/fade-up-in.css

@@ -0,0 +1,9 @@
+@keyframes fade-up-in {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/fade-up-out.css

@@ -0,0 +1,10 @@
+@keyframes fade-up-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}

package/dist/utils/css/animations/flip-in.css

@@ -0,0 +1,8 @@
+@keyframes flip-in {
+  0% {
+    transform: rotateY(90deg);
+  }
+  100% {
+    transform: rotateY(0);
+  }
+}

package/dist/utils/css/animations/flip-out.css

@@ -0,0 +1,8 @@
+@keyframes flip-out {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(90deg);
+  }
+}

package/dist/utils/css/animations/slide-btt-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-btt-in {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/slide-btt-out.css

@@ -0,0 +1,9 @@
+
+@keyframes slide-btt-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}

package/dist/utils/css/animations/slide-ltr-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-ltr-in {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/utils/css/animations/slide-ltr-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-ltr-out {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

package/dist/utils/css/animations/slide-rtl-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-rtl-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/utils/css/animations/slide-rtl-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-rtl-out {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/dist/utils/css/animations/slide-ttb-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-ttb-in {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/slide-ttb-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-ttb-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}

package/dist/utils/css/animations/zoom-in.css

@@ -0,0 +1,10 @@
+@keyframes zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/utils/css/animations/zoom-out.css

@@ -0,0 +1,10 @@
+@keyframes zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/dist/utils/css/animations.css

@@ -0,0 +1,21 @@
+@import './animations/clip-in.css';
+@import './animations/clip-out.css';
+@import './animations/fade-down-in.css';
+@import './animations/fade-down-out.css';
+@import './animations/fade-in.css';
+@import './animations/fade-out.css';
+@import './animations/fade-up-in.css';
+@import './animations/fade-up-out.css';
+@import './animations/flip-in.css';
+@import './animations/flip-out.css';
+@import './animations/slide-btt-in.css';
+@import './animations/slide-btt-out.css';
+@import './animations/slide-ltr-in.css';
+@import './animations/slide-ltr-out.css';
+@import './animations/slide-rtl-in.css';
+@import './animations/slide-rtl-out.css';
+@import './animations/slide-ttb-in.css';
+@import './animations/slide-ttb-out.css';
+@import './animations/zoom-in.css';
+@import './animations/zoom-out.css';
+

package/dist/utils/css/transitions.css

@@ -0,0 +1,79 @@
+.fade-enter-active {
+  animation: fade-in 300ms ease;
+}
+
+.fade-leave-active {
+  animation: fade-out 300ms ease;
+}
+
+.fade-up-enter-active {
+  animation: fade-up-in 300ms ease;
+}
+
+.fade-up-leave-active {
+  animation: fade-up-out 300ms ease;
+}
+
+.slide-btt-enter-active {
+  animation: slide-btt-in 300ms ease;
+}
+
+.slide-btt-leave-active {
+  animation: slide-btt-out 300ms ease;
+}
+
+.slide-ttb-enter-active {
+  animation: slide-ttb-in 300ms ease;
+}
+
+.slide-ttb-leave-active {
+  animation: slide-ttb-out 300ms ease;
+}
+
+.slide-rtl-enter-active {
+  animation: slide-rtl-in 300ms ease;
+}
+
+.slide-rtl-leave-active {
+  animation: slide-rtl-out 300ms ease;
+}
+
+.slide-ltr-enter-active {
+  animation: slide-ltr-in 300ms ease;
+}
+
+.slide-ltr-leave-active {
+  animation: slide-ltr-out 300ms ease;
+}
+
+.scroll-up-enter-active {
+  animation: scroll-up-in 300ms ease;
+}
+
+.scroll-up-leave-active {
+  animation: scroll-up-out 300ms ease;
+}
+
+.scroll-down-enter-active {
+  animation: scroll-down-in 300ms ease;
+}
+
+.scroll-down-leave-active {
+  animation: scroll-down-out 300ms ease;
+}
+
+.zoom-enter-active {
+  animation: zoom-in 300ms ease;
+}
+
+.zoom-leave-active {
+  animation: zoom-out 300ms ease;
+}
+
+.clip-enter-active {
+  animation: clip-in 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+}
+
+.clip-leave-active {
+  animation: clip-out 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",
@@ -50,6 +50,10 @@
       "types": "./dist/utils/index.d.ts",
       "require": "./dist/utils/index.js",
       "import": "./dist/utils/index.mjs"
+    },
+    "./utils/css/*.css": {
+      "import": "./dist/utils/css/*.css",
+      "require": "./dist/utils/css/*.css"
     }
   },
   "files": [