@maas/vue-equipment 0.40.0 → 1.0.0-beta.2

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

@@ -0,0 +1,312 @@
+import { computed, toRefs, toValue } from "vue";
+import { useEventListener } from "@vueuse/core";
+import {
+  guardedReleasePointerCapture,
+  guardedSetPointerCapture,
+  isIOS,
+  interpolate,
+  isWithinRange
+} from "@maas/vue-equipment/utils";
+import { useToastState } from "./useToastState.mjs";
+import { useMagicEmitter } from "../../../../MagicEmitter/index.mjs";
+import { useToastView } from "./useToastView.mjs";
+import { useToastScrollLock } from "./useToastScrollLock.mjs";
+export function useToastDrag(args) {
+  const { instanceId, view } = args;
+  const { initializeState } = useToastState(instanceId);
+  const state = initializeState();
+  const { options } = toRefs(state);
+  const { threshold, animation, position, scrollLock } = options.value;
+  const { deleteView } = useToastView(instanceId);
+  const {
+    dragStart,
+    dragging,
+    shouldClose,
+    interpolateTo,
+    originX,
+    originY,
+    lastDraggedX,
+    lastDraggedY,
+    draggedX,
+    draggedY
+  } = toRefs(view);
+  let pointerdownTarget = void 0;
+  let cancelPointerup = void 0;
+  let cancelPointermove = void 0;
+  let cancelTouchend = void 0;
+  const hasDragged = computed(() => {
+    const hasDraggedX = !isWithinRange({
+      input: draggedX.value,
+      base: lastDraggedX.value,
+      threshold: toValue(threshold).lock
+    });
+    const hasDraggedY = !isWithinRange({
+      input: draggedY.value,
+      base: lastDraggedY.value,
+      threshold: toValue(threshold).lock
+    });
+    return hasDraggedX || hasDraggedY;
+  });
+  const style = computed(
+    () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
+  );
+  const emitter = useMagicEmitter();
+  const {
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  } = useToastScrollLock();
+  function interpolateDragged(args2) {
+    const {
+      to,
+      duration = toValue(animation)?.snap?.duration || 300,
+      easing
+    } = args2;
+    switch (position) {
+      case "top-center":
+      case "top-left":
+      case "top-right":
+      case "bottom-center":
+      case "bottom-left":
+      case "bottom-right":
+        interpolate({
+          from: draggedY.value,
+          to,
+          duration,
+          easing,
+          callback: (value) => {
+            draggedY.value = value;
+          }
+        });
+        break;
+      case "center-left":
+      case "center-right":
+        interpolate({
+          from: draggedX.value,
+          to,
+          duration,
+          easing,
+          callback: (value) => {
+            draggedX.value = value;
+          }
+        });
+        break;
+    }
+  }
+  function checkPosition() {
+    const distanceX = Math.abs(draggedX.value - lastDraggedX.value);
+    const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
+    switch (position) {
+      case "top-center":
+      case "top-left":
+      case "top-right":
+      case "bottom-center":
+      case "bottom-left":
+      case "bottom-right":
+        if (distanceY > toValue(threshold).distance) {
+          shouldClose.value = true;
+        } else {
+          interpolateTo.value = 0;
+        }
+        break;
+      case "center-left":
+      case "center-right":
+        if (distanceX > toValue(threshold).distance) {
+          shouldClose.value = true;
+        } else {
+          interpolateTo.value = 0;
+        }
+        break;
+    }
+  }
+  function checkMomentum() {
+    const elapsed = Date.now() - dragStart.value.getTime();
+    const distanceX = Math.abs(draggedX.value - lastDraggedX.value);
+    const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
+    const velocityX = elapsed && distanceX ? distanceX / elapsed : 0;
+    const velocityY = elapsed && distanceY ? distanceY / elapsed : 0;
+    switch (position) {
+      case "top-center":
+      case "top-left":
+      case "top-right":
+      case "bottom-center":
+      case "bottom-left":
+      case "bottom-right":
+        if (velocityY > 0.5) {
+          shouldClose.value = true;
+        } else {
+          interpolateTo.value = 0;
+        }
+        break;
+      case "center-left":
+      case "center-right":
+        if (velocityX > 0.5) {
+          shouldClose.value = true;
+        } else {
+          interpolateTo.value = 0;
+        }
+        break;
+    }
+  }
+  function setDragged({ x, y }) {
+    switch (position) {
+      case "top-center":
+        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;
+        break;
+      case "bottom-center":
+        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;
+        break;
+      case "center-left":
+        const newDraggedCL = Math.min(x - originX.value, 0);
+        draggedX.value = newDraggedCL;
+        break;
+      case "center-right":
+        const newDraggedCR = Math.max(x - originX.value, 0);
+        draggedX.value = newDraggedCR;
+        break;
+    }
+  }
+  function resetStateAndListeners() {
+    dragging.value = false;
+    shouldClose.value = false;
+    interpolateTo.value = void 0;
+    cancelTouchend?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
+  }
+  function onPointerup(e) {
+    if (shouldClose.value) {
+      deleteView(view.id);
+    } else if (interpolateTo.value || interpolateTo.value === 0) {
+      interpolateDragged({
+        to: interpolateTo.value
+      });
+    } else {
+      switch (position) {
+        case "top-center":
+        case "top-left":
+        case "top-right":
+        case "bottom-center":
+        case "bottom-left":
+        case "bottom-right":
+          interpolateDragged({
+            to: lastDraggedY.value
+          });
+          break;
+        case "center-left":
+        case "center-right":
+          interpolateDragged({
+            to: lastDraggedX.value
+          });
+          break;
+      }
+    }
+    emitter.emit("afterDrag", {
+      id: toValue(instanceId),
+      x: draggedX.value,
+      y: draggedY.value
+    });
+    resetStateAndListeners();
+    const scrollLockValue = toValue(scrollLock);
+    if (scrollLockValue) {
+      unlockScroll();
+      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
+        removeScrollLockPadding();
+      }
+    }
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
+    guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
+  }
+  function onPointermove(e) {
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    shouldClose.value = false;
+    setDragged({ x: e.screenX, y: e.screenY });
+    checkMomentum();
+    checkPosition();
+    emitter.emit("drag", {
+      id: toValue(instanceId),
+      x: draggedX.value,
+      y: draggedY.value
+    });
+  }
+  function onPointerdown(e) {
+    const scrollLockValue = toValue(scrollLock);
+    if (scrollLockValue) {
+      lockScroll();
+      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
+        addScrollLockPadding();
+      }
+    }
+    if (dragging.value) {
+      return;
+    } else {
+      dragging.value = true;
+      pointerdownTarget = e.target;
+      guardedSetPointerCapture({
+        event: e,
+        element: e.target
+      });
+      emitter.emit("beforeDrag", {
+        id: toValue(instanceId),
+        x: draggedX.value,
+        y: draggedY.value
+      });
+      lastDraggedX.value = draggedX.value;
+      lastDraggedY.value = draggedY.value;
+      cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+      cancelPointermove = useEventListener(
+        document,
+        "pointermove",
+        onPointermove,
+        { passive: false }
+      );
+      cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+      originX.value = e.screenX - draggedX.value;
+      originY.value = e.screenY - draggedY.value;
+      dragStart.value = /* @__PURE__ */ new Date();
+      onPointermove(e);
+    }
+  }
+  async function onClick(e) {
+    if (hasDragged.value) {
+      e.preventDefault();
+      return;
+    }
+    if (position === "center-left" || position === "center-right") {
+      return;
+    }
+    if (state.options.layout?.expand === "click") {
+      state.expanded = true;
+    }
+  }
+  return {
+    onPointerdown,
+    onClick,
+    style
+  };
+}

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

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+export declare function useToastListener(instanceId: MaybeRef<string>): {
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+    outsideClickCallback: () => void;
+};

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

