From 63cb03cf4e4a01f1a781b25a529d91aafb4457ce Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sat, 14 Dec 2024 05:17:41 +0300
Subject: [PATCH] docs(components): update Dialog (#19200)

* docs(components): update Dialog

add fullscreen, modal, events, slot

* docs(components): update text

---------

Co-authored-by: btea <2356281422@qq.com>
---
 docs/en-US/component/dialog.md      | 35 ++++++++++++++++++-
 docs/examples/dialog/events.vue     | 53 +++++++++++++++++++++++++++++
 docs/examples/dialog/fullscreen.vue | 29 ++++++++++++++++
 docs/examples/dialog/modal.vue      | 23 +++++++++++++
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/dialog/events.vue
 create mode 100644 docs/examples/dialog/fullscreen.vue
 create mode 100644 docs/examples/dialog/modal.vue

diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md
index 643e81a4e8..541115c67f 100644
--- a/docs/en-US/component/dialog.md
+++ b/docs/en-US/component/dialog.md
@@ -105,6 +105,39 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 
 :::
 
+## Fullscreen
+
+Set the `fullscreen` attribute to open fullscreen dialog.
+
+:::demo
+dialog/fullscreen
+
+:::
+
+:::tip
+
+If `fullscreen` is true, `width` `top` `draggable` attributes don't work.
+
+:::
+
+## Modal
+
+Setting `modal` to `false` will hide modal (overlay) of dialog.
+
+:::demo
+dialog/modal
+
+:::
+
+## Events
+
+Open developer console (ctrl + shift + J), to see order of events.
+
+:::demo
+dialog/events
+
+:::
+
 ## API
 
 ### Attributes
@@ -147,7 +180,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 
 | Name                | Description                                                                                           |
 | ------------------- | ----------------------------------------------------------------------------------------------------- |
-| —                   | content of Dialog                                                                                     |
+| default             | default content of Dialog                                                                             |
 | header              | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
 | footer              | content of the Dialog footer                                                                          |
 | title ^(deprecated) | works the same as the header slot. Use that instead.                                                  |
diff --git a/docs/examples/dialog/events.vue b/docs/examples/dialog/events.vue
new file mode 100644
index 0000000000..e02f85ff62
--- /dev/null
+++ b/docs/examples/dialog/events.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the event Dialog
+  </el-button>
+
+  <el-dialog
+    v-model="dialogVisible"
+    modal-class="overide-animation"
+    :before-close="
+      (doneFn) => {
+        console.log('before-close'), doneFn()
+      }
+    "
+    @open="console.log('open')"
+    @open-auto-focus="console.log('open-auto-focus')"
+    @opened="console.log('opened')"
+    @close="console.log('close')"
+    @close-auto-focus="console.log('close-auto-focus')"
+    @closed="console.log('closed')"
+  >
+    <span>It's a event Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
+
+<style lang="scss">
+.dialog-fade-enter-active {
+  animation: modal-fade-in 2s;
+  .el-overlay-dialog {
+    animation: dialog-fade-in 2s;
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out 2s;
+  .el-overlay-dialog {
+    animation: dialog-fade-out 2s;
+  }
+}
+</style>
diff --git a/docs/examples/dialog/fullscreen.vue b/docs/examples/dialog/fullscreen.vue
new file mode 100644
index 0000000000..bf2893b890
--- /dev/null
+++ b/docs/examples/dialog/fullscreen.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the fullscreen Dialog
+  </el-button>
+
+  <el-dialog
+    v-model="dialogVisible"
+    fullscreen
+    top="40vh"
+    width="70%"
+    draggable
+  >
+    <span>It's a fullscreen Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
diff --git a/docs/examples/dialog/modal.vue b/docs/examples/dialog/modal.vue
new file mode 100644
index 0000000000..46c011b7d9
--- /dev/null
+++ b/docs/examples/dialog/modal.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the modal Dialog
+  </el-button>
+
+  <el-dialog v-model="dialogVisible" :modal="false">
+    <span>It's a modal Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>