@maas/vue-equipment 0.5.0 → 0.6.1

package/dist/plugins/MagicScroll/src/types/injectionKeys.d.ts

@@ -1,5 +1,4 @@
-import type { InjectionKey, Ref } from 'vue';
-import type { MaybeRefOrGetter } from '@vueuse/core';
+import type { InjectionKey, Ref, MaybeRefOrGetter } from 'vue';
 declare const ScrollParentKey: InjectionKey<MaybeRefOrGetter<HTMLElement | undefined>>;
 declare const ScrollPositionKey: InjectionKey<{
     x: import("vue").WritableComputedRef<number>;

package/dist/plugins/MagicToast/demo/DemoToast.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="bg-gray-300 text-black rounded-md p-3 w-[250px] max-w-sm text-sm pointer-events-auto cursor-pointer flex items-center"
+  >
+    {{ message }}
+    <button
+      @click="emit('close')"
+      class="text-xs bg-gray-900/5 ml-auto p-2 rounded-full"
+    >
+      Close
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  message: string
+}
+
+const emit = defineEmits(['close'])
+const props = defineProps<Props>()
+</script>

package/dist/plugins/MagicToast/demo/DemoToast.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    message: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    message: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

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

@@ -0,0 +1,5 @@
+import { useToastApi } from './src/composables/useToastApi.js';
+import { useToastEmitter } from './src/composables/useToastEmitter.js';
+import type { Plugin } from 'vue';
+declare const MagicToast: Plugin;
+export { MagicToast, useToastApi, useToastEmitter };

package/dist/plugins/MagicToast/index.mjs

@@ -0,0 +1,9 @@
+import MagicToastComponent from "./src/components/MagicToast.vue";
+import { useToastApi } from "./src/composables/useToastApi.mjs";
+import { useToastEmitter } from "./src/composables/useToastEmitter.mjs";
+const MagicToast = {
+  install: (app) => {
+    app.component("MagicToast", MagicToastComponent);
+  }
+};
+export { MagicToast, useToastApi, useToastEmitter };

package/dist/plugins/MagicToast/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>>;
+export default _default;

package/dist/plugins/MagicToast/nuxt.mjs

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { MagicToast } from "./index.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(MagicToast);
+});

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

@@ -0,0 +1,230 @@
+<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/private/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-x: 1rem;
+  --magic-toast-padding-y: 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-y, 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-y, 1rem);
+    --mt-transform-y: 0;
+  }
+}
+
+.magic-toast.-top-left,
+.magic-toast.-bottom-left {
+  & .magic-toast-component {
+    left: var(--magic-toast-padding-x, 1rem);
+    --mt-transform-x: 0;
+  }
+}
+
+.magic-toast.-top-right,
+.magic-toast.-bottom-right {
+  & .magic-toast-component {
+    left: unset;
+    right: var(--magic-toast-padding-x, 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/private/useToastCallback.d.ts

@@ -0,0 +1,21 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { Options, Toast } from './../../types.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/private/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/private/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/private/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/private/useToastStore.d.ts

@@ -0,0 +1,17 @@
+import type { ToastInstance, AddArgs } from '../../types.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/private/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/composables/useToastApi.d.ts

@@ -0,0 +1,11 @@
+import { type MaybeRef } from 'vue';
+import type { AddArgs } from './../types.js';
+export declare function useToastApi(id?: MaybeRef<string>): {
+    toasts: import("vue").ComputedRef<import("./../types").Toast[] | undefined>;
+    count: import("vue").ComputedRef<number | undefined>;
+    oldest: import("vue").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>;