@maas/vue-equipment 0.29.2 → 0.29.4

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

@@ -0,0 +1,72 @@
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
+type MenuMode = 'dropdown' | 'menubar' | 'context';
+export interface MagicMenuOptions {
+    mode?: MenuMode;
+    transition?: {
+        initial?: string;
+        final?: string;
+        nested?: string;
+    };
+}
+export type MenuTrigger = 'click' | 'mouseenter' | 'mouseleave' | 'right-click';
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export interface MenuItem {
+    id: string;
+    active: boolean;
+    disabled: boolean;
+}
+export interface MenuView {
+    id: string;
+    active: boolean;
+    items: MenuItem[];
+    parent: {
+        item: string;
+        views: string[];
+    };
+    children: {
+        trigger?: HTMLElement;
+        content?: HTMLElement;
+    };
+    click?: Coordinates;
+}
+export interface MenuState {
+    id: string;
+    active: boolean;
+    views: MenuView[];
+    options: RequireAllNested<MagicMenuOptions>;
+    input: {
+        type: 'keyboard' | 'pointer';
+        disabled: ('keyboard' | 'pointer')[];
+        view: string | undefined;
+    };
+}
+export type MenuEvents = {
+    beforeEnter: {
+        id: string;
+        view: string;
+    };
+    enter: {
+        id: string;
+        view: string;
+    };
+    afterEnter: {
+        id: string;
+        view: string;
+    };
+    beforeLeave: {
+        id: string;
+        view: string;
+    };
+    leave: {
+        id: string;
+        view: string;
+    };
+    afterLeave: {
+        id: string;
+        view: string;
+    };
+};
+export {};

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

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

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

@@ -0,0 +1,9 @@
+const defaultOptions = {
+  mode: "menubar",
+  transition: {
+    initial: "magic-menu-content__initial",
+    final: "magic-menu-content__final",
+    nested: "magic-menu-content__nested"
+  }
+};
+export { defaultOptions };

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

@@ -1,7 +1,7 @@
 import MagicModal from './src/components/MagicModal.vue.js';
 import { useMagicModal } from './src/composables/useMagicModal.js';
 import type { Plugin } from 'vue';
-import type { ModalEvents, ModalOptions } from './src/types/index.js';
+import type { MagicModalOptions } from './src/types/index.js';
 declare const MagicModalPlugin: Plugin;
 export { MagicModalPlugin, MagicModal, useMagicModal };
-export type { ModalEvents, ModalOptions };
+export type { MagicModalOptions };

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

@@ -9,7 +9,7 @@
       ref="modalRef"
       class="magic-modal"
       :id="toValue(id)"
-      :class="toValue(props.class)"
+      v-bind="$attrs"
       @click.self="close"
       aria-modal="true"
     >
@@ -71,14 +71,18 @@ import { useModalDOM } from '../composables/private/useModalDOM'
 import { useModalCallback } from '../composables/private/useModalCallback'
 import { useMagicModal } from '../composables/useMagicModal'
 
-import type { ModalOptions } from './../types/index'
+import type { MagicModalOptions } from './../types/index'
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
 import '@maas/vue-equipment/utils/css/animations/fade-out.css'
 
