@maas/vue-equipment 0.3.0 → 0.3.1

package/dist/nuxt/module.json

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

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

@@ -8,6 +8,7 @@
       <dialog
         ref="modal"
         class="magic-modal"
+        :id="toValue(id)"
         @click.self="close"
         aria-modal="true"
       >
@@ -162,9 +163,10 @@ watch(isActive, async (value) => {
 </script>
 
 <style lang="postcss">
-* {
-  transition-duration: 0s;
-  animation-duration: 0s;
+:root {
+  --magic-modal-z-index: 999;
+  --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
+  --magic-modal-backdrop-filter: unset;
 }
 
 .magic-modal {
@@ -175,13 +177,18 @@ watch(isActive, async (value) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 999;
+  z-index: var(--magic-modal-z-index);
   background: transparent;
   color: inherit;
   padding: 0;
   border: none;
 }
 
+.magic-modal * {
+  transition-duration: 0s;
+  animation-duration: 0s;
+}
+
 .magic-modal__content {
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
@@ -201,7 +208,8 @@ watch(isActive, async (value) => {
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--magic-modal-backdrop-color);
+  backdrop-filter: var(--magic-modal-backdrop-filter);
   z-index: -1;
 }
 

package/package.json

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