@maas/vue-equipment 0.5.0 → 0.6.0

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

@@ -0,0 +1,60 @@
+import {
+  computed,
+  onUnmounted,
+  onBeforeMount,
+  toValue,
+  markRaw
+} from "vue";
+import { v4 as uuidv4 } from "uuid";
+import { useToastStore } from "./useToastStore.mjs";
+export function useToastApi(id) {
+  const { findInstance, addInstance, removeInstance } = useToastStore();
+  const mappedId = computed(() => toValue(id) || uuidv4());
+  const instance = computed(() => findInstance(toValue(mappedId)));
+  function initialize() {
+    const id2 = toValue(mappedId);
+    if (!findInstance(id2)) {
+      return addInstance(id2);
+    }
+  }
+  function destroy(id2) {
+    if (!id2)
+      return;
+    clear();
+    removeInstance(toValue(id2));
+  }
+  const toasts = computed(() => instance.value?.toasts);
+  const count = computed(() => toasts.value?.length);
+  const oldest = computed(() => toasts.value?.[0]);
+  async function add(options) {
+    const { component, props, duration } = options;
+    const id2 = instance.value?.add({
+      props,
+      duration,
+      component: markRaw(component)
+    });
+    return id2;
+  }
+  function remove(id2) {
+    instance.value?.remove(id2);
+  }
+  function clear() {
+    if (!instance.value)
+      return;
+    instance.value.toasts = [];
+  }
+  onBeforeMount(() => {
+    initialize();
+  });
+  onUnmounted(() => {
+    destroy(toValue(mappedId));
+  });
+  return {
+    toasts,
+    count,
+    oldest,
+    add,
+    remove,
+    clear
+  };
+}

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

@@ -0,0 +1,21 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { Options, Toast } from './../types/index.js';
+type Args = {
+    id: MaybeRef<string>;
+    mappedOptions: Options;
+    count: Ref<number | undefined>;
+    oldest: Ref<Toast | undefined>;
+};
+export declare function useToastCallback({ id, mappedOptions, count, oldest }: Args): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (el: Element) => void;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+    activeElements: Ref<{
+        id: string;
+        height: number;
+    }[]>;
+};
+export {};

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

