@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,10 +1,50 @@
-<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"];
+<template>
+  <teleport
+    :to="state.options.teleport?.target"
+    :disabled="state.options.teleport?.disabled"
+  >
+    <div
+      :data-id="mappedId"
+      :data-position="state.options.position"
+      :data-expanded="state.expanded"
+      class="magic-toast-provider"
+      v-bind="$attrs"
+    >
+      <transition-group
+        ref="list"
+        tag="ol"
+        class="magic-toast-provider__list"
+        :name="state.options.transition"
+        @before-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+        @mouseenter="onMouseenter"
+        @mouseleave="onMouseleave"
+      >
+        <magic-toast-view
+          v-for="(view, index) in state.views"
+          :id="view.id"
+          :key="view.id"
+          :index="index"
+        >
+          <component
+            :is="view.component"
+            v-bind="view.props"
+            @remove="deleteView(view.id)"
+          />
+        </magic-toast-view>
+      </transition-group>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
 import {
   toValue,
-  ref,
+  useTemplateRef,
   provide,
   watch,
   onBeforeUnmount
@@ -13,109 +53,50 @@ import { onClickOutside } from "@vueuse/core";
 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 }
+import MagicToastView from "./MagicToastView.vue";
+import { MagicToastInstanceId } from "../symbols";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/squash-y.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css";
+const { id, options } = defineProps({
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
+});
+const mappedId = toValue(id);
+defineOptions({
+  inheritAttrs: false
+});
+const { deleteView } = useToastView(id);
+const { deleteState, initializeState } = useToastState(id);
+const state = initializeState(options);
+const listRef = useTemplateRef("list");
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave
+} = useToastCallback(id);
+const { onMouseenter, onMouseleave, outsideClickCallback } = useToastListener(id);
+onClickOutside(listRef, outsideClickCallback);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
   },
-  setup(__props) {
-    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) => {
-        initializeState(value);
-      },
-      {
-        deep: true
-      }
-    );
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    provide(MagicToastInstanceId, __props.id);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_Teleport, {
-        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"]);
-    };
+  {
+    deep: true
   }
+);
+onBeforeUnmount(() => {
+  deleteState();
 });
+provide(MagicToastInstanceId, id);
 </script>
 
 <style>
@@ -208,7 +189,7 @@ 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-animation-duration)
     var(--ease-in-out);
@@ -220,7 +201,7 @@ 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-animation-duration)
     var(--ease-in-out);
@@ -240,7 +221,7 @@ 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-animation-duration)
@@ -249,7 +230,7 @@ export default /* @__PURE__ */ _defineComponent({
     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-animation-duration)
@@ -263,13 +244,13 @@ 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);
   }

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

@@ -1,23 +1,15 @@
 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';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/squash-y.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/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>;
+declare const __VLS_export: import("vue").DefineComponent<MagicToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 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.d.vue.ts

@@ -0,0 +1,17 @@
+interface MagicToastViewProps {
+    id: string;
+    index: number;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,83 +1,67 @@
-<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";
+<template>
+  <li
+    class="magic-toast-view"
+    :data-id="id"
+    :data-expanded="state.expanded"
+    :data-dragging="view?.dragging"
+    :data-position="state.options.position"
+    :data-debug="state.options.debug"
+    :style="{
+  '--mt-index': reversedIndex,
+  '--mt-offset': offset,
+  '--mt-height': height
+}"
+  >
+    <div
+      class="magic-toast-view__inner"
+      @pointerdown="onPointerdown"
+      @click="onClick"
+    >
+      <div :style="style" class="magic-toast-view__drag">
+        <slot />
+      </div>
+    </div>
+  </li>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
+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);
-    };
-  }
+const { id, index } = defineProps({
+  id: { type: String, required: true },
+  index: { type: Number, required: true }
+});
+const magicError = useMagicError({
+  prefix: "MagicToast",
+  source: "MagicToastView"
+});
+const instanceId = inject(MagicToastInstanceId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicToastView must be used within a MagicToastProvider",
+  errorCode: "missing_instance_id"
+});
+const { initializeState } = useToastState(instanceId);
+const state = initializeState();
+const count = computed(() => state.views.length);
+const view = computed(() => state.views[index]);
+const reversedIndex = computed(() => count.value - index - 1);
+magicError.assert(view.value, {
+  message: "MagicToastView could not be registered",
+  errorCode: "missing_view"
+});
+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
 });
 </script>
 
@@ -94,13 +78,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 +122,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

@@ -1,32 +1,16 @@
-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;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-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 __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 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.mjs

@@ -1,5 +1,5 @@
 import { toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useToastView } from "./useToastView.mjs";
 import { useToastState } from "./useToastState.mjs";
 export function useToastCallback(instanceId) {
@@ -12,18 +12,19 @@ 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) {
+    if (state.views.length && state.views[0] && 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 mappedEl = el;
+    const view = getView(mappedEl.dataset.id ?? "");
     if (view) {
-      const mappedEl = el;
-      const style = window.getComputedStyle(mappedEl);
+      const mappedEl2 = el;
+      const style = window.getComputedStyle(mappedEl2);
       const dimensions = {
-        height: mappedEl.offsetHeight,
+        height: mappedEl2.offsetHeight,
         padding: {
           top: parseInt(style.paddingTop),
           bottom: parseInt(style.paddingBottom)
@@ -39,7 +40,8 @@ export function useToastCallback(instanceId) {
     emitter.emit("leave", toValue(instanceId));
   }
   function onAfterLeave(el) {
-    const view = getView(el.id);
+    const mappedEl = el;
+    const view = getView(mappedEl.dataset.id ?? "");
     if (view) {
       deleteView(view.id);
     }