Fix for #26

Author: pascalbaljet

lib/Components/Modal.vue

@@ -32,7 +32,8 @@ export default {
 
         onTopOfStack: {
             type: Boolean,
-            required: true,
+            required: false,
+            default: false
         },
 
         maxWidth: {

lib/ServerError.vue

@@ -1,15 +1,6 @@
 <template>
   <div
-    class="
-            w-screen
-            h-screen
-            fixed
-            p-8
-            bg-black bg-opacity-75
-            inset-0
-            z-[200000]
-            box-border
-        "
+    style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 200000; box-sizing: border-box; height: 100vh; width: 100vw; background-color: rgb(0 0 0 / 0.75); padding: 2rem;"
     @click="hide"
   >
     <iframe

lib/SpladeApp.vue

@@ -7,9 +7,7 @@
     >
       <Render
         :key="`visit.${Splade.pageVisitId.value}`"
-        :class="{
-          'transition ease-in-out blur-sm': Splade.currentStack > 0,
-        }"
+        :style="backdropStyling"
         :html="html"
       />
     </component>
@@ -37,7 +35,7 @@
 </template>
 
 <script setup>
-import { ref, provide, nextTick, inject, KeepAlive } from "vue";
+import { ref, provide, nextTick, inject, KeepAlive, computed } from "vue";
 import { Splade } from "./Splade.js";
 import forOwn from "lodash-es/forOwn";
 import isString from "lodash-es/isString";
@@ -95,6 +93,19 @@ const html = ref();
 const modals = ref([]);
 const serverErrorHtml = ref(null);
 
+const backdropStyling = computed(() => {
+    if(Splade.currentStack.value < 1) {
+        return [];
+    }
+
+    return {
+        filter: "blur(4px)",
+        "transition-property": "filter",
+        "transition-duration": "150ms",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
+    };
+});
+
 function closeServerError() {
     serverErrorHtml.value = null;
 }