@@ -0,0 +1,43 @@
+import { ref, toValue } from "vue";
+import { useToastEmitter } from "./useToastEmitter.mjs";
+export function useToastCallback({ id, mappedOptions, count, oldest }) {
+  const activeElements = ref([]);
+  function onBeforeEnter(_el) {
+    useToastEmitter().emit("beforeEnter", toValue(id));
+  }
+  function onEnter(_el) {
+    useToastEmitter().emit("enter", toValue(id));
+    if (count.value && mappedOptions.layout?.max && count.value > mappedOptions.layout.max) {
+      oldest.value?.remove();
+    }
+  }
+  function onAfterEnter(el) {
+    useToastEmitter().emit("afterEnter", toValue(id));
+    const mappedEl = el;
+    activeElements.value = [
+      ...activeElements.value,
+      { id: el.id, height: mappedEl.offsetHeight }
+    ];
+  }
+  function onBeforeLeave(_el) {
+    useToastEmitter().emit("beforeLeave", toValue(id));
+  }
+  function onLeave(el) {
+    useToastEmitter().emit("leave", toValue(id));
+    activeElements.value = activeElements.value.filter(
+      (item) => item.id !== el.id
+    );
+  }
+  function onAfterLeave(_el) {
+    useToastEmitter().emit("afterLeave", toValue(id));
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave,
+    activeElements
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { ToastEvents } from '../types.js';
+export declare function useToastEmitter(): {
+    on: {
+        <Key extends keyof ToastEvents>(type: Key, handler: import("mitt").Handler<ToastEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<ToastEvents>): void;
+    };
+    off: {
+        <Key_1 extends keyof ToastEvents>(type: Key_1, handler?: import("mitt").Handler<ToastEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<ToastEvents>): void;
+    };
+    emit: {
+        <Key_2 extends keyof ToastEvents>(type: Key_2, event: ToastEvents[Key_2]): void;
+        <Key_3 extends keyof ToastEvents>(type: undefined extends ToastEvents[Key_3] ? Key_3 : never): void;
+    };
+};

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

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useToastEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

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

@@ -0,0 +1,4 @@
+import type { ToastInstance, AddArgs } from './../types.js';
+export declare function useToastInternalApi(): {
+    addToast: (args: AddArgs, ctx: ToastInstance) => string;
+};

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

@@ -0,0 +1,26 @@
+import { v4 as uuidv4 } from "uuid";
+export function useToastInternalApi() {
+  function removeToastAfterTimeout(id, duration, ctx) {
+    if (duration > 0) {
+      setTimeout(() => {
+        ctx.remove(id);
+      }, duration);
+    }
+  }
+  function addToast(args, ctx) {
+    const id = uuidv4();
+    let { component, props, duration = 0 } = args;
+    const toast = {
+      component,
+      props,
+      id,
+      remove: () => ctx.remove(id)
+    };
+    ctx.toasts.push(toast);
+    removeToastAfterTimeout(id, duration, ctx);
+    return id;
+  }
+  return {
+    addToast
+  };
+}

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

@@ -0,0 +1,17 @@
+import type { ToastInstance, AddArgs } from '../types/index.js';
+export declare function useToastStore(): {
+    toastStore: import("vue").Ref<{
+        id: string;
+        toasts: {
+            id: string;
+            component: Object;
+            props?: Record<string, any> | undefined;
+            remove: Function;
+        }[];
+        add: (args: AddArgs) => string;
+        remove: (id: string) => void;
+    }[]>;
+    findInstance: (id: string) => ToastInstance | undefined;
+    addInstance: (id: string) => ToastInstance;
+    removeInstance: (id: string) => void;
+};

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

@@ -0,0 +1,41 @@
+import { ref } from "vue";
+import { useToastInternalApi } from "./useToastInternalApi.mjs";
+const toastStore = ref([]);
+export function useToastStore() {
+  const { addToast } = useToastInternalApi();
+  function createInstance(id) {
+    const instance = {
+      id,
+      toasts: [],
+      add: function(args) {
+        return addToast(args, this);
+      },
+      remove: function(id2) {
+        this.toasts = this.toasts.filter((toast) => toast.id !== id2);
+      }
+    };
+    return instance;
+  }
+  function findInstance(id) {
+    const instance = toastStore.value.find(
+      (instance2) => instance2.id === id
+    );
+    return instance;
+  }
+  function addInstance(id) {
+    const instance = createInstance(id);
+    toastStore.value.push(instance);
+    return instance;
+  }
+  function removeInstance(id) {
+    toastStore.value = toastStore.value.filter(
+      (instance) => instance.id !== id
+    );
+  }
+  return {
+    toastStore,
+    findInstance,
+    addInstance,
+    removeInstance
+  };
+}

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

@@ -0,0 +1,42 @@
+import type { MaybeRef } from 'vue';
+type Toast = {
+    id: string;
+    component: Object;
+    props?: MaybeRef<Record<string, any>>;
+    remove: Function;
+};
+type ToastInstance = {
+    id: string;
+    toasts: Toast[];
+    add: (args: AddArgs) => string;
+    remove: (id: string) => void;
+};
+type Options = {
+    teleport?: {
+        target?: string;
+        disabled?: boolean;
+    };
+    transitions?: {
+        list: string;
+    };
+    layout?: {
+        expand?: boolean | 'hover' | 'click';
+        max?: false | number;
+    };
+};
+type ActiveElement = {
+    id: string;
+    height: number;
+};
+type ToastEvents = {
+    beforeEnter: string;
+    enter: string;
+    afterEnter: string;
+    beforeLeave: string;
+    leave: string;
+    afterLeave: string;
+};
+type AddArgs = Pick<Toast, 'component' | 'props'> & {
+    duration?: number;
+};
+export type { Toast, ToastInstance, Options, ActiveElement, ToastEvents, AddArgs, };

package/dist/plugins/MagicToast/src/utils/defaultOptions.d.ts

@@ -0,0 +1,3 @@
+import type { Options } from '../types/index.js';
+declare const defaultOptions: Options;
+export { defaultOptions };

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

@@ -0,0 +1,14 @@
+const defaultOptions = {
+  teleport: {
+    target: "body",
+    disabled: false
+  },
+  transitions: {
+    list: "magic-toast--list"
+  },
+  layout: {
+    expand: "click",
+    max: 4
+  }
+};
+export { defaultOptions };

package/dist/plugins/index.d.ts

@@ -1,4 +0,0 @@
-export * from './MagicModal.js';
-export * from './MagicPlayer.js';
-export * from './MagicScroll.js';
-export * from './MagicMarquee.js';

package/dist/plugins/index.mjs

@@ -1,4 +0,0 @@
-export * from "./MagicModal/index.mjs";
-export * from "./MagicPlayer/index.mjs";
-export * from "./MagicScroll/index.mjs";
-export * from "./MagicMarquee/index.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",
@@ -54,15 +54,21 @@
   "license": "MIT",
   "main": "./dist/nuxt/module.cjs",
   "peerDependencies": {
+    "@maas/magic-timer": "^0.1.3",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "focus-trap": "^7.5.2",
     "hls.js": "^1.4.10",
+    "luxon": "^3.4.2",
     "mitt": "^3.0.1",
+    "motion": "^10.16.2",
     "nuxt": "^3.5.1",
     "uuid": "^9.0.0"
   },
   "peerDependenciesMeta": {
+    "@maas/magic-timer": {
+      "optional": false
+    },
     "@vueuse/core": {
       "optional": false
     },
@@ -72,9 +78,15 @@
     "hls.js": {
       "optional": false
     },
+    "luxon": {
+      "optional": false
+    },
     "mitt": {
       "optional": false
     },
+    "motion": {
+      "optional": false
+    },
     "nuxt": {
       "optional": false
     },