@maas/vue-equipment 0.11.2 → 0.11.4

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.11.1"
+  "version": "0.11.3"
 }

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

@@ -6,7 +6,7 @@
       :disabled="mappedOptions.teleport?.disabled"
     >
       <component
-        :is="options.tag"
+        :is="mappedOptions.tag"
         ref="modal"
         class="magic-modal"
         :id="toValue(id)"
@@ -68,7 +68,7 @@ import { defaultOptions } from './../utils/defaultOptions'
 import { useModalApi } from './../composables/useModalApi'
 import { useModalCallback } from '../composables/private/useModalCallback'
 
-import type { Options } from './../types/index'
+import type { ModalOptions } from './../types/index'
 
 import { createDefu } from 'defu'
 
@@ -85,7 +85,7 @@ interface MagicModalProps {
   class?: MaybeRef<string>
   component?: Component
   props?: Record<string, unknown>
-  options?: Options
+  options?: ModalOptions
 }
 
 const props = withDefaults(defineProps<MagicModalProps>(), {
@@ -159,7 +159,10 @@ watch(isActive, async (value) => {
 })
 </script>
 
-<style lang="postcss">
+<style>
+@import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+@import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+
 :root {
   --magic-modal-z-index: 999;
   --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
@@ -169,6 +172,28 @@ watch(isActive, async (value) => {
   --magic-modal-content-overflow-y: auto;
 }
 
+@keyframes magic-modal-content-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes magic-modal-content-leave {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+}
+
 .magic-modal {
   position: fixed;
   inset: 0;
@@ -209,64 +234,30 @@ watch(isActive, async (value) => {
 }
 
 /* Content */
-.magic-modal--content-enter-active,
-.magic-modal--content-leave-active {
-  transition: all 300ms ease-out;
-}
-
-.magic-modal--content-enter-from {
-  opacity: 0;
-  transform: translateY(2rem);
-}
-
-.magic-modal--content-enter-to {
-  opacity: 1;
-  transform: translateY(0);
+.magic-modal--content-enter-active {
+  animation: magic-modal-content-enter 300ms ease;
 }
 
-.magic-modal--content-leave-from {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.magic-modal--content-leave-to {
-  opacity: 0;
-  transform: scale(1.02);
+.magic-modal--content-leave-active {
+  animation: magic-modal-content-leave 300ms ease;
 }
 
 @media (prefers-reduced-motion) {
-  .magic-modal--content-enter-active,
-  .magic-modal--content-leave-active {
-    transition: opacity 300ms ease-out;
+  .magic-modal--content-enter-active {
+    animation: fade-in 300ms ease;
   }
 
-  .magic-modal--content-enter-from,
-  .magic-modal--content-enter-to,
-  .magic-modal--content-leave-from,
-  .magic-modal--content-leave-to {
-    transform: none;
+  .magic-modal--content-leave-active {
+    animation: fade-out 300ms ease;
   }
 }
 
 /* Backdrop */
-.magic-modal--backdrop-enter-active,
-.magic-modal--backdrop-leave-active {
-  transition: opacity 300ms ease-out;
+.magic-modal--backdrop-enter-active {
+  animation: fade-in 300ms ease;
 }
 
-.magic-modal--backdrop-enter-from {
-  opacity: 0;
-}
-
-.magic-modal--backdrop-enter-to {
-  opacity: 1;
-}
-
-.magic-modal--backdrop-leave-from {
-  opacity: 1;
-}
-
-.magic-modal--backdrop-leave-to {
-  opacity: 0;
+.magic-modal--backdrop-leave-active {
+  animation: fade-out 300ms ease;
 }
 </style>

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

@@ -1,5 +1,5 @@
 import { type Component, type MaybeRef } from 'vue';
-import type { Options } from './../types/index';
+import type { ModalOptions } from './../types/index';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     props: {
         type: import("vue").PropType<Record<string, unknown>>;
@@ -15,8 +15,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<Options>;
-        default: () => Options;
+        type: import("vue").PropType<ModalOptions>;
+        default: () => RequireAll<ModalOptions>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     props: {
@@ -33,11 +33,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<Options>;
-        default: () => Options;
+        type: import("vue").PropType<ModalOptions>;
+        default: () => RequireAll<ModalOptions>;
     };
 }>>, {
-    options: Options;
+    options: ModalOptions;
 }, {}>, {
     backdrop?(_: {}): any;
     default?(_: {}): any;

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

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { Options } from '../../types.js';
+import type { ModalOptions } from '../../types.js';
 type Args = {
     id: MaybeRef<string>;
-    mappedOptions: Options;
+    mappedOptions: ModalOptions;
     addScrollLockPadding: () => void;
     removeScrollLockPadding: () => void;
     lockScroll: () => void;

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

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

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

@@ -1,4 +1,4 @@
-type Options = {
+export type ModalOptions = {
     backdrop?: boolean;
     focusTrap?: boolean;
     scrollLock?: boolean;
@@ -14,7 +14,7 @@ type Options = {
     tag?: 'dialog' | 'div';
     keys?: string[] | false;
 };
-type ModalEvents = {
+export type ModalEvents = {
     beforeEnter: string;
     enter: string;
     afterEnter: string;
@@ -22,4 +22,3 @@ type ModalEvents = {
     leave: string;
     afterLeave: string;
 };
-export type { Options, ModalEvents };

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

@@ -1,3 +1,4 @@
-import type { Options } from '../types/index.js';
-declare const defaultOptions: Options;
+import type { ModalOptions } from '../types/index.js';
+import type { RequireAll } from '@maas/vue-equipment/utils/types/RequireAll';
+declare const defaultOptions: RequireAll<ModalOptions>;
 export { defaultOptions };

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

@@ -8,39 +8,28 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, computed, watch, ref, shallowRef } from 'vue'
+import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
 import { useResizeObserver, useDebounceFn } from '@vueuse/core'
 import { useNoiseApi } from '../composables/useNoiseApi'
+import type { NoiseOptions } from '../types'
 
 interface Props {
-  pixelSize?: number
-  tiles?: number
-  fps?: number
-  color?: string
+  options: NoiseOptions
   pause?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  pixelSize: 2,
-  tiles: 32,
-  fps: 8,
-  color: '#000',
   pause: false,
 })
 
 const canvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
 const offCanvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
 
-const options = computed(() => {
-  return {
-    pixelSize: props.pixelSize,
-    tiles: props.tiles,
-    fps: props.fps,
-    color: props.color,
-  }
+const noiseApi = useNoiseApi({
+  canvasRef,
+  offCanvasRef,
+  options: props.options,
 })
-
-const noiseApi = useNoiseApi({ canvasRef, offCanvasRef, options })
 const {
   initialize,
   drawControls,

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

@@ -1,50 +1,23 @@
+import type { NoiseOptions } from '../types';
 declare const _default: import("vue").DefineComponent<{
     pause: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    pixelSize: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    tiles: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    fps: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        default: string;
+    options: {
+        type: import("vue").PropType<NoiseOptions>;
+        required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     pause: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    pixelSize: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    tiles: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    fps: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        default: string;
+    options: {
+        type: import("vue").PropType<NoiseOptions>;
+        required: true;
     };
 }>>, {
     pause: boolean;
-    pixelSize: number;
-    tiles: number;
-    fps: number;
-    color: string;
 }, {}>;
 export default _default;

package/dist/plugins/MagicNoise/src/composables/useNoiseApi.d.ts

@@ -1,14 +1,9 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { RafControls } from '../types.js';
+import type { NoiseOptions, RafControls } from '../types.js';
 type UseNoiseApiArgs = {
     canvasRef: Ref<HTMLCanvasElement | undefined>;
     offCanvasRef: Ref<HTMLCanvasElement | undefined>;
-    options?: MaybeRef<{
-        pixelSize?: number;
-        tiles?: number;
-        color?: string;
-        fps?: number;
-    }>;
+    options?: MaybeRef<NoiseOptions>;
 };
 export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNoiseApiArgs): {
     initialize: () => void;

package/dist/plugins/MagicNoise/src/composables/useNoiseApi.mjs

@@ -6,12 +6,7 @@ import {
   useThrottleFn,
   useRafFn
 } from "@vueuse/core";
-const defaultOptions = {
-  pixelSize: 2,
-  tiles: 32,
-  fps: 12,
-  color: "white"
-};
+import { defaultOptions } from "../utils/defaultOptions.mjs";
 export function useNoiseApi({
   canvasRef,
   offCanvasRef,
@@ -54,7 +49,7 @@ export function useNoiseApi({
     pixelSize,
     rotation
   }) {
-    if (pixelSize <= 0 || pixelSize <= 0) {
+    if (pixelSize <= 0) {
       return [];
     }
     const pixels2 = [];

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

@@ -7,3 +7,9 @@ export type Pixel = {
     r?: number;
 };
 export type RafControls = Pick<Pausable, 'pause' | 'resume'>;
+export type NoiseOptions = {
+    pixelSize?: number;
+    tiles?: number;
+    fps?: number;
+    color?: string;
+};

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

@@ -0,0 +1,4 @@
+import type { NoiseOptions } from '../types/index.js';
+import type { RequireAll } from '@maas/vue-equipment/utils/types/RequireAll';
+declare const defaultOptions: RequireAll<NoiseOptions>;
+export { defaultOptions };

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

@@ -0,0 +1,7 @@
+const defaultOptions = {
+  pixelSize: 2,
+  tiles: 32,
+  fps: 12,
+  color: "white"
+};
+export { defaultOptions };

package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue

@@ -137,7 +137,7 @@ defineExpose({
   --magic-player-controls-overlay-background-color: rgba(0, 0, 0, 0.3);
   --magic-player-controls-overlay-color: rgba(255, 255, 255, 1);
   --magic-player-controls-transition-duration: 300ms;
-  --magic-player-controls-transition-timing-function: ease-out: ;
+  --magic-player-controls-transition-timing-function: ease: ;
 }
 
 @media (max-width: 640px) {
@@ -160,7 +160,7 @@ defineExpose({
   color: var(--magic-player-controls-overlay-color);
   transition-duration: 300ms;
   transition-property: opacity;
-  transition-timing-function: ease-out;
+  transition-timing-function: ease;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue

@@ -111,7 +111,7 @@ const {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
-  transition: transform 300ms ease-out;
+  transition: transform 300ms ease;
   z-index: 10;
   background-color: var(--magic-player-thumb-bg-color);
   border-radius: 50rem;

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

@@ -53,12 +53,12 @@ import { useToastCallback } from './../composables/private/useToastCallback'
 
 import MagicToastComponent from './MagicToastComponent.vue'
 
-import type { Options } from './../types/index'
+import type { ToastOptions } from './../types/index'
 
 interface MagicToastProps {
   id: MaybeRef<string>
   class: MaybeRef<string>
-  options?: Options
+  options?: ToastOptions
 }
 
 const props = defineProps<MagicToastProps>()
@@ -112,13 +112,19 @@ watch(
 </script>
 
 <style lang="css">
+@import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
+@import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
+
 :root {
-  --magic-toast-enter-x: 0;
-  --magic-toast-enter-y: 0;
+  --magic-toast-enter-animation: unset;
+  --magic-toast-leave-animation: fade-out 300ms ease;
   --magic-toast-scale: 0.1;
   --magic-toast-transform-x: 0;
   --magic-toast-transform-y: 0;
-  --magic-toast-transition: transform 300ms ease-out;
+  --magic-toast-transition: transform 300ms ease;
   --magic-toast-z-index: 999;
   --magic-toast-gap: 0.75rem;
   --magic-toast-padding-x: 1rem;
@@ -166,10 +172,11 @@ watch(
 .magic-toast.-top-center,
 .magic-toast.-top-right {
   --magic-toast-transform-y: 10;
-  --magic-toast-enter-y: -100%;
+  --magic-toast-enter-animation: slide-ttb-in 300ms ease;
   --mt-multiplier: 1;
   & .magic-toast-component {
-    top: var(--magic-toast-padding-y, 1rem);
+    top: 0;
+    padding-top: var(--magic-toast-padding-y, 1rem);
     --mt-transform-y: 0;
   }
 }
@@ -178,11 +185,12 @@ watch(
 .magic-toast.-bottom-center,
 .magic-toast.-bottom-right {
   --magic-toast-transform-y: 10;
-  --magic-toast-enter-y: 100%;
+  --magic-toast-enter-animation: slide-btt-in 300ms ease;
   --mt-multiplier: -1;
   & .magic-toast-component {
     top: unset;
-    bottom: var(--magic-toast-padding-y, 1rem);
+    bottom: 0;
+    padding-bottom: var(--magic-toast-padding-y, 1rem);
     --mt-transform-y: 0;
   }
 }
@@ -190,7 +198,8 @@ watch(
 .magic-toast.-top-left,
 .magic-toast.-bottom-left {
   & .magic-toast-component {
-    left: var(--magic-toast-padding-x, 1rem);
+    left: 0;
+    padding-left: var(--magic-toast-padding-x, 1rem);
     --mt-transform-x: 0;
   }
 }
@@ -199,39 +208,29 @@ watch(
 .magic-toast.-bottom-right {
   & .magic-toast-component {
     left: unset;
-    right: var(--magic-toast-padding-x, 1rem);
+    right: 0;
+    padding-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-enter-animation: slide-ltr-in 300ms ease;
   --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-enter-animation: slide-rtl-in 300ms ease;
   --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-enter-active {
+  animation: var(--magic-toast-enter-animation);
 }
 
 .magic-toast--list-leave-active {
-  transition: all 150ms ease-out;
-}
-
-.magic-toast--list-leave-to {
-  opacity: 0;
+  animation: var(--magic-toast-leave-animation);
 }
 </style>

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

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

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

@@ -78,7 +78,7 @@ watchEffect(() => {
   position: relative;
   width: 100%;
   height: 100%;
-  transition: var(--magic-toast-transition, transform 300ms ease-out);
+  transition: var(--magic-toast-transition, transform 300ms ease);
   transform: matrix(
     var(--mt-matrix-scale),
     0,

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

@@ -12,7 +12,7 @@ type ToastInstance = {
     add: (args: AddArgs) => string;
     remove: (id: string) => void;
 };
-type Options = {
+type ToastOptions = {
     teleport?: {
         target?: string;
         disabled?: boolean;
@@ -40,4 +40,4 @@ type ToastEvents = {
 type AddArgs = Pick<Toast, 'component'> & PickPartial<Toast, 'props'> & {
     duration?: number;
 };
-export type { Toast, ToastInstance, Options, ActiveElement, ToastEvents, AddArgs, };
+export type { Toast, ToastInstance, ToastOptions, ActiveElement, ToastEvents, AddArgs, };

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

@@ -1,3 +1,4 @@
-import type { Options } from '../types/index.js';
-declare const defaultOptions: Options;
+import type { ToastOptions } from '../types/index.js';
+import type { RequireAll } from '@maas/vue-equipment/utils/types/RequireAll';
+declare const defaultOptions: RequireAll<ToastOptions>;
 export { defaultOptions };

package/dist/utils/css/animations/clip-in.css

@@ -0,0 +1,8 @@
+@keyframes clip-in {
+  0% {
+    clip-path: inset(0 0 100% 0);
+  }
+  100% {
+    clip-path: inset(0 0 0 0);
+  }
+}

package/dist/utils/css/animations/clip-out.css

@@ -0,0 +1,8 @@
+@keyframes clip-out {
+  0% {
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    clip-path: inset(0 0 100% 0);
+  }
+}

package/dist/utils/css/animations/fade-down-in.css

@@ -0,0 +1,10 @@
+@keyframes fade-down-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/fade-down-out.css

@@ -0,0 +1,10 @@
+@keyframes fade-down-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}

package/dist/utils/css/animations/fade-in.css

@@ -0,0 +1,9 @@
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/utils/css/animations/fade-out.css

@@ -0,0 +1,8 @@
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/dist/utils/css/animations/fade-up-in.css

@@ -0,0 +1,9 @@
+@keyframes fade-up-in {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/fade-up-out.css

@@ -0,0 +1,10 @@
+@keyframes fade-up-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}

package/dist/utils/css/animations/flip-in.css

@@ -0,0 +1,8 @@
+@keyframes flip-in {
+  0% {
+    transform: rotateY(90deg);
+  }
+  100% {
+    transform: rotateY(0);
+  }
+}

package/dist/utils/css/animations/flip-out.css

@@ -0,0 +1,8 @@
+@keyframes flip-out {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(90deg);
+  }
+}

package/dist/utils/css/animations/slide-btt-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-btt-in {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/slide-btt-out.css

@@ -0,0 +1,9 @@
+
+@keyframes slide-btt-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}

package/dist/utils/css/animations/slide-ltr-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-ltr-in {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/utils/css/animations/slide-ltr-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-ltr-out {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

package/dist/utils/css/animations/slide-rtl-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-rtl-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/utils/css/animations/slide-rtl-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-rtl-out {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/dist/utils/css/animations/slide-ttb-in.css

@@ -0,0 +1,8 @@
+@keyframes slide-ttb-in {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/dist/utils/css/animations/slide-ttb-out.css

@@ -0,0 +1,8 @@
+@keyframes slide-ttb-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}

package/dist/utils/css/animations/zoom-in.css

@@ -0,0 +1,10 @@
+@keyframes zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/utils/css/animations/zoom-out.css

@@ -0,0 +1,10 @@
+@keyframes zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/dist/utils/css/animations.css

@@ -0,0 +1,21 @@
+@import './animations/clip-in.css';
+@import './animations/clip-out.css';
+@import './animations/fade-down-in.css';
+@import './animations/fade-down-out.css';
+@import './animations/fade-in.css';
+@import './animations/fade-out.css';
+@import './animations/fade-up-in.css';
+@import './animations/fade-up-out.css';
+@import './animations/flip-in.css';
+@import './animations/flip-out.css';
+@import './animations/slide-btt-in.css';
+@import './animations/slide-btt-out.css';
+@import './animations/slide-ltr-in.css';
+@import './animations/slide-ltr-out.css';
+@import './animations/slide-rtl-in.css';
+@import './animations/slide-rtl-out.css';
+@import './animations/slide-ttb-in.css';
+@import './animations/slide-ttb-out.css';
+@import './animations/zoom-in.css';
+@import './animations/zoom-out.css';
+

package/dist/utils/css/transitions.css

@@ -0,0 +1,79 @@
+.fade-enter-active {
+  animation: fade-in 300ms ease;
+}
+
+.fade-leave-active {
+  animation: fade-out 300ms ease;
+}
+
+.fade-up-enter-active {
+  animation: fade-up-in 300ms ease;
+}
+
+.fade-up-leave-active {
+  animation: fade-up-out 300ms ease;
+}
+
+.slide-btt-enter-active {
+  animation: slide-btt-in 300ms ease;
+}
+
+.slide-btt-leave-active {
+  animation: slide-btt-out 300ms ease;
+}
+
+.slide-ttb-enter-active {
+  animation: slide-ttb-in 300ms ease;
+}
+
+.slide-ttb-leave-active {
+  animation: slide-ttb-out 300ms ease;
+}
+
+.slide-rtl-enter-active {
+  animation: slide-rtl-in 300ms ease;
+}
+
+.slide-rtl-leave-active {
+  animation: slide-rtl-out 300ms ease;
+}
+
+.slide-ltr-enter-active {
+  animation: slide-ltr-in 300ms ease;
+}
+
+.slide-ltr-leave-active {
+  animation: slide-ltr-out 300ms ease;
+}
+
+.scroll-up-enter-active {
+  animation: scroll-up-in 300ms ease;
+}
+
+.scroll-up-leave-active {
+  animation: scroll-up-out 300ms ease;
+}
+
+.scroll-down-enter-active {
+  animation: scroll-down-in 300ms ease;
+}
+
+.scroll-down-leave-active {
+  animation: scroll-down-out 300ms ease;
+}
+
+.zoom-enter-active {
+  animation: zoom-in 300ms ease;
+}
+
+.zoom-leave-active {
+  animation: zoom-out 300ms ease;
+}
+
+.clip-enter-active {
+  animation: clip-in 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+}
+
+.clip-leave-active {
+  animation: clip-out 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+}

package/dist/utils/types/PickPartial.ts

@@ -1,3 +1 @@
-type PickPartial<T, K extends keyof T> = { [P in K]: Partial<T[P]> }
-
-export type { PickPartial }
+export type PickPartial<T, K extends keyof T> = { [P in K]: Partial<T[P]> }

package/dist/utils/types/RequireAll.ts

@@ -0,0 +1,3 @@
+export type RequireAll<T> = {
+  [P in keyof T]-?: T[P]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",
@@ -50,6 +50,10 @@
       "types": "./dist/utils/index.d.ts",
       "require": "./dist/utils/index.js",
       "import": "./dist/utils/index.mjs"
+    },
+    "./utils/css/*.css": {
+      "import": "./dist/utils/css/*.css",
+      "require": "./dist/utils/css/*.css"
     }
   },
   "files": [