@maas/vue-equipment 0.11.4 → 0.11.6

package/dist/nuxt/module.json

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

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

@@ -130,9 +130,10 @@ watch(
   --magic-toast-padding-x: 1rem;
   --magic-toast-padding-y: 1rem;
 
-  --mt-multiplier: 1;
-  --mt-transform-x: -50%;
-  --mt-transform-y: -50%;
+  --mt-multiplier-x: 1;
+  --mt-multiplier-y: 1;
+  --mt-align-items: flex-start;
+  --mt-justify-content: center;
 }
 
 .magic-toast {
@@ -156,12 +157,9 @@ watch(
   max-height: 100%;
   width: 100%;
   height: 100%;
-  & .magic-toast-component {
-    left: 50%;
-    top: 50%;
-    transform: translateX(var(--mt-transform-x, -50%))
-      translateY(var(--mt-transform-y, -50%));
-  }
+  display: flex;
+  align-items: var(--mt-align-items);
+  justify-content: var(--mt-justify-content);
 }
 
 .magic-toast__inner * {
@@ -173,11 +171,10 @@ watch(
 .magic-toast.-top-right {
   --magic-toast-transform-y: 10;
   --magic-toast-enter-animation: slide-ttb-in 300ms ease;
-  --mt-multiplier: 1;
+  --mt-multiplier-y: 1;
+  --mt-align-items: flex-start;
   & .magic-toast-component {
-    top: 0;
     padding-top: var(--magic-toast-padding-y, 1rem);
-    --mt-transform-y: 0;
   }
 }
 
@@ -186,44 +183,41 @@ watch(
 .magic-toast.-bottom-right {
   --magic-toast-transform-y: 10;
   --magic-toast-enter-animation: slide-btt-in 300ms ease;
-  --mt-multiplier: -1;
+  --mt-multiplier-y: -1;
+  --mt-align-items: flex-end;
   & .magic-toast-component {
-    top: unset;
-    bottom: 0;
     padding-bottom: var(--magic-toast-padding-y, 1rem);
-    --mt-transform-y: 0;
   }
 }
 
 .magic-toast.-top-left,
 .magic-toast.-bottom-left {
+  --mt-justify-content: flex-start;
   & .magic-toast-component {
-    left: 0;
     padding-left: var(--magic-toast-padding-x, 1rem);
-    --mt-transform-x: 0;
   }
 }
 
 .magic-toast.-top-right,
 .magic-toast.-bottom-right {
+  --mt-justify-content: flex-end;
   & .magic-toast-component {
-    left: unset;
-    right: 0;
     padding-right: var(--magic-toast-padding-x, 1rem);
-    --mt-transform-x: 0;
   }
 }
 
 .magic-toast.-from-left {
   --magic-toast-enter-animation: slide-ltr-in 300ms ease;
   --magic-toast-transform-y: 0;
-  --magic-toast-transform-x: -30;
+  --magic-toast-transform-x: 30;
+  --mt-multiplier-x: 1;
 }
 
 .magic-toast.-from-right {
   --magic-toast-enter-animation: slide-rtl-in 300ms ease;
   --magic-toast-transform-y: 0;
   --magic-toast-transform-x: 30;
+  --mt-multiplier-x: -1;
 }
 
 .magic-toast--list-enter-active {

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

@@ -39,7 +39,7 @@ function setIndex() {
 
 function setOffset() {
   const offset = newerSiblings.value.reduce((acc, curr) => {
-    return acc + curr.height
+    return acc + curr.height - curr.padding.top - curr.padding.bottom
   }, 0)
   elRef.value?.style.setProperty('--mt-offset', `${offset}`)
 }
@@ -65,10 +65,10 @@ watchEffect(() => {
   --mt-offset: 0;
   --mt-matrix-scale: calc(1 - (var(--magic-toast-scale) * var(--mt-index, 0)));
   --mt-matrix-transform-x: calc(
-    var(--magic-toast-transform-x) * var(--mt-index, 0) * var(--mt-multiplier)
+    var(--magic-toast-transform-x) * var(--mt-index, 0) * var(--mt-multiplier-x)
   );
   --mt-matrix-transform-y: calc(
-    var(--magic-toast-transform-y) * var(--mt-index, 0) * var(--mt-multiplier)
+    var(--magic-toast-transform-y) * var(--mt-index, 0) * var(--mt-multiplier-y)
   );
   position: absolute;
   list-style: none;
@@ -91,11 +91,12 @@ watchEffect(() => {
 
 .magic-toast-component.expanded {
   --mt-matrix-scale: 1;
-  --mt-matrix-transform-y: calc(((var(--mt-offset)) * var(--mt-multiplier)));
+  --mt-matrix-transform-y: calc(var(--mt-offset) * var(--mt-multiplier-y));
   --mt-matrix-transform-x: 0;
   &:not(:last-child) {
     & .magic-toast-component__inner {
       padding-bottom: calc(var(--magic-toast-gap) * var(--mt-index));
+      padding-top: calc(var(--magic-toast-gap) * var(--mt-index));
     }
   }
 }

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { Options, Toast } from './../../types.js';
+import type { ToastOptions, Toast } from './../../types.js';
 type Args = {
     id: MaybeRef<string>;
-    mappedOptions: Options;
+    mappedOptions: ToastOptions;
     count: Ref<number | undefined>;
     oldest: Ref<Toast | undefined>;
 };
@@ -16,6 +16,10 @@ export declare function useToastCallback({ id, mappedOptions, count, oldest }: A
     activeElements: Ref<{
         id: string;
         height: number;
+        padding: {
+            top: number;
+            bottom: number;
+        };
     }[]>;
 };
 export {};

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -14,9 +14,17 @@ export function useToastCallback({ id, mappedOptions, count, oldest }) {
   function onAfterEnter(el) {
     useToastEmitter().emit("afterEnter", toValue(id));
     const mappedEl = el;
+    const style = window.getComputedStyle(mappedEl);
     activeElements.value = [
       ...activeElements.value,
-      { id: el.id, height: mappedEl.offsetHeight }
+      {
+        id: el.id,
+        height: mappedEl.offsetHeight,
+        padding: {
+          top: parseInt(style.paddingTop),
+          bottom: parseInt(style.paddingBottom)
+        }
+      }
     ];
   }
   function onBeforeLeave(_el) {

package/dist/plugins/MagicToast/src/types/index.d.ts

@@ -28,6 +28,10 @@ type ToastOptions = {
 type ActiveElement = {
     id: string;
     height: number;
+    padding: {
+        top: number;
+        bottom: number;
+    };
 };
 type ToastEvents = {
     beforeEnter: string;

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.4",
+  "version": "0.11.6",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",