@maas/vue-equipment 0.5.0 → 0.6.0

package/dist/plugins/MagicScroll/index.mjs

@@ -1,6 +1,7 @@
 import MagicScrollProvider from "./src/components/MagicScrollProvider.vue";
 import MagicScrollScene from "./src/components/MagicScrollScene.vue";
 import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
+import MagicScrollMotion from "./src/components/MagicScrollMotion.vue";
 import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
 import { magicScrollStore } from "./src/store/index.mjs";
 import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
@@ -12,6 +13,7 @@ const MagicScroll = {
     app.component("MagicScrollProvider", MagicScrollProvider);
     app.component("MagicScrollScene", MagicScrollScene);
     app.component("MagicScrollTransform", MagicScrollTransform);
+    app.component("MagicScrollMotion", MagicScrollMotion);
     app.component("MagicScrollCollision", MagicScrollCollision);
     app.provide(StoreKey, magicScrollStore);
   }

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="el" class="m-scroll-motion">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed, onMounted, toRaw, watch } from 'vue'
+import { animate, type Easing } from 'motion'
+import { ScrollProgressKey } from '../types'
+
+interface Props {
+  keyframes: Record<string, any> | null | undefined
+  offset?: number[] | undefined
+  easing?: Easing
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  keyframes: undefined,
+  offset: undefined,
+  easing: 'linear',
+})
+
+const animation = ref()
+const el = ref()
+
+const progress = inject(
+  ScrollProgressKey,
+  computed(() => 0),
+)
+
+function createAnimation(currentTime: number = 0) {
+  if (!props.keyframes) return
+  animation.value = animate(toRaw(el.value), props.keyframes, {
+    duration: 1,
+    easing: props.easing || 'linear',
+    offset: props.offset,
+  })
+  animation.value.stop()
+  animation.value.currentTime = currentTime
+}
+
+onMounted(() => {
+  createAnimation()
+})
+
+watch(progress, (value) => {
+  if (!animation.value || !props.keyframes) return
+  animation.value.currentTime = value
+})
+
+watch(
+  () => props.keyframes,
+  () => {
+    createAnimation(progress.value)
+  },
+)
+</script>

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue.d.ts

@@ -0,0 +1,42 @@
+import { type Easing } from 'motion';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    offset: {
+        type: import("vue").PropType<number[]>;
+        default: undefined;
+    };
+    keyframes: {
+        type: import("vue").PropType<Record<string, any> | null | undefined>;
+        required: true;
+        default: undefined;
+    };
+    easing: {
+        type: import("vue").PropType<Easing>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    offset: {
+        type: import("vue").PropType<number[]>;
+        default: undefined;
+    };
+    keyframes: {
+        type: import("vue").PropType<Record<string, any> | null | undefined>;
+        required: true;
+        default: undefined;
+    };
+    easing: {
+        type: import("vue").PropType<Easing>;
+        default: string;
+    };
+}>>, {
+    offset: number[];
+    keyframes: Record<string, any> | null | undefined;
+    easing: Easing;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicScroll/src/components/MagicScrollTransform.vue.d.ts

@@ -3,10 +3,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    as: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     scaleX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -23,6 +19,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     translateX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -36,10 +36,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    as: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     scaleX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -56,6 +52,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     translateX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -66,11 +66,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     scale: number;
-    as: string;
     scaleX: number;
     scaleY: number;
     skewX: number;
     skewY: number;
+    as: string;
     translateX: number;
     translateY: number;
 }, {}>, {

package/dist/plugins/MagicScroll/src/composables/useProgress.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/core';
+import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
 import type { FromTo } from '../types.js';
 type UseProgressParams = {
     child: MaybeRef<HTMLElement | null | undefined>;

package/dist/plugins/MagicScroll/src/composables/useProgress.mjs

@@ -1,6 +1,5 @@
-import { ref, inject } from "vue";
+import { ref, inject, toValue } from "vue";
 import { useElementBounding, useWindowSize } from "@vueuse/core";
-import { toValue } from "@vueuse/core";
 import { ScrollPositionKey } from "../types/index.mjs";
 import { clampValue } from "../utils/index.mjs";
 export function useProgress(params) {

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,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>;