@maas/vue-equipment 0.4.2 → 0.6.0

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

@@ -0,0 +1,229 @@
+<template>
+  <Teleport
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <div class="magic-toast" :id="toValue(id)" :class="toValue(props.class)">
+      <transition-group
+        tag="ol"
+        ref="listRef"
+        class="magic-toast__inner"
+        :name="mappedOptions.transitions!.list"
+        :on-before-enter="onBeforeEnter"
+        :on-enter="onEnter"
+        :on-after-enter="onAfterEnter"
+        :on-before-leave="onBeforeLeave"
+        :on-leave="onLeave"
+        :on-after-leave="onAfterLeave"
+      >
+        <magic-toast-component
+          v-for="(toast, index) in toasts"
+          :id="toast.id"
+          :key="toast.id"
+          :index="index"
+          :total="count || 0"
+          :siblings="activeElements"
+          :class="{
+            expanded: isExpanded,
+          }"
+          @mouseenter="onMouseenter"
+          @mouseleave="onMouseleave"
+        >
+          <component
+            :is="toast.component"
+            v-bind="toast.props"
+            @close="toast.remove"
+            @click.self="onClick"
+          />
+        </magic-toast-component>
+      </transition-group>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { defu } from 'defu'
+import { toValue, ref, type MaybeRef } from 'vue'
+import { onClickOutside, type MaybeElement } from '@vueuse/core'
+import { defaultOptions } from './../utils/defaultOptions'
+import { useToastApi } from './../composables/useToastApi'
+import { useToastCallback } from './../composables/useToastCallback'
+
+import MagicToastComponent from './MagicToastComponent.vue'
+
+import type { Options } from './../types/index'
+
+interface MagicToastProps {
+  id: MaybeRef<string>
+  class: MaybeRef<string>
+  options?: Options
+}
+
+const props = defineProps<MagicToastProps>()
+
+const { toasts, count, oldest } = useToastApi(props.id)
+
+const mappedOptions = defu(props.options, defaultOptions)
+const isExpanded = ref(mappedOptions.layout?.expand === true)
+const listRef = ref<MaybeElement>()
+
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+  activeElements,
+} = useToastCallback({ id: props.id, mappedOptions, count, oldest })
+
+function onMouseenter() {
+  if (mappedOptions.layout?.expand === 'hover') {
+    isExpanded.value = true
+  }
+}
+
+function onMouseleave() {
+  if (mappedOptions.layout?.expand === 'hover') {
+    isExpanded.value = false
+  }
+}
+
+function onClick() {
+  if (mappedOptions.layout?.expand === 'click') {
+    isExpanded.value = true
+  }
+}
+
+function outsideClickCallback() {
+  if (mappedOptions.layout?.expand === 'click') {
+    isExpanded.value = false
+  }
+}
+
+onClickOutside(listRef, outsideClickCallback)
+</script>
+
+<style lang="css">
+:root {
+  --magic-toast-enter-x: 0;
+  --magic-toast-enter-y: 0;
+  --magic-toast-scale: 0.1;
+  --magic-toast-transform-x: 0;
+  --magic-toast-transform-y: 0;
+  --magic-toast-transition: transform 300ms ease-out;
+  --magic-toast-z-index: 999;
+  --magic-toast-gap: 0.75rem;
+  --magic-toast-padding: 1rem;
+
+  --mt-multiplier: 1;
+  --mt-transform-x: -50%;
+  --mt-transform-y: -50%;
+}
+
+.magic-toast {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--magic-toast-z-index, 999);
+  background: transparent;
+  color: inherit;
+  pointer-events: none;
+}
+
+.magic-toast__inner {
+  position: relative;
+  overflow: scroll;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  & .magic-toast-component {
+    left: 50%;
+    top: 50%;
+    transform: translateX(var(--mt-transform-x, -50%))
+      translateY(var(--mt-transform-y, -50%));
+  }
+}
+
+.magic-toast__inner * {
+  pointer-events: all;
+}
+
+.magic-toast.-top-left,
+.magic-toast.-top-center,
+.magic-toast.-top-right {
+  --magic-toast-transform-y: 10;
+  --magic-toast-enter-y: -100%;
+  --mt-multiplier: 1;
+  & .magic-toast-component {
+    top: var(--magic-toast-padding, 1rem);
+    --mt-transform-y: 0;
+  }
+}
+
+.magic-toast.-bottom-left,
+.magic-toast.-bottom-center,
+.magic-toast.-bottom-right {
+  --magic-toast-transform-y: 10;
+  --magic-toast-enter-y: 100%;
+  --mt-multiplier: -1;
+  & .magic-toast-component {
+    top: unset;
+    bottom: var(--magic-toast-padding, 1rem);
+    --mt-transform-y: 0;
+  }
+}
+
+.magic-toast.-top-left,
+.magic-toast.-bottom-left {
+  & .magic-toast-component {
+    left: var(--magic-toast-padding, 1rem);
+    --mt-transform-x: 0;
+  }
+}
+
+.magic-toast.-top-right,
+.magic-toast.-bottom-right {
+  & .magic-toast-component {
+    left: unset;
+    right: var(--magic-toast-padding, 1rem);
+    --mt-transform-x: 0;
+  }
+}
+
+.magic-toast.-from-left {
+  --magic-toast-enter-x: -100%;
+  --magic-toast-enter-y: 0;
+  --magic-toast-transform-y: 0;
+  --magic-toast-transform-x: -30;
+}
+
+.magic-toast.-from-right {
+  --magic-toast-enter-x: 100%;
+  --magic-toast-enter-y: 0;
+  --magic-toast-transform-y: 0;
+  --magic-toast-transform-x: 30;
+}
+
+.magic-toast--list-enter-active * {
+  transition: all 300ms ease-out;
+}
+
+.magic-toast--list-enter-from * {
+  transform: translateY(var(--magic-toast-enter-y, 0))
+    translateX(var(--magic-toast-enter-x, 0));
+}
+
+.magic-toast--list-leave-active {
+  transition: all 150ms ease-out;
+}
+
+.magic-toast--list-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,28 @@
+import { type MaybeRef } from 'vue';
+import type { Options } from './../types/index';
+declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    class: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    options: {
+        type: import("vue").PropType<Options>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    class: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    options: {
+        type: import("vue").PropType<Options>;
+    };
+}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,101 @@
+<template>
+  <li
+    class="magic-toast-component"
+    ref="elRef"
+    @mouseenter="onMouseenter"
+    :id="id"
+  >
+    <div class="magic-toast-component__inner">
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watchEffect } from 'vue'
+import { type ActiveElement } from './../types'
+
+interface Props {
+  index: number
+  total: number
+  id: string
+  siblings: ActiveElement[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  mouseenter: [event: Event]
+}>()
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+const newerSiblings = computed(() => {
+  return props.siblings.slice(props.index + 1)
+})
+
+function setIndex() {
+  const index = (props.total - props.index - 1).toString()
+  elRef.value?.style.setProperty('--mt-index', index)
+}
+
+function setOffset() {
+  const offset = newerSiblings.value.reduce((acc, curr) => {
+    return acc + curr.height
+  }, 0)
+  elRef.value?.style.setProperty('--mt-offset', `${offset}`)
+}
+
+function onMouseenter(event: Event) {
+  emit('mouseenter', event)
+}
+
+onMounted(() => {
+  setIndex()
+  setOffset()
+})
+
+watchEffect(() => {
+  setIndex()
+  setOffset()
+})
+</script>
+
+<style lang="css">
+.magic-toast-component {
+  --mt-index: 0;
+  --mt-offset: 0;
+  --mt-matrix-scale: calc(1 - (var(--magic-toast-scale) * var(--mt-index, 0)));
+  --mt-matrix-transform-x: calc(
+    var(--magic-toast-transform-x) * var(--mt-index, 0) * var(--mt-multiplier)
+  );
+  --mt-matrix-transform-y: calc(
+    var(--magic-toast-transform-y) * var(--mt-index, 0) * var(--mt-multiplier)
+  );
+  position: absolute;
+}
+
+.magic-toast-component__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: var(--magic-toast-transition, transform 300ms ease-out);
+  transform: matrix(
+    var(--mt-matrix-scale),
+    0,
+    0,
+    var(--mt-matrix-scale),
+    var(--mt-matrix-transform-x),
+    var(--mt-matrix-transform-y)
+  );
+}
+
+.magic-toast-component.expanded {
+  --mt-matrix-scale: 1;
+  --mt-matrix-transform-y: calc(((var(--mt-offset)) * var(--mt-multiplier)));
+  --mt-matrix-transform-x: 0;
+  &:not(:last-child) {
+    & .magic-toast-component__inner {
+      padding-bottom: calc(var(--magic-toast-gap) * var(--mt-index));
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,48 @@
+import { type ActiveElement } from './../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    index: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    total: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    siblings: {
+        type: import("vue").PropType<ActiveElement[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mouseenter: (event: Event) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    total: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    siblings: {
+        type: import("vue").PropType<ActiveElement[]>;
+        required: true;
+    };
+}>> & {
+    onMouseenter?: ((event: Event) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+import { type MaybeRef, type ComputedRef } from 'vue';
+import type { AddArgs } from './../types.js';
+export declare function useToastApi(id?: MaybeRef<string>): {
+    toasts: ComputedRef<import("./../types").Toast[] | undefined>;
+    count: ComputedRef<number | undefined>;
+    oldest: ComputedRef<import("./../types").Toast | undefined>;
+    add: (options: Pick<AddArgs, 'component' | 'props' | 'duration'>) => Promise<string | undefined>;
+    remove: (id: string) => void;
+    clear: () => void;
+};
+export type UseToastApiReturn = ReturnType<typeof useToastApi>;

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
+  };
+}