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

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

@@ -0,0 +1,296 @@
+<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"];
+import {
+  toValue,
+  ref,
+  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";
+import MagicToastView from "./MagicToastView.vue";
+import { MagicToastInstanceId } from "../../symbols";
+import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+import "@maas/vue-equipment/utils/css/animations/squash-y.css";
+import "@maas/vue-equipment/utils/css/animations/slide-ltr-in.css";
+import "@maas/vue-equipment/utils/css/animations/slide-ltr-out.css";
+import "@maas/vue-equipment/utils/css/animations/slide-rtl-in.css";
+import "@maas/vue-equipment/utils/css/animations/slide-rtl-out.css";
+import { useToastListener } from "../composables/private/useToastListener";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicToastProvider",
+  props: {
+    id: { type: null, required: true },
+    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 {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useToastCallback(__props.id);
+    const { onMouseenter, onMouseleave, outsideClickCallback } = useToastListener(__props.id);
+    onClickOutside(listRef, outsideClickCallback);
+    watch(
+      () => __props.options,
+      (value) => {
+        state.options = defu(value, state.options);
+        teleportId.value = useId();
+      },
+      {
+        deep: true
+      }
+    );
+    onBeforeUnmount(() => {
+      deleteState();
+    });
+    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-position": _unref(state).options.position,
+          "data-expanded": _unref(state).expanded,
+          class: "magic-toast-provider"
+        }, _ctx.$attrs), [
+          _createVNode(_TransitionGroup, {
+            ref_key: "listRef",
+            ref: listRef,
+            tag: "ol",
+            class: "magic-toast-provider__list",
+            name: _unref(state).options.transition,
+            "on-before-enter": _unref(onBeforeEnter),
+            "on-enter": _unref(onEnter),
+            "on-after-enter": _unref(onAfterEnter),
+            "on-before-leave": _unref(onBeforeLeave),
+            "on-leave": _unref(onLeave),
+            "on-after-leave": _unref(onAfterLeave),
+            onMouseenter: _unref(onMouseenter),
+            onMouseleave: _unref(onMouseleave)
+          }, {
+            default: _withCtx(() => [
+              (_openBlock(true), _createElementBlock(
+                _Fragment,
+                null,
+                _renderList(_unref(state).views, (view, index) => {
+                  return _openBlock(), _createBlock(MagicToastView, {
+                    id: view.id,
+                    key: view.id,
+                    index
+                  }, {
+                    default: _withCtx(() => [
+                      (_openBlock(), _createBlock(_resolveDynamicComponent(view.component), _mergeProps({ ref_for: true }, view.props, {
+                        onRemove: ($event) => _unref(deleteView)(view.id)
+                      }), null, 16, ["onRemove"]))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["id", "index"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name", "on-before-enter", "on-enter", "on-after-enter", "on-before-leave", "on-leave", "on-after-leave", "onMouseenter", "onMouseleave"])
+        ], 16, _hoisted_1)
+      ], 8, ["to", "disabled"]);
+    };
+  }
+});
+</script>
+
+<style>
+@keyframes mt-slide-ttb-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, calc(-100% - var(--magic-toast-padding-y)), 0);
+  }
+}
+
+@keyframes mt-slide-ttb-in {
+  0% {
+    transform: translate3d(0, calc(-100% - var(--magic-toast-padding-y)), 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes mt-slide-btt-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, calc(100% + var(--magic-toast-padding-y)), 0);
+  }
+}
+
+@keyframes mt-slide-btt-in {
+  0% {
+    transform: translate3d(0, calc(100% + var(--magic-toast-padding-y)), 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+:root {
+  --magic-toast-padding-y: 1rem;
+  --magic-toast-padding-x: 1rem;
+  --magic-toast-gap: 0.75rem;
+  --magic-toast-duration: 175ms;
+  --magic-toast-scale-factor: 0.05;
+  --magic-toast-overlap-y: 1rem;
+
+  --mt-multiplier-y: 0px;
+  --mt-align-items: center;
+  --mt-justify-content: flex-end;
+  --mt-flex-direction: column;
+  --mt-enter-animation: unset;
+  --mt-leave-animation: unset;
+}
+
+.magic-toast-provider {
+  position: var(--magic-toast-position, fixed);
+  inset: var(--magic-toast-inset, 0);
+  width: var(--magic-toast-width, 100%);
+  height: var(--magic-toast-height, 100%);
+  z-index: var(--magic-toast-z-index, 999);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.magic-toast-provider__list {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: var(--magic-toast-padding-y) var(--magic-toast-padding-x);
+  flex-direction: var(--mt-flex-direction);
+  align-items: var(--mt-align-items);
+  justify-content: var(--mt-justify-content);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.magic-toast-provider__list * {
+  pointer-events: all;
+}
+
+.magic-toast-provider[data-position='top-left'],
+.magic-toast-provider[data-position='top-center'],
+.magic-toast-provider[data-position='top-right'] {
+  --mt-enter-animation: mt-slide-ttb-in var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-leave-animation: mt-slide-ttb-out var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-multiplier-y: 1;
+  --mt-justify-content: flex-end;
+  --mt-flex-direction: column-reverse;
+}
+
+.magic-toast-provider[data-position='bottom-left'],
+.magic-toast-provider[data-position='bottom-center'],
+.magic-toast-provider[data-position='bottom-right'] {
+  --mt-enter-animation: mt-slide-btt-in var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-leave-animation: mt-slide-btt-out var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-multiplier-y: -1;
+  --mt-justify-content: flex-end;
+}
+
+.magic-toast-provider[data-position='top-left'],
+.magic-toast-provider[data-position='bottom-left'] {
+  --mt-align-items: flex-start;
+}
+
+.magic-toast-provider[data-position='top-right'],
+.magic-toast-provider[data-position='bottom-right'] {
+  --mt-align-items: flex-end;
+}
+
+.magic-toast-provider[data-position='center-left'] {
+  --mt-justify-content: center;
+  --mt-align-items: flex-start;
+  --mt-enter-animation: slide-ltr-in var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-leave-animation: slide-ltr-out var(--magic-toast-duration)
+    var(--ease-in-out);
+}
+
+.magic-toast-provider[data-position='center-right'] {
+  --mt-justify-content: center;
+  --mt-align-items: flex-end;
+  --mt-enter-animation: slide-rtl-in var(--magic-toast-duration)
+    var(--ease-in-out);
+  --mt-leave-animation: slide-rtl-out var(--magic-toast-duration)
+    var(--ease-in-out);
+}
+
+.magic-toast-enter-active {
+  animation: var(--mt-enter-animation, unset);
+  position: absolute;
+
+  &[data-position='bottom-left'],
+  &[data-position='bottom-center'],
+  &[data-position='bottom-right'] {
+    bottom: calc(var(--mt-height) * var(--mt-index) * 1px);
+  }
+
+  &[data-position='top-left'],
+  &[data-position='top-center'],
+  &[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);
+  position: absolute;
+}
+
+.magic-toast-leave-active:last-child {
+  animation: var(--mt-leave-animation, unset);
+  position: absolute;
+}
+
+.magic-toast-move {
+  transition: all var(--magic-toast-duration) var(--ease-in-out);
+}
+</style>

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

@@ -0,0 +1,23 @@
+import { type MaybeRef } from 'vue';
+import type { MagicToastOptions } from '../types/index.js';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/animations/squash-y.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css';
+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>;
+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

@@ -0,0 +1,155 @@
+<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";
+import { MagicToastInstanceId } from "../../symbols";
+import { useToastState } from "../composables/private/useToastState";
+import { useToastDrag } from "../composables/private/useToastDrag";
+import "@maas/vue-equipment/utils/css/transitions/fade.css";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicToastView",
+  props: {
+    id: { type: String, required: true },
+    index: { type: Number, required: true }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicToastInstanceId, void 0);
+    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);
+    const view = computed(() => state.views[__props.index]);
+    const reversedIndex = computed(() => count.value - __props.index - 1);
+    const height = computed(() => `${view.value.dimensions?.height}px`);
+    const offset = computed(() => {
+      const mapped = state.views.slice(0, reversedIndex.value).reduce((acc, view2) => acc + (view2.dimensions?.height ?? 0), 0);
+      return `${mapped}px`;
+    });
+    const { style, onPointerdown, onClick } = useToastDrag({
+      view: view.value,
+      instanceId
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("li", {
+        id: _ctx.id,
+        ref_key: "elRef",
+        ref: elRef,
+        class: "magic-toast-view",
+        "data-expanded": _unref(state).expanded,
+        "data-dragging": view.value.dragging,
+        "data-position": _unref(state).options.position,
+        "data-debug": _unref(state).options.debug,
+        style: _normalizeStyle({
+          "--mt-index": reversedIndex.value,
+          "--mt-offset": offset.value,
+          "--mt-height": height.value
+        })
+      }, [
+        _createElementVNode(
+          "div",
+          {
+            class: "magic-toast-view__inner",
+            onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
+            onClick: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _unref(onClick) && _unref(onClick)(...args))
+          },
+          [
+            _createElementVNode(
+              "div",
+              {
+                style: _normalizeStyle(_unref(style)),
+                class: "magic-toast-view__drag"
+              },
+              [
+                _renderSlot(_ctx.$slots, "default")
+              ],
+              4
+              /* STYLE */
+            )
+          ],
+          32
+          /* NEED_HYDRATION */
+        )
+      ], 12, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+:root {
+  --magic-toast-view-transition: all var(--magic-toast-duration)
+    var(--ease-in-out);
+}
+
+.magic-toast-view {
+  cursor: var(--magic-toast-view-cursor, grab);
+  position: absolute;
+  list-style: none;
+  user-select: none;
+
+  &[data-position='bottom-left'],
+  &[data-position='bottom-center'],
+  &[data-position='bottom-right'] {
+    padding-top: var(--magic-toast-gap);
+  }
+
+  &[data-position='top-left'],
+  &[data-position='top-center'],
+  &[data-position='top-right'] {
+    padding-bottom: var(--magic-toast-gap);
+  }
+}
+
+.magic-toast-view[data-expanded='false'] {
+  --mt-scale: max(
+    calc(1 - (var(--magic-toast-scale-factor) * var(--mt-index))),
+    0
+  );
+  --mt-translate-y: calc(
+    ((var(--magic-toast-overlap-y) * var(--mt-index) * var(--mt-scale))) *
+      var(--mt-multiplier-y)
+  );
+}
+
+.magic-toast-view[data-expanded='true'] {
+  --mt-scale: 1;
+  --mt-translate-y: calc(var(--mt-offset) * var(--mt-multiplier-y));
+}
+
+.magic-toast-view__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: var(--magic-toast-view-transition);
+  transform: translateY(var(--mt-translate-y)) scale(var(--mt-scale));
+}
+
+.magic-toast-view__drag {
+  display: block;
+}
+
+.magic-toast-view[data-dragging='true'] {
+  cursor: var(--magic-toast-view-cursor-dragging, grabbing);
+}
+
+.magic-toast-view[data-position='center-left'] {
+  position: absolute;
+}
+
+.magic-toast-view[data-position='center-right'] {
+  position: absolute;
+}
+
+.magic-toast-view[data-debug='true'] {
+  outline: solid 1px green;
+  & > * {
+    outline: solid 1px red;
+  }
+}
+</style>

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

@@ -0,0 +1,33 @@
+import '@maas/vue-equipment/utils/css/transitions/fade.css';
+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"]>;
+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 & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,32 +1,9 @@
-import { type Ref, type MaybeRef } from 'vue';
-import type { ActiveToast, MagicToastOptions, Toast } from './../../types/index.js';
-type UseToastCallbackArgs = {
-    id: MaybeRef<string>;
-    mappedOptions: MagicToastOptions;
-    count: Ref<number | undefined>;
-    firstToast: Ref<Toast | undefined>;
-};
-export declare function useToastCallback(args: UseToastCallbackArgs): {
-    onBeforeEnter: (_el: Element) => void;
-    onEnter: (_el: Element) => void;
+import { type MaybeRef } from 'vue';
+export declare function useToastCallback(instanceId: MaybeRef<string>): {
+    onBeforeEnter: () => void;
+    onEnter: () => void;
     onAfterEnter: (el: Element) => void;
-    onBeforeLeave: (_el: Element) => void;
-    onLeave: (el: Element) => void;
-    onAfterLeave: (_el: Element) => void;
-    activeToasts: Ref<{
-        id: string;
-        height: number;
-        padding: {
-            top: number;
-            bottom: number;
-        };
-    }[], ActiveToast[] | {
-        id: string;
-        height: number;
-        padding: {
-            top: number;
-            bottom: number;
-        };
-    }[]>;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: (el: Element) => void;
 };
-export {};

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

@@ -1,43 +1,49 @@
-import { ref, toValue } from "vue";
+import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
-export function useToastCallback(args) {
-  const { id, mappedOptions, count, firstToast } = args;
-  const activeToasts = ref([]);
+import { useToastView } from "./useToastView.mjs";
+import { useToastState } from "./useToastState.mjs";
+export function useToastCallback(instanceId) {
+  const { initializeState } = useToastState(instanceId);
+  const state = initializeState();
   const emitter = useMagicEmitter();
-  function onBeforeEnter(_el) {
-    emitter.emit("beforeEnter", toValue(id));
+  const { deleteView, getView } = useToastView(instanceId);
+  function onBeforeEnter() {
+    emitter.emit("beforeEnter", toValue(instanceId));
   }
-  function onEnter(_el) {
-    emitter.emit("enter", toValue(id));
-    if (count.value && mappedOptions.layout?.max && count.value > mappedOptions.layout.max) {
-      firstToast.value?.remove();
-    }
+  function onEnter() {
+    emitter.emit("enter", toValue(instanceId));
   }
   function onAfterEnter(el) {
-    emitter.emit("afterEnter", toValue(id));
-    const mappedEl = el;
-    const style = window.getComputedStyle(mappedEl);
-    activeToasts.value = [
-      ...activeToasts.value,
-      {
-        id: el.id,
+    emitter.emit("afterEnter", toValue(instanceId));
+    const view = getView(el.id);
+    if (view) {
+      const mappedEl = el;
+      const style = window.getComputedStyle(mappedEl);
+      const dimensions = {
         height: mappedEl.offsetHeight,
         padding: {
           top: parseInt(style.paddingTop),
           bottom: parseInt(style.paddingBottom)
         }
-      }
-    ];
+      };
+      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(_el) {
-    emitter.emit("beforeLeave", toValue(id));
+  function onBeforeLeave() {
+    emitter.emit("beforeLeave", toValue(instanceId));
   }
-  function onLeave(el) {
-    emitter.emit("leave", toValue(id));
-    activeToasts.value = activeToasts.value.filter((item) => item.id !== el.id);
+  function onLeave() {
+    emitter.emit("leave", toValue(instanceId));
   }
-  function onAfterLeave(_el) {
-    emitter.emit("afterLeave", toValue(id));
+  function onAfterLeave(el) {
+    const view = getView(el.id);
+    if (view) {
+      deleteView(view.id);
+    }
+    emitter.emit("afterLeave", toValue(instanceId));
   }
   return {
     onBeforeEnter,
@@ -45,7 +51,6 @@ export function useToastCallback(args) {
     onAfterEnter,
     onBeforeLeave,
     onLeave,
-    onAfterLeave,
-    activeToasts
+    onAfterLeave
   };
 }

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

@@ -0,0 +1,12 @@
+import { type MaybeRef } from 'vue';
+import type { ToastView } from '../../types/index.js';
+interface UseToastDragArgs {
+    instanceId: MaybeRef<string>;
+    view: ToastView;
+}
+export declare function useToastDrag(args: UseToastDragArgs): {
+    onPointerdown: (e: PointerEvent) => void;
+    onClick: (e: MouseEvent) => Promise<void>;
+    style: import("vue").ComputedRef<string>;
+};
+export {};