@@ -0,0 +1,25 @@
+import { useToastState } from "./useToastState.mjs";
+export function useToastListener(instanceId) {
+  const { initializeState } = useToastState(instanceId);
+  const state = initializeState();
+  function onMouseenter() {
+    if (state.options.layout?.expand === "hover") {
+      state.expanded = true;
+    }
+  }
+  function onMouseleave() {
+    if (state.options.layout?.expand === "hover") {
+      state.expanded = false;
+    }
+  }
+  function outsideClickCallback() {
+    if (state.options.layout?.expand === "click") {
+      state.expanded = false;
+    }
+  }
+  return {
+    onMouseenter,
+    onMouseleave,
+    outsideClickCallback
+  };
+}

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

@@ -0,0 +1,6 @@
+export declare function useToastScrollLock(): {
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};

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

@@ -0,0 +1,41 @@
+import { ref } from "vue";
+import { useScrollLock } from "@vueuse/core";
+import { matchClass } from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+export function useToastScrollLock() {
+  const positionFixedElements = ref([]);
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined") return;
+    const exclude = new RegExp(/magic-toast/);
+    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
+    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+    document.body.style.paddingRight = "var(--scrollbar-width)";
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
+    );
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+    );
+  }
+  function removeScrollLockPadding() {
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = ""
+    );
+  }
+  return {
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  };
+}

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

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { ToastState, MagicToastOptions } from '../../types/index.js';
+export declare function useToastState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicToastOptions) => ToastState;
+    deleteState: () => void;
+    toastStateStore: Ref<ToastState[], ToastState[]>;
+};

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

