feat(components): [dialog] add align center prop (#8947)

docs/en-US/component/dialog.md

@@ -69,6 +69,14 @@ The content of Dialog is lazily rendered, which means the default slot is not re
 
 :::
 
+## Align Center dialog
+
+Open dialog from the center of the screen.
+
+:::demo Setting `align-center` to `true` will center the dialog both horizontally and vertically. The prop `top` will not work at the same time because the dialog is vertically centered in a flexbox.
+
+dialog/align-center
+
 ## Destroy on Close
 
 When this is feature is enabled, the content under default slot will be destroyed with a `v-if` directive. Enable this when you have perf concerns.
@@ -116,6 +124,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 | before-close          | callback before Dialog closes, and it will prevent Dialog from closing                            | function(done)，done is used to close the Dialog | —               | —       |
 | draggable             | enable dragging feature for Dialog                                                                | boolean                                          | —               | false   |
 | center                | whether to align the header and footer in center                                                  | boolean                                          | —               | false   |
+| align-center          | whether to align the dialog both horizontally and vertically                                      | boolean                                          | —               | false   |
 | destroy-on-close      | Destroy elements in Dialog when closed                                                            | boolean                                          | —               | false   |
 
 ## Slots

docs/examples/dialog/align-center.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-button text @click="centerDialogVisible = true"
+    >Click to open the Dialog</el-button
+  >
+
+  <el-dialog
+    v-model="centerDialogVisible"
+    title="Warning"
+    width="30%"
+    align-center
+  >
+    <span>Open the dialog from the center from the screen</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="centerDialogVisible = false"
+          >Confirm</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const centerDialogVisible = ref(false)
+</script>
+<style scoped>
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+</style>

packages/components/dialog/src/dialog-content.ts

@@ -5,6 +5,10 @@ export const dialogContentProps = buildProps({
     type: Boolean,
     default: false,
   },
+  alignCenter: {
+    type: Boolean,
+    default: false,
+  },
   closeIcon: {
     type: iconPropType,
   },

packages/components/dialog/src/dialog-content.vue

@@ -5,6 +5,7 @@
       ns.b(),
       ns.is('fullscreen', fullscreen),
       ns.is('draggable', draggable),
+      ns.is('align-center', alignCenter),
       { [ns.m('center')]: center },
       customClass,
     ]"

packages/components/dialog/src/dialog.vue

@@ -20,6 +20,7 @@
           :aria-labelledby="!title ? titleId : undefined"
           :aria-describedby="bodyId"
           :class="`${ns.namespace.value}-overlay-dialog`"
+          :style="overlayDialogStyle"
           @click="overlayEvent.onClick"
           @mousedown="overlayEvent.onMousedown"
           @mouseup="overlayEvent.onMouseup"
@@ -37,6 +38,7 @@
               ref="dialogContentRef"
               :custom-class="customClass"
               :center="center"
+              :align-center="alignCenter"
               :close-icon="closeIcon"
               :draggable="draggable"
               :fullscreen="fullscreen"
@@ -105,6 +107,7 @@ const {
   titleId,
   bodyId,
   style,
+  overlayDialogStyle,
   rendered,
   zIndex,
   afterEnter,

packages/components/dialog/src/use-dialog.ts

@@ -56,6 +56,13 @@ export const useDialog = (
     return style
   })
 
+  const overlayDialogStyle = computed<CSSProperties>(() => {
+    if (props.alignCenter) {
+      return { display: 'flex' }
+    }
+    return {}
+  })
+
   function afterEnter() {
     emit('opened')
   }
@@ -201,6 +208,7 @@ export const useDialog = (
     bodyId,
     closed,
     style,
+    overlayDialogStyle,
     rendered,
     visible,
     zIndex,

packages/theme-chalk/src/dialog.scss

@@ -21,6 +21,10 @@
     outline: none !important;
   }
 
+  @include when(align-center) {
+    margin: auto;
+  }
+
   @include when(fullscreen) {
     @include set-css-var-value('dialog-width', 100%);
     @include set-css-var-value('dialog-margin-top', 0);