@maas/vue-equipment 0.7.7 → 0.7.9

package/dist/nuxt/module.json

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

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

@@ -60,13 +60,22 @@ import {
   type MaybeRef,
 } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
-import { defu } from 'defu'
 import { defaultOptions } from './../utils/defaultOptions'
 import { useModalApi } from './../composables/useModalApi'
 import { useModalCallback } from '../composables/private/useModalCallback'
 
 import type { Options } from './../types/index'
 
+import { createDefu } from 'defu'
+
+// Prevent keys array from being merged with default
+const customDefu = createDefu((obj, key, value) => {
+  if (key === 'keys') {
+    obj[key] = value
+    return true
+  }
+})
+
 interface MagicModalProps {
   id: MaybeRef<string>
   component?: Component
@@ -80,7 +89,7 @@ const props = withDefaults(defineProps<MagicModalProps>(), {
 
 const modal = ref<HTMLElement | undefined>(undefined)
 const modalApi = useModalApi(props.id, { focusTarget: modal })
-const mappedOptions = defu(props.options, defaultOptions)
+const mappedOptions = customDefu(props.options, defaultOptions)
 
 const {
   isActive,
@@ -127,10 +136,14 @@ function onClose() {
   innerActive.value = false
 }
 
-onKeyStroke('Escape', (e) => {
-  e.preventDefault()
-  close()
-})
+if (mappedOptions.keys) {
+  for (const key of mappedOptions.keys) {
+    onKeyStroke(key, (e) => {
+      e.preventDefault()
+      close()
+    })
+  }
+}
 
 watch(isActive, async (value) => {
   if (value) {
@@ -146,6 +159,8 @@ watch(isActive, async (value) => {
   --magic-modal-z-index: 999;
   --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
   --magic-modal-backdrop-filter: unset;
+  --magic-modal-content-align-items: center;
+  --magic-modal-content-justify-content: center;
 }
 
 .magic-modal {
@@ -169,8 +184,8 @@ watch(isActive, async (value) => {
   max-height: 100%;
   width: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: var(--magic-modal-content-align-items);
+  justify-content: var(--magic-modal-content-justify-content);
   overflow-y: auto;
 }
 

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

@@ -11,6 +11,7 @@ type Options = {
         content?: string;
         backdrop?: string;
     };
+    keys?: string[] | false;
 };
 type ModalEvents = {
     beforeEnter: string;

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

@@ -10,6 +10,7 @@ const defaultOptions = {
   transitions: {
     content: "magic-modal--content",
     backdrop: "magic-modal--backdrop"
-  }
+  },
+  keys: ["Escape"]
 };
 export { defaultOptions };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",