@maas/vue-equipment 1.0.0-beta.36 → 1.0.0-beta.37

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.35",
+  "version": "1.0.0-beta.36",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/plugins/MagicAccordion/src/components/MagicAccordionProvider.vue

@@ -7,8 +7,8 @@
 <script setup>
 import { onBeforeUnmount, provide } from "vue";
 import { Primitive } from "@maas/vue-primitive";
-import { MagicAccordionInstanceId } from "../symbols";
 import { useAccordionState } from "../composables/private/useAccordionState";
+import { MagicAccordionInstanceId } from "../symbols";
 const { id, asChild, options } = defineProps({
   id: { type: null, required: true },
   asChild: { type: Boolean, required: false },

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue

@@ -2,10 +2,10 @@
   <primitive
     :as-child="asChild"
     :data-id="mappedId"
-    :data-active="view?.active"
+    :data-active="mappedActive"
     class="magic-accordion-view"
   >
-    <slot :view-active="view?.active" />
+    <slot :view-active="mappedActive" />
   </primitive>
 </template>
 
@@ -21,7 +21,7 @@ import {
   MagicAccordionViewId
 } from "../symbols";
 import { useAccordionView } from "../composables/private/useAccordionView";
-const { id, active } = defineProps({
+const { id, active = false } = defineProps({
   id: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   active: { type: Boolean, required: false }
@@ -40,7 +40,7 @@ const mappedActive = computed(() => view.active);
 const { initializeView, deleteView } = useAccordionView(instanceId);
 const view = initializeView({
   id: mappedId.value,
-  active: active ?? false
+  active
 });
 provide(MagicAccordionViewId, mappedId.value);
 provide(MagicAccordionViewActive, mappedActive);

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.d.ts

@@ -1,10 +1,6 @@
 import { type MaybeRef } from 'vue';
-interface UseMagicAccordionArgs {
-    instanceId: MaybeRef<string>;
-}
-export declare function useMagicAccordion(args: UseMagicAccordionArgs): {
+export declare function useMagicAccordion(id: MaybeRef<string>): {
     selectView: (id: string) => void;
     unselectView: (id: string) => void;
 };
 export type UseMagicAccordionReturn = ReturnType<typeof useMagicAccordion>;
-export {};

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.mjs

@@ -1,8 +1,7 @@
 import {} from "vue";
 import { useAccordionView } from "./private/useAccordionView.mjs";
-export function useMagicAccordion(args) {
-  const { instanceId } = args;
-  const { selectView, unselectView } = useAccordionView(instanceId);
+export function useMagicAccordion(id) {
+  const { selectView, unselectView } = useAccordionView(id);
   return {
     selectView,
     unselectView

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue

@@ -37,6 +37,7 @@ import {
   MagicCommandItemActive,
   MagicCommandItemDisabled
 } from "../symbols";
+import { onKeyStroke } from "@vueuse/core";
 const {
   id,
   initial = false,
@@ -46,7 +47,7 @@ const {
   initial: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "enter"]);
 const magicError = useMagicError({
   prefix: "MagicCommand",
   source: "MagicCommand"
@@ -89,9 +90,15 @@ function onClick(event) {
   emit("click", event);
   guardedSelect();
 }
+function onReturn() {
+  if (!item.disabled && item.active) {
+    emit("enter");
+  }
+}
 provide(MagicCommandItemId, mappedId.value);
 provide(MagicCommandItemActive, mappedActive);
 provide(MagicCommandItemDisabled, mappedDisabled);
+onKeyStroke("Enter", onReturn);
 onMounted(() => {
   if (initial) {
     selectItem(mappedId.value);

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue.d.ts

@@ -12,8 +12,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<MagicCommandItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
+    onEnter?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue

@@ -31,13 +31,11 @@ import {
 import { useMagicKeys } from "@vueuse/core";
 const {
   viewId,
-  active = void 0,
   disabled = void 0,
   action = "open",
   trigger = ["click"]
 } = defineProps({
   viewId: { type: String, required: false },
-  active: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   action: { type: String, required: false },
   trigger: { type: Array, required: false },
@@ -63,7 +61,7 @@ magicError.assert(mappedViewId.value, {
 });
 const { getView } = useCommandView(instanceId);
 const view = getView(mappedViewId.value);
-const mappedActive = computed(() => active ?? toValue(itemActive) ?? false);
+const mappedActive = computed(() => toValue(itemActive) ?? false);
 const mappedDisabled = computed(
   () => disabled ?? toValue(itemDisabled) ?? false
 );

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue.d.ts

@@ -1,7 +1,6 @@
 import type { Interaction, Action } from '../types/index.js';
 interface MagicCommandTriggerProps {
     viewId?: string;
-    active?: boolean;
     disabled?: boolean;
     action?: Action;
     trigger?: Interaction[];

package/dist/plugins/MagicCommand/src/composables/private/useCommandItem.mjs

@@ -51,12 +51,10 @@ export function useCommandItem(args) {
     const index = view?.items.findIndex(
       (item) => item.id === activeItem.value?.id
     );
-    if (index !== void 0) {
-      const hasNext = view?.items[index + 1] !== void 0;
-      if (hasNext) {
-        selectItem(view?.items[index + 1].id);
-      } else if (view && loop) {
-        selectItem(view.items[0].id);
+    if (index !== void 0 && view) {
+      const nextItem = view.items[index + 1] ?? (loop ? view.items[0] : void 0);
+      if (nextItem) {
+        selectItem(nextItem.id);
       }
     }
   }
@@ -64,12 +62,10 @@ export function useCommandItem(args) {
     const index = view?.items.findIndex(
       (item) => item.id === activeItem.value?.id
     );
-    if (index !== void 0) {
-      const hasPrev = view?.items[index - 1] !== void 0;
-      if (hasPrev) {
-        selectItem(view?.items[index - 1].id);
-      } else if (view && loop) {
-        selectItem(view.items[view.items.length - 1].id);
+    if (index !== void 0 && view) {
+      const prevItem = view.items[index - 1] ?? (loop ? view.items[view.items.length - 1] : void 0);
+      if (prevItem) {
+        selectItem(prevItem.id);
       }
     }
   }

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts

@@ -1,6 +1,6 @@
 export declare function useMagicEmitter(): {
     on: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -536,7 +536,7 @@ export declare function useMagicEmitter(): {
         } & Omit<object, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     off: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1072,7 +1072,7 @@ export declare function useMagicEmitter(): {
         } & Omit<object, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     emit: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1339,7 +1339,7 @@ export declare function useMagicEmitter(): {
             leave: string;
             afterLeave: string;
         } & Omit<object, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key]): void;
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script setup>
+import { onKeyStroke } from "@vueuse/core";
 import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
 import {
   useMagicError
@@ -35,7 +36,7 @@ const { id, disabled } = defineProps({
   id: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "enter"]);
 const magicError = useMagicError({
   prefix: "MagicMenu",
   source: "MagicMenu"
@@ -102,8 +103,14 @@ function onClick(event) {
     unselectAllViews();
   }
 }
+function onReturn() {
+  if (!item.disabled && item.active) {
+    emit("enter");
+  }
+}
 provide(MagicMenuItemId, mappedId.value);
 provide(MagicMenuItemActive, mappedActive);
+onKeyStroke("Enter", onReturn);
 onBeforeUnmount(() => {
   deleteItem(mappedId.value);
 });

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue.d.ts

@@ -11,8 +11,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
+    onEnter?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 export declare function useMenuKeyListener(instanceId: MaybeRef<string>): {
     onArrowRight: (e: KeyboardEvent) => Promise<void>;
     onArrowLeft: (e: KeyboardEvent) => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.mjs

@@ -1,4 +1,3 @@
-import {} from "vue";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "./useMenuState.mjs";
 import { useMenuView } from "./useMenuView.mjs";
@@ -43,7 +42,10 @@ export function useMenuKeyListener(instanceId) {
   }
   function selectFirstItem(view) {
     const { selectItem } = useMenuItem({ instanceId, viewId: view.id });
-    selectItem(getEnabledItems(view)[0]?.id, true);
+    const firstItem = getEnabledItems(view)[0];
+    if (firstItem) {
+      selectItem(firstItem.id, true);
+    }
   }
   async function onArrowRight(e) {
     try {
@@ -116,11 +118,17 @@ export function useMenuKeyListener(instanceId) {
     const prevIndex = enabledItems.findIndex((item) => item.active) - 1;
     if (prevIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[prevIndex]?.id, true);
+      const prevItem = enabledItems[prevIndex];
+      if (prevItem) {
+        selectItem(prevItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     } else if (prevIndex !== -1) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[enabledItems.length - 1]?.id, true);
+      const lastItem = enabledItems[enabledItems.length - 1];
+      if (lastItem) {
+        selectItem(lastItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     }
   }
@@ -142,7 +150,10 @@ export function useMenuKeyListener(instanceId) {
     const nextIndex = enabledItems.findIndex((item) => item.active) + 1;
     if (nextIndex >= 0) {
       const { selectItem } = useMenuItem({ instanceId, viewId });
-      selectItem(enabledItems[nextIndex]?.id, true);
+      const nextItem = enabledItems[nextIndex];
+      if (nextItem) {
+        selectItem(nextItem.id, true);
+      }
       unselectUnrelatedViews(viewId);
     }
   }

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

@@ -55,7 +55,7 @@ import { useToastView } from "../composables/private/useToastView";
 import { useToastCallback } from "../composables/private/useToastCallback";
 import { useToastListener } from "../composables/private/useToastListener";
 import MagicToastView from "./MagicToastView.vue";
-import { MagicToastInstanceId } from "../../symbols";
+import { MagicToastInstanceId } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
 import "@maas/vue-equipment/utils/css/keyframes/squash-y.css";
 import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css";

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

@@ -3,7 +3,7 @@
     class="magic-toast-view"
     :data-id="id"
     :data-expanded="state.expanded"
-    :data-dragging="view.dragging"
+    :data-dragging="view?.dragging"
     :data-position="state.options.position"
     :data-debug="state.options.debug"
     :style="{
@@ -29,7 +29,7 @@ import { computed, inject } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
-import { MagicToastInstanceId } from "../../symbols";
+import { MagicToastInstanceId } from "../symbols";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastDrag } from "../composables/private/useToastDrag";
 const { id, index } = defineProps({
@@ -50,7 +50,11 @@ const state = initializeState();
 const count = computed(() => state.views.length);
 const view = computed(() => state.views[index]);
 const reversedIndex = computed(() => count.value - index - 1);
-const height = computed(() => `${view.value.dimensions?.height}px`);
+magicError.assert(view.value, {
+  message: "MagicToastView could not be registered",
+  errorCode: "missing_view"
+});
+const height = computed(() => `${view.value?.dimensions?.height}px`);
 const offset = computed(() => {
   const mapped = state.views.slice(0, reversedIndex.value).reduce((acc, view2) => acc + (view2.dimensions?.height ?? 0), 0);
   return `${mapped}px`;

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -12,7 +12,7 @@ export function useToastCallback(instanceId) {
   }
   function onEnter() {
     emitter.emit("enter", toValue(instanceId));
-    if (state.views.length && state.options.layout?.max && state.views.length > state.options.layout.max) {
+    if (state.views.length && state.views[0] && state.options.layout?.max && state.views.length > state.options.layout.max) {
       deleteView(state.views[0].id);
     }
   }

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

@@ -1,7 +1,7 @@
 import type { MaybeRef } from 'vue';
 import type { RequireAll } from '@maas/vue-equipment/utils';
 type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
-export type ToastView = {
+export interface ToastView {
     id: string;
     component: object;
     props?: MaybeRef<Record<string, unknown>>;
@@ -24,22 +24,22 @@ export type ToastView = {
     lastDraggedY: number;
     draggedX: number;
     draggedY: number;
-};
-export type ToastState = {
+}
+export interface ToastState {
     id: string;
     views: ToastView[];
     options: ToastDefaultOptions;
     expanded: boolean;
     animating: boolean;
-};
-export type ActiveToast = {
+}
+export interface ActiveToast {
     id: string;
     height: number;
     padding: {
         top: number;
         bottom: number;
     };
-};
+}
 export interface ToastEvents {
     beforeEnter: string;
     enter: string;
@@ -48,7 +48,7 @@ export interface ToastEvents {
     leave: string;
     afterLeave: string;
 }
-export type MagicToastOptions = {
+export interface MagicToastOptions {
     debug?: boolean;
     position?: Position;
     duration?: number;
@@ -78,7 +78,7 @@ export type MagicToastOptions = {
         distance?: number;
         momentum?: number;
     };
-};
+}
 export type ToastDefaultOptions = RequireAll<MagicToastOptions> & {
     threshold: RequireAll<MagicToastOptions['threshold']>;
     animation: RequireAll<MagicToastOptions['animation']>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.36",
+  "version": "1.0.0-beta.37",
   "contributors": [
     {
       "name": "Robin Scholz",