sounds, better files

src/components/Audio/modal.vue

@@ -0,0 +1,69 @@
+<template>
+  <dialog class="dialog" ref="dialog" @close="onClose" @keydown.esc="onCancel">
+    <div class="dialog-main">
+      <slot></slot>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
+    </div>
+    <div class="dialog-aside">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
+    </div>
+  </dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const dialog = ref<HTMLDialogElement>();
+const popover = ref<HTMLDivElement>();
+const props = defineProps<{
+  open: boolean,
+  preventClose: boolean,
+}>();
+
+const emit = defineEmits<{
+  'update:open': [boolean]
+}>();
+
+function onCancel(event: Event) {
+  if (props.preventClose) {
+    event.preventDefault();
+  }
+}
+
+function onClose(event: Event) {
+  emit('update:open', false);
+}
+
+watch(() => props.open, (open) => {
+  if (open) {
+    console.log(dialog.value);
+    dialog.value?.showModal();
+    popover.value?.showPopover();
+  } else {
+    dialog.value?.close();
+  }
+}, {immediate: true});
+
+</script>
+<style>
+.dialog[open] {
+  display: grid;
+  max-width: 800px;
+  grid-template-columns: 2fr 1fr;
+  gap: 4rem;
+  background: none;
+  border: none;
+  pointer-events: visible;  
+}
+
+.dialog[open]::backdrop {
+  background: rgba(from red r g b / 0.5);
+  backdrop-filter: blur(20px);
+}
+
+.dialog-main, .dialog-aside {
+  padding: 1rem;
+  background: white;
+  border: 5px solid black;
+  outline: none;
+}
+</style>