@@ -0,0 +1,45 @@
+import { ref, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const toastStateStore = ref([]);
+export function useToastState(instanceId) {
+  function createState(id) {
+    const state = {
+      id,
+      options: { ...defaultOptions },
+      views: [],
+      expanded: false,
+      animating: false
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const state = createState(id);
+    toastStateStore.value = [...toastStateStore.value, state];
+    return state;
+  }
+  function initializeState(options) {
+    let state = toastStateStore.value.find((entry) => {
+      return entry.id === toValue(instanceId);
+    });
+    if (!state) {
+      state = addState(toValue(instanceId));
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      state.options = mappedOptions;
+      state.expanded = mappedOptions.initial.expanded;
+    }
+    return state;
+  }
+  function deleteState() {
+    toastStateStore.value = toastStateStore.value.filter(
+      (x) => x.id !== toValue(instanceId)
+    );
+  }
+  return {
+    initializeState,
+    deleteState,
+    toastStateStore
+  };
+}

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

@@ -0,0 +1,12 @@
+import { type MaybeRef } from 'vue';
+import { type ToastView } from '../../types/index.js';
+export type AddViewArgs = Pick<ToastView, 'component' | 'props'> & {
+    id?: string;
+};
+type InitializeViewArgs = AddViewArgs;
+export declare function useToastView(instanceId: MaybeRef<string>): {
+    initializeView: (args: InitializeViewArgs) => ToastView;
+    deleteView: (id: string) => void;
+    getView: (id: string) => ToastView | undefined;
+};
+export {};

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

@@ -0,0 +1,51 @@
+import { reactive, markRaw } from "vue";
+import { useToastState } from "./useToastState.mjs";
+export function useToastView(instanceId) {
+  const { initializeState } = useToastState(instanceId);
+  const state = initializeState();
+  function uuid() {
+    return Math.random().toString(36).slice(2, 11);
+  }
+  function createView(args) {
+    const { id = uuid(), props, component } = args;
+    const view = {
+      component: markRaw(component),
+      props,
+      id,
+      dragStart: void 0,
+      dragging: false,
+      shouldClose: false,
+      interpolateTo: void 0,
+      snappedX: 0,
+      snappedY: 0,
+      originX: 0,
+      originY: 0,
+      lastDraggedX: 0,
+      lastDraggedY: 0,
+      draggedX: 0,
+      draggedY: 0
+    };
+    return reactive(view);
+  }
+  function addView(args) {
+    const view = createView(args);
+    state.views = [...state.views, view];
+    return view;
+  }
+  function initializeView(args) {
+    const { id } = args;
+    const view = getView(id ?? "") ?? addView(args);
+    return view;
+  }
+  function deleteView(id) {
+    state.views = state.views?.filter((view) => view.id !== id);
+  }
+  function getView(id) {
+    return state.views?.find((view) => view.id === id);
+  }
+  return {
+    initializeView,
+    deleteView,
+    getView
+  };
+}

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

@@ -1,12 +1,17 @@
 import { type MaybeRef } from 'vue';
-import type { AddToastArgs } from './../types/index.js';
+import type { ToastView } from '../types/index.js';
+export interface AddArgs {
+    component: ToastView['component'];
+    props: ToastView['props'];
+    duration?: number;
+    id?: string;
+}
 export declare function useMagicToast(id: MaybeRef<string>): {
-    toasts: import("vue").ComputedRef<import("./../types").Toast[] | undefined>;
-    count: import("vue").ComputedRef<number | undefined>;
-    firstToast: import("vue").ComputedRef<import("./../types").Toast | undefined>;
-    lastToast: import("vue").ComputedRef<import("./../types").Toast | undefined>;
-    add: (options: AddToastArgs) => Promise<string | undefined>;
-    remove: (toastId: string) => void;
-    clear: () => void;
+    toasts: import("vue").ComputedRef<ToastView[]>;
+    count: import("vue").ComputedRef<number>;
+    add: (args: AddArgs) => string;
+    remove: (id: string) => void;
+    expand: () => void;
+    collapse: () => void;
 };
 export type UseMagicToastReturn = ReturnType<typeof useMagicToast>;

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

@@ -1,35 +1,38 @@
-import { computed, toValue, markRaw } from "vue";
-import { useToastStore } from "./private/useToastStore.mjs";
+import { computed, toValue } from "vue";
+import { useToastState } from "./private/useToastState.mjs";
+import { useToastView } from "./private/useToastView.mjs";
 export function useMagicToast(id) {
-  const { findInstance } = useToastStore();
-  const instance = computed(() => findInstance(toValue(id)));
-  const toasts = computed(() => instance.value?.toasts);
+  const { initializeState } = useToastState(toValue(id));
+  const state = initializeState();
+  const { initializeView, deleteView } = useToastView(id);
+  const toasts = computed(() => state?.views);
   const count = computed(() => toasts.value?.length);
-  const firstToast = computed(() => toasts.value?.[0]);
-  const lastToast = computed(() => toasts.value?.[toasts.value.length - 1]);
-  async function add(options) {
-    const { component, props, duration } = options;
-    const toastId = instance.value?.add({
-      props,
-      duration,
-      component: markRaw(component)
-    });
-    return toastId;
+  function add(args) {
+    const { id: id2, component, props, duration } = args;
+    const view = initializeView({ id: id2, component, props });
+    const mappedDuration = duration ?? state.options.duration;
+    if (mappedDuration > 0) {
+      setTimeout(() => {
+        deleteView(view.id);
+      }, mappedDuration);
+    }
+    return view.id;
   }
-  function remove(toastId) {
-    instance.value?.remove(toastId);
+  function remove(id2) {
+    deleteView(id2);
   }
-  function clear() {
-    if (!instance.value) return;
-    instance.value.toasts = [];
+  function expand() {
+    state.expanded = true;
+  }
+  function collapse() {
+    state.expanded = false;
   }
   return {
     toasts,
     count,
-    firstToast,
-    lastToast,
     add,
     remove,
-    clear
+    expand,
+    collapse
   };
 }