@maas/vue-equipment 0.4.2 → 0.6.0

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

@@ -1,37 +1,37 @@
-import type { MaybeRef } from '@vueuse/core';
-import type { DefaultOptions } from './../types/index';
+import { type Component, type MaybeRef } from 'vue';
+import type { Options } from './../types/index';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    props: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
     id: {
         type: import("vue").PropType<MaybeRef<string>>;
         required: true;
     };
     component: {
-        type: import("vue").PropType<any>;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, unknown>>;
+        type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<DefaultOptions>;
-        default: () => DefaultOptions;
+        type: import("vue").PropType<Options>;
+        default: () => Options;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    props: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
     id: {
         type: import("vue").PropType<MaybeRef<string>>;
         required: true;
     };
     component: {
-        type: import("vue").PropType<any>;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, unknown>>;
+        type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<DefaultOptions>;
-        default: () => DefaultOptions;
+        type: import("vue").PropType<Options>;
+        default: () => Options;
     };
 }>>, {
-    options: DefaultOptions;
+    options: Options;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts

@@ -1,6 +1,7 @@
-import type { DefaultOptions } from '../types/index.js';
-import type { MaybeElementRef, MaybeRef } from '@vueuse/core';
-export type useModalApiOptions = Pick<DefaultOptions, 'scrollLock'> & {
+import { type MaybeRef } from 'vue';
+import type { Options } from '../types/index.js';
+import type { MaybeElementRef } from '@vueuse/core';
+export type useModalApiOptions = Pick<Options, 'scrollLock'> & {
     focusTarget: MaybeElementRef;
 };
 export declare function useModalApi(id?: MaybeRef<string>, options?: useModalApiOptions): {

package/dist/plugins/MagicModal/src/composables/useModalApi.mjs

@@ -1,6 +1,7 @@
-import { ref, computed } from "vue";
+import { ref, computed, toValue } from "vue";
+import { defu } from "defu";
 import { v4 as uuidv4 } from "uuid";
-import { toValue, useScrollLock } from "@vueuse/core";
+import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 import { useModalStore } from "./useModalStore.mjs";
 const defaultOptions = {
@@ -10,7 +11,7 @@ const defaultOptions = {
 export function useModalApi(id, options) {
   const positionFixedElements = ref([]);
   const mappedId = computed(() => toValue(id) || uuidv4());
-  const mappedOptions = { ...defaultOptions, ...options };
+  const mappedOptions = defu(options, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
   const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
   const { modalStore, addIdToStore, removeIdFromStore } = useModalStore();

package/dist/plugins/MagicModal/src/composables/useModalCallback.d.ts

@@ -0,0 +1,22 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { Options } from '../types.js';
+type Args = {
+    id: MaybeRef<string>;
+    mappedOptions: Options;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    wrapperActive: Ref<boolean>;
+};
+export declare function useModalCallback({ id, mappedOptions, addScrollLockPadding, removeScrollLockPadding, lockScroll, unlockScroll, trapFocus, releaseFocus, wrapperActive, }: Args): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (el: Element) => Promise<void>;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+};
+export {};

package/dist/plugins/MagicModal/src/composables/useModalCallback.mjs

@@ -0,0 +1,60 @@
+import { toValue, nextTick } from "vue";
+import { useModalEmitter } from "./useModalEmitter.mjs";
+export function useModalCallback({
+  id,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive
+}) {
+  function onBeforeEnter(_el) {
+    useModalEmitter().emit("beforeEnter", toValue(id));
+  }
+  function onEnter(_el) {
+    useModalEmitter().emit("enter", toValue(id));
+  }
+  async function onAfterEnter(el) {
+    useModalEmitter().emit("afterEnter", toValue(id));
+    if (mappedOptions.scrollLock) {
+      if (mappedOptions.scrollLockPadding) {
+        addScrollLockPadding();
+      }
+      lockScroll();
+    }
+    if (mappedOptions.focusTrap) {
+      await nextTick();
+      trapFocus();
+    }
+  }
+  function onBeforeLeave(_el) {
+    useModalEmitter().emit("beforeLeave", toValue(id));
+  }
+  function onLeave(el) {
+    useModalEmitter().emit("leave", toValue(id));
+  }
+  function onAfterLeave(_el) {
+    useModalEmitter().emit("afterLeave", toValue(id));
+    if (mappedOptions.scrollLock) {
+      unlockScroll();
+      if (mappedOptions.scrollLockPadding) {
+        removeScrollLockPadding();
+      }
+    }
+    if (mappedOptions.focusTrap) {
+      releaseFocus();
+    }
+    wrapperActive.value = false;
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

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

@@ -1,10 +1,10 @@
-type DefaultOptions = {
+type Options = {
     backdrop?: boolean;
     focusTrap?: boolean;
     scrollLock?: boolean;
     scrollLockPadding?: boolean;
     teleport?: {
-        target: string;
+        target?: string;
         disabled?: boolean;
     };
     transitions?: {
@@ -13,9 +13,11 @@ type DefaultOptions = {
     };
 };
 type ModalEvents = {
-    afterEnter: string;
-    afterLeave: string;
     beforeEnter: string;
+    enter: string;
+    afterEnter: string;
     beforeLeave: string;
+    leave: string;
+    afterLeave: string;
 };
-export type { DefaultOptions, ModalEvents };
+export type { Options, ModalEvents };

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

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

package/dist/plugins/MagicPlayer/src/composables/useControlsApi.mjs

@@ -1,5 +1,4 @@
-import { ref, computed, watch } from "vue";
-import { toValue } from "@vueuse/shared";
+import { ref, computed, watch, toValue } from "vue";
 import {
   useResizeObserver,
   useEventListener,

package/dist/plugins/MagicPlayer/src/composables/useMediaApi.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/shared';
+import { type MaybeRef } from 'vue';
 export declare function useMediaApi(target: MaybeRef<HTMLMediaElement | null | undefined>): {
     currentTime: import("vue").Ref<number>;
     duration: import("vue").Ref<number>;

package/dist/plugins/MagicPlayer/src/composables/useMediaApi.mjs

@@ -1,6 +1,5 @@
-import { ref, watch, unref } from "vue";
-import { toValue, watchIgnorable } from "@vueuse/shared";
-import { useEventListener } from "@vueuse/core";
+import { ref, watch, unref, toValue } from "vue";
+import { useEventListener, watchIgnorable } from "@vueuse/core";
 export function useMediaApi(target) {
   const currentTime = ref(0);
   const duration = ref(0);

package/dist/plugins/MagicPlayer/src/composables/useRuntimeSourceProvider.mjs

@@ -1,5 +1,4 @@
-import { toValue } from "@vueuse/shared";
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, toValue } from "vue";
 export function useRuntimeSourceProvider(args) {
   let hls;
   const loaded = ref(false);

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

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/core';
+import { type MaybeRef } from 'vue';
 type SourceType = 'native' | 'hls';
 type UseControlsArgs = {
     barRef?: MaybeRef<HTMLDivElement | undefined>;

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/MagicScrollCollision.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { ref, inject, computed, onMounted } from 'vue'
-import { toValue } from '@vueuse/shared'
+import { toValue } from '@vueuse/core'
 import { useCollisionDetect } from '../composables/useCollisionDetect'
 import { ScrollPositionKey } from '../types'
 

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/shared';
+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/shared";
 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/shared';
+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);
+});