feat: trying to add light dismiss for safari

Author: nulfrost

app/app.vue

@@ -72,9 +72,20 @@ function handleGlobalKeyup() {
   showKbdHints.value = false
 }
 
+/* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
+// https://codepen.io/paramagicdev/pen/gbYompq
+// see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
+function handleModalLightDismiss(e: any) {
+  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
+  if (modal && modal.open && !e.composedPath().includes(modal)) {
+    modal.close()
+  }
+}
+
 if (import.meta.client) {
   useEventListener(document, 'keydown', handleGlobalKeydown)
   useEventListener(document, 'keyup', handleGlobalKeyup)
+  useEventListener(document, 'click', handleModalLightDismiss)
 }
 </script>
 

app/assets/main.css

@@ -559,27 +559,3 @@ input[type='search']::-webkit-search-results-decoration {
 html:has(dialog:modal) {
   overflow: hidden;
 }
-
-/* Backdrop styling when any of the modals are open */
-dialog:modal::backdrop {
-  @apply bg-black/60;
-}
-
-/* Modal transition styles */
-dialog {
-  opacity: 0;
-  transition: opacity 200ms ease;
-  transition-behavior: allow-discrete;
-}
-
-dialog:modal {
-  opacity: 1;
-  transition: opacity 200ms ease;
-  transition-behavior: allow-discrete;
-}
-
-@starting-style {
-  dialog[modal] {
-    opacity: 0;
-  }
-}

app/components/Modal.client.vue

@@ -37,3 +37,33 @@ function handleModalClose() {
     </dialog>
   </Teleport>
 </template>
+
+<style scoped>
+/* Backdrop styling when any of the modals are open */
+dialog:modal::backdrop {
+  @apply bg-black/60;
+}
+
+dialog::backdrop {
+  pointer-events: none;
+}
+
+/* Modal transition styles */
+dialog {
+  opacity: 0;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+dialog:modal {
+  opacity: 1;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  dialog:modal {
+    opacity: 0;
+  }
+}
+</style>