-// Prevent keys array from being merged with default
+defineOptions({
+  inheritAttrs: false,
+})
+
+// Prevent keyListener array from being merged with default
 const customDefu = createDefu((obj, key, value) => {
-  if (key === 'keys') {
+  if (key === 'close') {
     obj[key] = value
     return true
   }
@@ -86,10 +90,9 @@ const customDefu = createDefu((obj, key, value) => {
 
 interface MagicModalProps {
   id: MaybeRef<string>
-  class?: MaybeRef<string>
   component?: Component
   props?: Record<string, unknown>
-  options?: ModalOptions
+  options?: MagicModalOptions
 }
 
 const props = withDefaults(defineProps<MagicModalProps>(), {

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

@@ -1,20 +1,19 @@
 import { type Component, type MaybeRef } from 'vue';
-import type { ModalOptions } from './../types/index';
+import type { MagicModalOptions } from './../types/index';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
-    class?: MaybeRef<string>;
     component?: Component;
     props?: Record<string, unknown>;
-    options?: ModalOptions;
+    options?: MagicModalOptions;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicModalProps>, {
-    options: () => ModalOptions;
+    options: () => MagicModalOptions;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicModalProps>, {
-    options: () => ModalOptions;
+    options: () => MagicModalOptions;
 }>>>, {
-    options: ModalOptions;
+    options: MagicModalOptions;
 }, {}>, {
     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 { ModalOptions } from '../../types.js';
+import type { MagicModalOptions } from '../../types.js';
 type UseModalCallbackArgs = {
     id: MaybeRef<string>;
-    mappedOptions: ModalOptions;
+    mappedOptions: MagicModalOptions;
     addScrollLockPadding: () => void;
     removeScrollLockPadding: () => void;
     lockScroll: () => void;

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

@@ -1,9 +1,9 @@
 import { type MaybeElementRef } from '@vueuse/core';
-import type { ModalOptions } from '../../types/index.js';
-export type useModalApiOptions = Pick<ModalOptions, 'scrollLock' | 'focusTrap'> & {
+import type { MagicModalOptions } from '../../types/index.js';
+export type useModalDOMArgs = Pick<MagicModalOptions, 'scrollLock' | 'focusTrap'> & {
     focusTarget: MaybeElementRef;
 };
-export declare function useModalDOM(options?: useModalApiOptions): {
+export declare function useModalDOM(args?: useModalDOMArgs): {
     trapFocus: () => void;
     releaseFocus: () => void;
     lockScroll: () => void;

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -9,9 +9,9 @@ const defaultOptions = {
   scrollLock: true
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
-export function useModalDOM(options) {
+export function useModalDOM(args) {
   const positionFixedElements = ref([]);
-  const mappedOptions = defu(options, defaultOptions);
+  const mappedOptions = defu(args, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
   function trapFocus() {
     if (focusTrap) {

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

@@ -1,5 +1,5 @@
 import { type Options } from 'focus-trap';
-export interface ModalOptions {
+export interface MagicModalOptions {
     backdrop?: boolean;
     tag?: 'dialog' | 'div';
     focusTrap?: boolean | Options;

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

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

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

@@ -1,5 +1,4 @@
 import type { Plugin } from 'vue';
 import MagicNoise from './src/components/MagicNoise.vue.js';
-import { useNoiseApi } from './src/composables/private/useNoiseApi.js';
 declare const MagicNoisePlugin: Plugin;
-export { MagicNoisePlugin, MagicNoise, useNoiseApi };
+export { MagicNoisePlugin, MagicNoise };

package/dist/plugins/MagicNoise/index.mjs

@@ -1,8 +1,7 @@
 import MagicNoise from "./src/components/MagicNoise.vue";
-import { useNoiseApi } from "./src/composables/private/useNoiseApi.mjs";
 const MagicNoisePlugin = {
   install: (app) => {
     app.component("MagicNoise", MagicNoise);
   }
 };
-export { MagicNoisePlugin, MagicNoise, useNoiseApi };
+export { MagicNoisePlugin, MagicNoise };

package/dist/plugins/MagicNoise/nuxt.mjs

@@ -1,8 +1,4 @@
-import {
-  defineNuxtModule,
-  createResolver,
-  addComponent
-} from "@nuxt/kit";
+import { defineNuxtModule, createResolver, addComponent } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicNoise"

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

@@ -11,14 +11,14 @@
 import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
 import { useResizeObserver, useDebounceFn } from '@vueuse/core'
 import { useNoiseApi } from '../composables/private/useNoiseApi'
-import type { NoiseOptions } from '../types'
+import type { MagicNoiseOptions } from '../types'
 
-interface Props {
-  options?: NoiseOptions
+interface MagicNoiseProps {
+  options?: MagicNoiseOptions
   pause?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicNoiseProps>(), {
   pause: false,
 })
 

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

@@ -1,11 +1,11 @@
-import type { NoiseOptions } from '../types';
-interface Props {
-    options?: NoiseOptions;
+import type { MagicNoiseOptions } from '../types';
+interface MagicNoiseProps {
+    options?: MagicNoiseOptions;
     pause?: boolean;
 }
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicNoiseProps>, {
     pause: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicNoiseProps>, {
     pause: boolean;
 }>>>, {
     pause: boolean;

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

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

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

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

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

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

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

@@ -9,4 +9,3 @@ import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
 import { useMagicPlayer } from './src/composables/useMagicPlayer.js';
 declare const MagicPlayerPlugin: Plugin;
 export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, useMagicPlayer, };
-export type * from './src/types/index';

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

@@ -22,13 +22,13 @@ import { usePlayerAudioApi } from '../composables/private/usePlayerAudioApi'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
 
-interface Props {
+interface MagicAudioPlayerProps {
   id: string
   src: string
   loop?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicAudioPlayerProps>(), {
   src: '',
   loop: false,
 })

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayer.vue.d.ts

@@ -1,12 +1,12 @@
-interface Props {
+interface MagicAudioPlayerProps {
     id: string;
     src: string;
     loop?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAudioPlayerProps>, {
     src: string;
     loop: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAudioPlayerProps>, {
     src: string;
     loop: boolean;
 }>>>, {

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

@@ -64,11 +64,11 @@ import { usePlayerControlsApi } from '../composables/private/usePlayerControlsAp
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
 
-interface Props {
+interface MagicAudioPlayerControlsProps {
   id: string
 }
 
-const props = defineProps<Props>()
+const props = defineProps<MagicAudioPlayerControlsProps>()
 
 const barRef = ref<HTMLDivElement | undefined>(undefined)
 const trackRef = ref<HTMLDivElement | undefined>(undefined)

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayerControls.vue.d.ts

@@ -1,7 +1,7 @@
-interface Props {
+interface MagicAudioPlayerControlsProps {
     id: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>>, {}, {}>, {
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
 }>;

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

@@ -2,17 +2,16 @@
   <div
     ref="playerRef"
     class="magic-player"
-    :style="computedStyle"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
     <video
       ref="videoRef"
       class="magic-player__video"
-      preload="auto"
       playsinline
       disablePictureInPicture
-      :loop="props.loop"
+      :preload="preload"
+      :loop="loop"
       :muted="muted"
     />
     <slot />
@@ -26,24 +25,22 @@ import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
 
-import type { SourceType } from './../types'
+import type { MagicPlayerSourceType } from './../types'
 
-interface Props {
+interface MagicPlayerProps {
   id: string
-  srcType?: SourceType
+  srcType?: MagicPlayerSourceType
   src: string
-  ratio?: string
-  fill?: boolean
   autoplay?: boolean
+  preload?: 'auto' | 'metadata' | 'none'
   loop?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicPlayerProps>(), {
   srcType: 'native',
   src: '',
-  ratio: '16:9',
-  fill: false,
   autoplay: false,
+  preload: 'metadata',
   loop: false,
 })
 
@@ -82,24 +79,6 @@ useIntersectionObserver(
   }
 )
 
-const computedRatio = computed(() => {
-  if (props.ratio) {
-    return props.ratio.split(':')
-  } else {
-    return undefined
-  }
-})
-
-const computedStyle = computed(() => {
-  return {
-    height: props.fill ? '100%' : undefined,
-    'aspect-ratio':
-      computedRatio.value && !props.fill
-        ? `${computedRatio.value[0]}/${computedRatio.value[1]}`
-        : undefined,
-  }
-})
-
 onMounted(() => {
   initialize()
   if (props.autoplay) {
@@ -113,5 +92,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-:root{--magic-player-aspect-ratio:16/9}.magic-player{aspect-ratio:var(--magic-player-aspect-ratio);overflow:hidden;position:relative;width:100%}.magic-player__video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}
+:root{--magic-player-aspect-ratio:16/9;--magic-player-background:#000;--magic-player-height:auto}.magic-player{aspect-ratio:var(--magic-player-aspect-ratio);background:var(--magic-player-background);height:var(--magic-player-height);overflow:hidden;position:relative;width:100%}.magic-player__video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}
 </style>

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

@@ -1,34 +1,30 @@
-import type { SourceType } from './../types';
-interface Props {
+import type { MagicPlayerSourceType } from './../types';
+interface MagicPlayerProps {
     id: string;
-    srcType?: SourceType;
+    srcType?: MagicPlayerSourceType;
     src: string;
-    ratio?: string;
-    fill?: boolean;
     autoplay?: boolean;
+    preload?: 'auto' | 'metadata' | 'none';
     loop?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerProps>, {
     srcType: string;
     src: string;
-    ratio: string;
-    fill: boolean;
     autoplay: boolean;
+    preload: string;
     loop: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerProps>, {
     srcType: string;
     src: string;
-    ratio: string;
-    fill: boolean;
     autoplay: boolean;
+    preload: string;
     loop: boolean;
 }>>>, {
-    fill: boolean;
     src: string;
     loop: boolean;
-    srcType: SourceType;
-    ratio: string;
+    srcType: MagicPlayerSourceType;
     autoplay: boolean;
+    preload: "metadata" | "auto" | "none";
 }, {}>, {
     default?(_: {}): any;
 }>;