use dialog element

Author: jiyuujin

apps/web/app/components/admin/AttendeeList.vue

@@ -95,7 +95,7 @@ const handleConfirm = (attendee?: Attendee) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminAttendeeItem :attendee="attendees.filter((s) => s.id === attendeeId)[0]" @close="handleDialog" />
   </VFDialog>
 </template>

apps/web/app/components/admin/JobList.vue

@@ -62,7 +62,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminJobItem
       :job="jobs.filter((s) => s.id === jobId)[0]"
       :sponsors

apps/web/app/components/admin/Page.vue

@@ -115,7 +115,7 @@ const pageText = props.page.replace(/^[a-z]/g, function (val) {
       <AdminStaffList :staffs="staffs?.data" />
       <AdminAdminUserList :admin-users="adminUsers?.data" />
     </div>
-    <VFDialog v-if="showDialog">
+    <VFDialog v-if="showDialog" open>
       <AdminSpeakerItem v-if="page === 'speaker'" @close="handleDialog" />
       <AdminSponsorItem v-if="page === 'sponsor'" :speakers="speakers?.data" @close="handleDialog" />
       <AdminJobItem v-if="page === 'job'" :sponsors="sponsors?.data" @close="handleDialog" />

apps/web/app/components/admin/SpeakerList.vue

@@ -95,7 +95,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminSpeakerItem :speaker="speakers.filter((s) => s.id === speakerId)[0]" @close="handleDialog" />
   </VFDialog>
 </template>

apps/web/app/components/admin/SponsorList.vue

@@ -101,7 +101,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminSponsorItem
       :sponsor="sponsors.filter((s) => s.id === sponsorId)[0]"
       :speakers="speakers"

apps/web/app/components/admin/StaffList.vue

@@ -74,7 +74,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminStaffItem
       :staff="staffs.filter((s) => s.id === staffId)[0]"
       @close="handleDialog"

packages/ui/components/common/Dialog.stories.ts

@@ -6,6 +6,7 @@ export default {
   component: Dialog,
   args: {
     default: '<strong>Go!</strong>',
+    open: true,
   },
   argTypes: {
     default: {

packages/ui/components/common/Dialog.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 type Props = {
-  arialabel?: string
-  ariaModal?: boolean
+  open: boolean
+}
+const props = defineProps<Props>()
+
+const dialog = ref<HTMLDialogElement>()
+const visible = ref(props.open)
+
+const showModal = () => {
+  dialog.value?.showModal()
+  visible.value = true
 }
-withDefaults(defineProps<Props>(), {
-  arialabel: '',
-  ariaModal: false,
+
+defineExpose({
+  show: showModal,
+  close: (returnVal?: string): void => dialog.value?.close(returnVal),
+  visible,
 })
 </script>
+
 <template>
-  <div class="mask" @click="$emit('on-close')">
-    <div
-      role="dialog"
-      class="root"
-      :aria-label="arialabel"
-      :aria-modal="ariaModal"
-      @click="(e) => e.stopPropagation()"
-    >
+  <dialog ref="dialog" :open class="mask">
+    <form v-if="visible" method="dialog" class="root">
       <slot />
-    </div>
-  </div>
+    </form>
+  </dialog>
 </template>
 
 <style scoped>

packages/ui/components/namecard/IntegrationDialog.vue

@@ -17,7 +17,7 @@ function handleLinkButton(provider: Extract<AuthProvider, 'github' | 'google'>)
 </script>
 
 <template>
-  <Dialog :aria-label="title" :aria-modal="true" @on-close="$emit('on-close')">
+  <Dialog open>
     <div class="dialog-container">
       <h3 class="dialog-title">{{ title }}</h3>
       <slot />