@maas/vue-equipment 1.0.0-beta.1 → 1.0.0-beta.10

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

@@ -1,17 +1,15 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, createBlock as _createBlock, withCtx as _withCtx, TransitionGroup as _TransitionGroup, createVNode as _createVNode, createElementVNode as _createElementVNode, Teleport as _Teleport } from "vue";
-const _hoisted_1 = ["id", "data-position", "data-expanded"];
+const _hoisted_1 = ["data-id", "data-position", "data-expanded"];
 import {
   toValue,
-  ref,
+  useTemplateRef,
   provide,
-  useId,
   watch,
   onBeforeUnmount
 } from "vue";
 import { onClickOutside } from "@vueuse/core";
-import { defu } from "defu";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastView } from "../composables/private/useToastView";
 import { useToastCallback } from "../composables/private/useToastCallback";
@@ -34,11 +32,10 @@ export default /* @__PURE__ */ _defineComponent({
     options: { type: Object, required: false }
   },
   setup(__props) {
-    const teleportId = ref(useId());
     const { deleteView } = useToastView(__props.id);
     const { deleteState, initializeState } = useToastState(__props.id);
     const state = initializeState(__props.options);
-    const listRef = ref(void 0);
+    const listRef = useTemplateRef("list");
     const {
       onBeforeEnter,
       onEnter,
@@ -52,8 +49,7 @@ export default /* @__PURE__ */ _defineComponent({
     watch(
       () => __props.options,
       (value) => {
-        state.options = defu(value, state.options);
-        teleportId.value = useId();
+        initializeState(value);
       },
       {
         deep: true
@@ -65,19 +61,17 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicToastInstanceId, __props.id);
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_Teleport, {
-        key: teleportId.value,
         to: _unref(state).options.teleport?.target,
         disabled: _unref(state).options.teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          id: toValue(_ctx.id),
+          "data-id": toValue(_ctx.id),
           "data-position": _unref(state).options.position,
           "data-expanded": _unref(state).expanded,
           class: "magic-toast-provider"
         }, _ctx.$attrs), [
           _createVNode(_TransitionGroup, {
-            ref_key: "listRef",
-            ref: listRef,
+            ref: "list",
             tag: "ol",
             class: "magic-toast-provider__list",
             name: _unref(state).options.transition,
@@ -164,7 +158,7 @@ export default /* @__PURE__ */ _defineComponent({
   --magic-toast-padding-y: 1rem;
   --magic-toast-padding-x: 1rem;
   --magic-toast-gap: 0.75rem;
-  --magic-toast-duration: 175ms;
+  --magic-toast-animation-duration: 175ms;
   --magic-toast-scale-factor: 0.05;
   --magic-toast-overlap-y: 1rem;
 
@@ -213,11 +207,11 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='top-left'],
-.magic-toast-provider[data-position='top-center'],
+.magic-toast-provider[data-position='top'],
 .magic-toast-provider[data-position='top-right'] {
-  --mt-enter-animation: mt-slide-ttb-in var(--magic-toast-duration)
+  --mt-enter-animation: mt-slide-ttb-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
-  --mt-leave-animation: mt-slide-ttb-out var(--magic-toast-duration)
+  --mt-leave-animation: mt-slide-ttb-out var(--magic-toast-animation-duration)
     var(--ease-in-out);
   --mt-multiplier-y: 1;
   --mt-justify-content: flex-end;
@@ -225,11 +219,11 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='bottom-left'],
-.magic-toast-provider[data-position='bottom-center'],
+.magic-toast-provider[data-position='bottom'],
 .magic-toast-provider[data-position='bottom-right'] {
-  --mt-enter-animation: mt-slide-btt-in var(--magic-toast-duration)
+  --mt-enter-animation: mt-slide-btt-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
-  --mt-leave-animation: mt-slide-btt-out var(--magic-toast-duration)
+  --mt-leave-animation: mt-slide-btt-out var(--magic-toast-animation-duration)
     var(--ease-in-out);
   --mt-multiplier-y: -1;
   --mt-justify-content: flex-end;
@@ -245,21 +239,21 @@ export default /* @__PURE__ */ _defineComponent({
   --mt-align-items: flex-end;
 }
 
-.magic-toast-provider[data-position='center-left'] {
+.magic-toast-provider[data-position='left'] {
   --mt-justify-content: center;
   --mt-align-items: flex-start;
-  --mt-enter-animation: slide-ltr-in var(--magic-toast-duration)
+  --mt-enter-animation: slide-ltr-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
-  --mt-leave-animation: slide-ltr-out var(--magic-toast-duration)
+  --mt-leave-animation: slide-ltr-out var(--magic-toast-animation-duration)
     var(--ease-in-out);
 }
 
-.magic-toast-provider[data-position='center-right'] {
+.magic-toast-provider[data-position='right'] {
   --mt-justify-content: center;
   --mt-align-items: flex-end;
-  --mt-enter-animation: slide-rtl-in var(--magic-toast-duration)
+  --mt-enter-animation: slide-rtl-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
-  --mt-leave-animation: slide-rtl-out var(--magic-toast-duration)
+  --mt-leave-animation: slide-rtl-out var(--magic-toast-animation-duration)
     var(--ease-in-out);
 }
 
@@ -268,20 +262,20 @@ export default /* @__PURE__ */ _defineComponent({
   position: absolute;
 
   &[data-position='bottom-left'],
-  &[data-position='bottom-center'],
+  &[data-position='bottom'],
   &[data-position='bottom-right'] {
     bottom: calc(var(--mt-height) * var(--mt-index) * 1px);
   }
 
   &[data-position='top-left'],
-  &[data-position='top-center'],
+  &[data-position='top'],
   &[data-position='top-right'] {
     top: calc(var(--mt-height) * var(--mt-index) * 1px);
   }
 }
 
 .magic-toast-leave-active {
-  animation: fade-out var(--magic-toast-duration) var(--ease-in-out);
+  animation: fade-out var(--magic-toast-animation-duration) var(--ease-in-out);
   position: absolute;
 }
 
@@ -291,6 +285,6 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-move {
-  transition: all var(--magic-toast-duration) var(--ease-in-out);
+  transition: all var(--magic-toast-animation-duration) var(--ease-in-out);
 }
 </style>

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue.d.ts

@@ -10,14 +10,5 @@ interface MagicToastProps {
     id: MaybeRef<string>;
     options?: MagicToastOptions;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<MagicToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -1,8 +1,8 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["id", "data-expanded", "data-dragging", "data-position", "data-debug"];
-import { ref, computed, inject } from "vue";
+const _hoisted_1 = ["data-id", "data-expanded", "data-dragging", "data-position", "data-debug"];
+import { computed, inject } from "vue";
 import { MagicToastInstanceId } from "../../symbols";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastDrag } from "../composables/private/useToastDrag";
@@ -18,7 +18,6 @@ export default /* @__PURE__ */ _defineComponent({
     if (!instanceId) {
       throw new Error("MagicToastView must be used within a MagicToastProvider");
     }
-    const elRef = ref(void 0);
     const { initializeState } = useToastState(instanceId);
     const state = initializeState();
     const count = computed(() => state.views.length);
@@ -35,10 +34,8 @@ export default /* @__PURE__ */ _defineComponent({
     });
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("li", {
-        id: _ctx.id,
-        ref_key: "elRef",
-        ref: elRef,
         class: "magic-toast-view",
+        "data-id": _ctx.id,
         "data-expanded": _unref(state).expanded,
         "data-dragging": view.value.dragging,
         "data-position": _unref(state).options.position,
@@ -83,7 +80,7 @@ export default /* @__PURE__ */ _defineComponent({
 
 <style>
 :root {
-  --magic-toast-view-transition: all var(--magic-toast-duration)
+  --magic-toast-view-transition: all var(--magic-toast-animation-duration)
     var(--ease-in-out);
 }
 
@@ -94,13 +91,13 @@ export default /* @__PURE__ */ _defineComponent({
   user-select: none;
 
   &[data-position='bottom-left'],
-  &[data-position='bottom-center'],
+  &[data-position='bottom'],
   &[data-position='bottom-right'] {
     padding-top: var(--magic-toast-gap);
   }
 
   &[data-position='top-left'],
-  &[data-position='top-center'],
+  &[data-position='top'],
   &[data-position='top-right'] {
     padding-bottom: var(--magic-toast-gap);
   }
@@ -138,11 +135,11 @@ export default /* @__PURE__ */ _defineComponent({
   cursor: var(--magic-toast-view-cursor-dragging, grabbing);
 }
 
-.magic-toast-view[data-position='center-left'] {
+.magic-toast-view[data-position='left'] {
   position: absolute;
 }
 
-.magic-toast-view[data-position='center-right'] {
+.magic-toast-view[data-position='right'] {
   position: absolute;
 }
 

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

@@ -3,30 +3,31 @@ interface MagicToastViewProps {
     id: string;
     index: number;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLLIElement;
-    };
-    rootEl: HTMLLIElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastViewProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicToastViewProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const state: import("../types").ToastState;
+declare const view: import("vue").ComputedRef<import("../types").ToastView>;
+declare const reversedIndex: import("vue").ComputedRef<number>;
+declare const height: import("vue").ComputedRef<string>;
+declare const offset: import("vue").ComputedRef<string>;
+declare const style: import("vue").ComputedRef<string>, onPointerdown: (e: PointerEvent) => void, onClick: (e: MouseEvent) => Promise<void>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicToastViewProps, {
+    state: typeof state;
+    view: typeof view;
+    reversedIndex: typeof reversedIndex;
+    height: typeof height;
+    offset: typeof offset;
+    style: typeof style;
+    onPointerdown: typeof onPointerdown;
+    onClick: typeof onClick;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicToastViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -2,8 +2,8 @@ import { type MaybeRef } from 'vue';
 export declare function useToastCallback(instanceId: MaybeRef<string>): {
     onBeforeEnter: () => void;
     onEnter: () => void;
-    onAfterEnter: (el: Element) => void;
+    onAfterEnter: (el: HTMLElement) => void;
     onBeforeLeave: () => void;
     onLeave: () => void;
-    onAfterLeave: (el: Element) => void;
+    onAfterLeave: (el: HTMLElement) => void;
 };

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

@@ -12,10 +12,13 @@ export function useToastCallback(instanceId) {
   }
   function onEnter() {
     emitter.emit("enter", toValue(instanceId));
+    if (state.views.length && state.options.layout?.max && state.views.length > state.options.layout.max) {
+      deleteView(state.views[0].id);
+    }
   }
   function onAfterEnter(el) {
     emitter.emit("afterEnter", toValue(instanceId));
-    const view = getView(el.id);
+    const view = getView(el.dataset.id ?? "");
     if (view) {
       const mappedEl = el;
       const style = window.getComputedStyle(mappedEl);
@@ -28,9 +31,6 @@ export function useToastCallback(instanceId) {
       };
       view.dimensions = dimensions;
     }
-    if (state.views.length && state.options.layout?.max && state.views.length > state.options.layout.max) {
-      deleteView(state.views[0].id);
-    }
   }
   function onBeforeLeave() {
     emitter.emit("beforeLeave", toValue(instanceId));
@@ -39,7 +39,7 @@ export function useToastCallback(instanceId) {
     emitter.emit("leave", toValue(instanceId));
   }
   function onAfterLeave(el) {
-    const view = getView(el.id);
+    const view = getView(el.dataset.id ?? "");
     if (view) {
       deleteView(view.id);
     }

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

@@ -64,10 +64,10 @@ export function useToastDrag(args) {
       easing
     } = args2;
     switch (position) {
-      case "top-center":
+      case "top":
       case "top-left":
       case "top-right":
-      case "bottom-center":
+      case "bottom":
       case "bottom-left":
       case "bottom-right":
         interpolate({
@@ -80,8 +80,8 @@ export function useToastDrag(args) {
           }
         });
         break;
-      case "center-left":
-      case "center-right":
+      case "left":
+      case "right":
         interpolate({
           from: draggedX.value,
           to,
@@ -98,10 +98,10 @@ export function useToastDrag(args) {
     const distanceX = Math.abs(draggedX.value - lastDraggedX.value);
     const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
     switch (position) {
-      case "top-center":
+      case "top":
       case "top-left":
       case "top-right":
-      case "bottom-center":
+      case "bottom":
       case "bottom-left":
       case "bottom-right":
         if (distanceY > toValue(threshold).distance) {
@@ -110,8 +110,8 @@ export function useToastDrag(args) {
           interpolateTo.value = 0;
         }
         break;
-      case "center-left":
-      case "center-right":
+      case "left":
+      case "right":
         if (distanceX > toValue(threshold).distance) {
           shouldClose.value = true;
         } else {
@@ -127,10 +127,10 @@ export function useToastDrag(args) {
     const velocityX = elapsed && distanceX ? distanceX / elapsed : 0;
     const velocityY = elapsed && distanceY ? distanceY / elapsed : 0;
     switch (position) {
-      case "top-center":
+      case "top":
       case "top-left":
       case "top-right":
-      case "bottom-center":
+      case "bottom":
       case "bottom-left":
       case "bottom-right":
         if (velocityY > 0.5) {
@@ -139,8 +139,8 @@ export function useToastDrag(args) {
           interpolateTo.value = 0;
         }
         break;
-      case "center-left":
-      case "center-right":
+      case "left":
+      case "right":
         if (velocityX > 0.5) {
           shouldClose.value = true;
         } else {
@@ -151,7 +151,7 @@ export function useToastDrag(args) {
   }
   function setDragged({ x, y }) {
     switch (position) {
-      case "top-center":
+      case "top":
         const newDraggedTC = Math.min(y - originY.value, 0);
         draggedY.value = newDraggedTC;
         break;
@@ -163,7 +163,7 @@ export function useToastDrag(args) {
         const newDraggedTR = Math.min(y - originY.value, 0);
         draggedY.value = newDraggedTR;
         break;
-      case "bottom-center":
+      case "bottom":
         const newDraggedBC = Math.max(y - originY.value, 0);
         draggedY.value = newDraggedBC;
         break;
@@ -175,11 +175,11 @@ export function useToastDrag(args) {
         const newDraggedBR = Math.max(y - originY.value, 0);
         draggedY.value = newDraggedBR;
         break;
-      case "center-left":
+      case "left":
         const newDraggedCL = Math.min(x - originX.value, 0);
         draggedX.value = newDraggedCL;
         break;
-      case "center-right":
+      case "right":
         const newDraggedCR = Math.max(x - originX.value, 0);
         draggedX.value = newDraggedCR;
         break;
@@ -202,18 +202,18 @@ export function useToastDrag(args) {
       });
     } else {
       switch (position) {
-        case "top-center":
+        case "top":
         case "top-left":
         case "top-right":
-        case "bottom-center":
+        case "bottom":
         case "bottom-left":
         case "bottom-right":
           interpolateDragged({
             to: lastDraggedY.value
           });
           break;
-        case "center-left":
-        case "center-right":
+        case "left":
+        case "right":
           interpolateDragged({
             to: lastDraggedX.value
           });
@@ -257,10 +257,10 @@ export function useToastDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;
@@ -297,7 +297,7 @@ export function useToastDrag(args) {
       e.preventDefault();
       return;
     }
-    if (position === "center-left" || position === "center-right") {
+    if (position === "left" || position === "right") {
       return;
     }
     if (state.options.layout?.expand === "click") {

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

@@ -1,7 +1,10 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+import {
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useToastScrollLock() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -12,25 +15,40 @@ export function useToastScrollLock() {
   }
   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)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     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)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px"
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

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

@@ -11,6 +11,7 @@ export declare function useMagicToast(id: MaybeRef<string>): {
     count: import("vue").ComputedRef<number>;
     add: (args: AddArgs) => string;
     remove: (id: string) => void;
+    clear: (transition?: string) => Promise<void>;
     expand: () => void;
     collapse: () => void;
 };

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

@@ -1,11 +1,11 @@
-import { computed, toValue } from "vue";
+import { computed, toValue, nextTick } from "vue";
 import { useToastState } from "./private/useToastState.mjs";
 import { useToastView } from "./private/useToastView.mjs";
 export function useMagicToast(id) {
   const { initializeState } = useToastState(toValue(id));
   const state = initializeState();
   const { initializeView, deleteView } = useToastView(id);
-  const toasts = computed(() => state?.views);
+  const toasts = computed(() => state.views);
   const count = computed(() => toasts.value?.length);
   function add(args) {
     const { id: id2, component, props, duration } = args;
@@ -21,6 +21,13 @@ export function useMagicToast(id) {
   function remove(id2) {
     deleteView(id2);
   }
+  async function clear(transition) {
+    const lastTransition = state.options.transition;
+    state.options.transition = transition ?? "";
+    state.views = [];
+    await nextTick();
+    state.options.transition = lastTransition;
+  }
   function expand() {
     state.expanded = true;
   }
@@ -32,6 +39,7 @@ export function useMagicToast(id) {
     count,
     add,
     remove,
+    clear,
     expand,
     collapse
   };

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

@@ -1,6 +1,6 @@
 import type { MaybeRef } from 'vue';
 import type { RequireAll } from '@maas/vue-equipment/utils';
-type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type ToastView = {
     id: string;
     component: object;

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

@@ -1,6 +1,6 @@
 const defaultOptions = {
   debug: false,
-  position: "bottom-center",
+  position: "bottom",
   duration: 0,
   scrollLock: {
     padding: true

package/dist/plugins/index.d.ts

@@ -8,6 +8,7 @@ export * from './MagicMarquee/index.js';
 export * from './MagicMenu/index.js';
 export * from './MagicModal/index.js';
 export * from './MagicNoise/index.js';
+export * from './MagicPie/index.js';
 export * from './MagicPlayer/index.js';
 export * from './MagicScroll/index.js';
 export * from './MagicToast/index.js';

package/dist/plugins/index.mjs

@@ -8,6 +8,7 @@ export * from "./MagicMarquee/index.mjs";
 export * from "./MagicMenu/index.mjs";
 export * from "./MagicModal/index.mjs";
 export * from "./MagicNoise/index.mjs";
+export * from "./MagicPie/index.mjs";
 export * from "./MagicPlayer/index.mjs";
 export * from "./MagicScroll/index.mjs";
 export * from "./MagicToast/index.mjs";