@maas/vue-equipment 1.0.0-beta.76 → 1.0.0-beta.77

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.75",
+  "version": "1.0.0-beta.76",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -109,7 +109,7 @@ const functions$1 = [
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 1782824900000,
+		lastUpdated: 1782999583000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicTray/",
 		description: "MagicTray is a flexible"
 	},

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts

@@ -1,6 +1,6 @@
 export declare function useMagicEmitter(): {
     on: {
-        <Key extends "progress" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -670,7 +670,7 @@ export declare function useMagicEmitter(): {
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     off: {
-        <Key extends "progress" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1340,7 +1340,7 @@ export declare function useMagicEmitter(): {
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     emit: {
-        <Key extends "progress" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1674,7 +1674,7 @@ export declare function useMagicEmitter(): {
             } & import("../../../MagicTray/index.js").TraySidePayload;
             willSnapTo: import("../../../MagicTray/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key]): void;
-        <Key extends "progress" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "staticClick" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;

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

@@ -4,7 +4,7 @@
     :data-id="id"
     :data-expanded="state.expanded"
     :data-dragging="view?.dragging"
-    :data-draggable="state.options.draggable"
+    :data-draggable="draggable"
     :data-position="state.options.position"
     :data-debug="state.options.debug"
     :style="{
@@ -60,7 +60,7 @@ const offset = computed(() => {
   const mapped = state.views.slice(index + 1).reduce((acc, view2) => acc + (view2.dimensions?.height ?? 0), 0);
   return `${mapped}px`;
 });
-const { style, onPointerdown, onClick } = useToastDrag({
+const { style, onPointerdown, onClick, draggable } = useToastDrag({
   view: view.value,
   instanceId
 });

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

@@ -8,5 +8,6 @@ export declare function useToastDrag(args: UseToastDragArgs): {
     onPointerdown: (e: PointerEvent) => void;
     onClick: (e: MouseEvent) => Promise<void>;
     style: import("vue").ComputedRef<string>;
+    draggable: import("vue").ComputedRef<boolean>;
 };
 export {};

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

@@ -16,7 +16,23 @@ export function useToastDrag(args) {
   const { initializeState } = useToastState(instanceId);
   const state = initializeState();
   const { options } = toRefs(state);
-  const { threshold, animation, position, scrollLock, draggable } = options.value;
+  const {
+    threshold,
+    animation,
+    position: anchorPosition,
+    scrollLock,
+    draggable: defaultDraggable,
+    drag
+  } = options.value;
+  const isDraggable = computed(() => view.draggable ?? defaultDraggable);
+  const directions = drag.direction === "auto" ? [] : [].concat(drag.direction);
+  const allowLeft = directions.includes("left");
+  const allowRight = directions.includes("right");
+  const allowUp = directions.includes("up");
+  const allowDown = directions.includes("down");
+  const isHorizontalOverride = allowLeft || allowRight;
+  const isVerticalOverride = allowUp || allowDown;
+  const position = isHorizontalOverride ? "left" : isVerticalOverride ? "top" : anchorPosition;
   const { deleteView } = useToastView(instanceId);
   const {
     dragStart,
@@ -48,9 +64,15 @@ export function useToastDrag(args) {
     });
     return hasDraggedX || hasDraggedY;
   });
-  const style = computed(
-    () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
-  );
+  const style = computed(() => {
+    const transform = `translate(${draggedX.value}px, ${draggedY.value}px)`;
+    const isHorizontal = position === "left" || position === "right";
+    const dragged = isHorizontal ? draggedX.value : draggedY.value;
+    const distance = Math.abs(dragged);
+    const fadeDistance = toValue(threshold).distance * 4;
+    const opacity = 1 - Math.min(distance / fadeDistance, 1);
+    return `transform: ${transform}; opacity: ${opacity}`;
+  });
   const emitter = useMagicEmitter();
   const { lockScroll, unlockScroll } = useToastScrollLock();
   function interpolateDragged(args2) {
@@ -146,38 +168,32 @@ export function useToastDrag(args) {
     }
   }
   function setDragged({ x, y }) {
-    switch (position) {
+    if (isHorizontalOverride) {
+      const raw = x - originX.value;
+      draggedX.value = allowLeft && allowRight ? raw : allowLeft ? Math.min(raw, 0) : Math.max(raw, 0);
+      return;
+    }
+    if (isVerticalOverride) {
+      const raw = y - originY.value;
+      draggedY.value = allowUp && allowDown ? raw : allowUp ? Math.min(raw, 0) : Math.max(raw, 0);
+      return;
+    }
+    switch (anchorPosition) {
       case "top":
-        const newDraggedTC = Math.min(y - originY.value, 0);
-        draggedY.value = newDraggedTC;
-        break;
       case "top-left":
-        const newDraggedTL = Math.min(y - originY.value, 0);
-        draggedY.value = newDraggedTL;
-        break;
       case "top-right":
-        const newDraggedTR = Math.min(y - originY.value, 0);
-        draggedY.value = newDraggedTR;
+        draggedY.value = Math.min(y - originY.value, 0);
         break;
       case "bottom":
-        const newDraggedBC = Math.max(y - originY.value, 0);
-        draggedY.value = newDraggedBC;
-        break;
       case "bottom-left":
-        const newDraggedBL = Math.max(y - originY.value, 0);
-        draggedY.value = newDraggedBL;
-        break;
       case "bottom-right":
-        const newDraggedBR = Math.max(y - originY.value, 0);
-        draggedY.value = newDraggedBR;
+        draggedY.value = Math.max(y - originY.value, 0);
         break;
       case "left":
-        const newDraggedCL = Math.min(x - originX.value, 0);
-        draggedX.value = newDraggedCL;
+        draggedX.value = Math.min(x - originX.value, 0);
         break;
       case "right":
-        const newDraggedCR = Math.max(x - originX.value, 0);
-        draggedX.value = newDraggedCR;
+        draggedX.value = Math.max(x - originX.value, 0);
         break;
     }
   }
@@ -262,7 +278,7 @@ export function useToastDrag(args) {
     cancelTouchcancel?.();
   }
   function onPointerdown(e) {
-    if (!toValue(draggable)) {
+    if (!isDraggable.value) {
       return;
     }
     const scrollLockValue = toValue(scrollLock);
@@ -308,7 +324,7 @@ export function useToastDrag(args) {
       e.preventDefault();
       return;
     }
-    if (position === "left" || position === "right") {
+    if (anchorPosition === "left" || anchorPosition === "right") {
       return;
     }
     if (state.options.layout?.expand === "click") {
@@ -321,6 +337,7 @@ export function useToastDrag(args) {
   return {
     onPointerdown,
     onClick,
-    style
+    style,
+    draggable: isDraggable
   };
 }

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

@@ -15,6 +15,7 @@ export function useToastState(instanceId) {
       refCount: 0,
       options: { ...defaultOptions },
       views: [],
+      hiddenViews: [],
       expanded: false,
       animating: false
     };

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

@@ -1,6 +1,6 @@
 import { type MaybeRef } from 'vue';
 import { type ToastView } from '../../types/index.js';
-export type AddViewArgs = Pick<ToastView, 'component' | 'props' | 'slots'> & {
+export type AddViewArgs = Pick<ToastView, 'component' | 'props' | 'slots' | 'draggable'> & {
     id?: string;
 };
 type InitializeViewArgs = AddViewArgs;

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

@@ -8,11 +8,12 @@ export function useToastView(instanceId) {
     return Math.random().toString(36).slice(2, 11);
   }
   function createView(args) {
-    const { id = uuid(), props, slots, component } = args;
+    const { id = uuid(), props, slots, component, draggable } = args;
     const view = {
       component: markRaw(component),
       props,
       slots,
+      draggable,
       id,
       dragStart: void 0,
       dragging: false,
@@ -42,6 +43,7 @@ export function useToastView(instanceId) {
   }
   function deleteView(id) {
     state.views = state.views?.filter((view) => view.id !== id);
+    state.hiddenViews = state.hiddenViews?.filter((view) => view.id !== id);
   }
   function getView(id) {
     return state.views?.find((view) => view.id === id);

package/dist/plugins/MagicToast/src/composables/useMagicToast.d.ts

@@ -5,14 +5,18 @@ export interface AddArgs {
     props?: ToastView['props'];
     slots?: ToastView['slots'];
     duration?: number;
+    draggable?: boolean;
     id?: string;
 }
 export declare function useMagicToast(id: MaybeRef<string>): {
     toasts: import("vue").ComputedRef<ToastView[]>;
     count: import("vue").ComputedRef<number>;
+    hiddenCount: import("vue").ComputedRef<number>;
     add: (args: AddArgs) => string;
     remove: (id: string) => void;
     clear: (transition?: string) => Promise<void>;
+    hide: (transition?: string) => Promise<void>;
+    show: (transition?: string) => Promise<void>;
     expand: () => void;
     collapse: () => void;
 };

package/dist/plugins/MagicToast/src/composables/useMagicToast.mjs

@@ -8,9 +8,17 @@ export function useMagicToast(id) {
   const { initializeView, deleteView } = useToastView(id);
   const toasts = computed(() => state.views);
   const count = computed(() => toasts.value?.length);
+  const hiddenCount = computed(() => state.hiddenViews?.length);
   function add(args) {
-    const { id: id2, component, props, slots, duration } = args;
-    const view = initializeView({ id: id2, component, props, slots });
+    if (state.hiddenViews.length > 0) {
+      state.views = state.hiddenViews;
+      state.hiddenViews = [];
+      state.views.forEach((view2) => {
+        view2.timeout?.play();
+      });
+    }
+    const { id: id2, component, props, slots, duration, draggable } = args;
+    const view = initializeView({ id: id2, component, props, slots, draggable });
     const mappedDuration = duration ?? state.options.duration;
     if (mappedDuration > 0) {
       view.timeout = useToastTimeout(() => deleteView(view.id), {
@@ -27,7 +35,36 @@ export function useMagicToast(id) {
     const lastTransition = state.options.transition;
     state.options.transition = transition ?? "";
     state.views = [];
+    state.hiddenViews = [];
+    await nextTick();
+    state.options.transition = lastTransition;
+  }
+  async function hide(transition) {
+    if (state.views.length === 0) {
+      return;
+    }
+    const lastTransition = state.options.transition;
+    state.options.transition = transition ?? "";
+    state.views.forEach((view) => {
+      view.timeout?.pause();
+    });
+    state.hiddenViews = state.views;
+    state.views = [];
+    await nextTick();
+    state.options.transition = lastTransition;
+  }
+  async function show(transition) {
+    if (state.hiddenViews.length === 0) {
+      return;
+    }
+    const lastTransition = state.options.transition;
+    state.options.transition = transition ?? "";
+    state.views = state.hiddenViews;
+    state.hiddenViews = [];
     await nextTick();
+    state.views.forEach((view) => {
+      view.timeout?.play();
+    });
     state.options.transition = lastTransition;
   }
   function expand() {
@@ -39,9 +76,12 @@ export function useMagicToast(id) {
   return {
     toasts,
     count,
+    hiddenCount,
     add,
     remove,
     clear,
+    hide,
+    show,
     expand,
     collapse
   };

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

@@ -2,11 +2,13 @@ import type { MaybeRef, Slots } from 'vue';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
 import type { UseToastTimeout } from '../composables/private/useToastTimeout.js';
 type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type DragDirection = 'left' | 'right' | 'up' | 'down';
 export interface ToastView {
     id: string;
     component: object;
     props?: MaybeRef<Record<string, unknown>>;
     slots?: Slots;
+    draggable?: boolean;
     dimensions?: {
         height: number;
         padding: {
@@ -32,6 +34,7 @@ export interface ToastState {
     id: string;
     refCount: number;
     views: ToastView[];
+    hiddenViews: ToastView[];
     expanded: boolean;
     animating: boolean;
     options: RequiredMagicToastOptions;
@@ -57,6 +60,9 @@ export interface MagicToastOptions {
     position?: Position;
     duration?: number;
     draggable?: boolean;
+    drag?: {
+        direction?: 'auto' | DragDirection | DragDirection[];
+    };
     scrollLock?: boolean | {
         padding: boolean;
     };

package/dist/plugins/MagicToast/src/utils/defaultOptions.mjs

@@ -4,6 +4,9 @@ const defaultOptions = {
   position: "bottom",
   duration: 0,
   draggable: true,
+  drag: {
+    direction: "auto"
+  },
   scrollLock: {
     padding: true
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.77",
   "contributors": [
     {
       "name": "Robin Scholz",