feat(components): [dialog] Dialog can drag overflow the viewport (ele…

…ment-plus#15643) * style(components): [dialog] Modify dialog style and docs * chore: update * feat(components): [dialog] add overflow prop * feat(components): update
huster-zj · Jan 25, 2024 · 67cd7e9 · 67cd7e9
1 parent c340c96
commit 67cd7e9
Show file tree

Hide file tree

Showing 18 changed files with 110 additions and 208 deletions.
diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md
@@ -99,7 +99,7 @@ dialog/destroy-on-close
 
 Try to drag the `header` part.
 
-:::demo Set `draggable` to `true` to drag.
+:::demo Set `draggable` to `true` to drag. Set `overflow` ^(2.5.4) to `true` can drag overflow the viewport.
 
 dialog/draggable-dialog
 
@@ -116,7 +116,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 ### Attributes
 
 | Name                       | Description                                                                                          | Type                                | Default |
-| -------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------- | ------- |
+|----------------------------|------------------------------------------------------------------------------------------------------| ----------------------------------- | ------- |
 | model-value / v-model      | visibility of Dialog                                                                                 | ^[boolean]                          | —       |
 | title                      | title of Dialog. Can also be passed with a named slot (see the following table)                      | ^[string]                           | ''      |
 | width                      | width of Dialog, default is 50%                                                                      | ^[string] / ^[number]               | ''      |
@@ -135,6 +135,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 | show-close                 | whether to show a close button                                                                       | ^[boolean]                          | true    |
 | before-close               | callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog | ^[Function]`(done: DoneFn) => void` | —       |
 | draggable                  | enable dragging feature for Dialog                                                                   | ^[boolean]                          | false   |
+| overflow ^(2.5.4)          | draggable Dialog can overflow the viewport                                                           | ^[boolean]                          | false   |
 | center                     | whether to align the header and footer in center                                                     | ^[boolean]                          | false   |
 | align-center ^(2.2.16)     | whether to align the dialog both horizontally and vertically                                         | ^[boolean]                          | false   |
 | destroy-on-close           | destroy elements in Dialog when closed                                                               | ^[boolean]                          | false   |

diff --git a/docs/examples/dialog/align-center.vue b/docs/examples/dialog/align-center.vue
@@ -1,22 +1,22 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <el-button plain @click="centerDialogVisible = true">
     Click to open the Dialog
   </el-button>
 
   <el-dialog
     v-model="centerDialogVisible"
     title="Warning"
-    width="30%"
+    width="500"
     align-center
   >
     <span>Open the dialog from the center from the screen</span>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="centerDialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="centerDialogVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -25,8 +25,3 @@ import { ref } from 'vue'
 
 const centerDialogVisible = ref(false)
 </script>
-<style scoped>
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>
diff --git a/docs/examples/dialog/basic-usage.vue b/docs/examples/dialog/basic-usage.vue
@@ -1,22 +1,22 @@
 <template>
-  <el-button text @click="dialogVisible = true">
-    click to open the Dialog
+  <el-button plain @click="dialogVisible = true">
+    Click to open the Dialog
   </el-button>
 
   <el-dialog
     v-model="dialogVisible"
     title="Tips"
-    width="30%"
+    width="500"
     :before-close="handleClose"
   >
     <span>This is a message</span>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="dialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="dialogVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -37,8 +37,3 @@ const handleClose = (done: () => void) => {
     })
 }
 </script>
-<style scoped>
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>
diff --git a/docs/examples/dialog/centered-content.vue b/docs/examples/dialog/centered-content.vue
@@ -1,20 +1,20 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <el-button plain @click="centerDialogVisible = true">
     Click to open the Dialog
   </el-button>
 
-  <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
+  <el-dialog v-model="centerDialogVisible" title="Warning" width="500" center>
     <span>
       It should be noted that the content will not be aligned in center by
       default
     </span>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="centerDialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="centerDialogVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -23,8 +23,3 @@ import { ref } from 'vue'
 
 const centerDialogVisible = ref(false)
 </script>
-<style scoped>
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>
diff --git a/docs/examples/dialog/customization-content.vue b/docs/examples/dialog/customization-content.vue
@@ -1,22 +1,21 @@
 <template>
-  <el-button text @click="dialogTableVisible = true">
-    open a Table nested Dialog
+  <el-button plain @click="dialogTableVisible = true">
+    Open a Table nested Dialog
   </el-button>
 
-  <el-dialog v-model="dialogTableVisible" title="Shipping address">
+  <el-button plain @click="dialogFormVisible = true">
+    Open a Form nested Dialog
+  </el-button>
+
+  <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
     <el-table :data="gridData">
       <el-table-column property="date" label="Date" width="150" />
       <el-table-column property="name" label="Name" width="200" />
       <el-table-column property="address" label="Address" />
     </el-table>
   </el-dialog>
 
-  <!-- Form -->
-  <el-button text @click="dialogFormVisible = true">
-    open a Form nested Dialog
-  </el-button>
-
-  <el-dialog v-model="dialogFormVisible" title="Shipping address">
+  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
     <el-form :model="form">
       <el-form-item label="Promotion name" :label-width="formLabelWidth">
         <el-input v-model="form.name" autocomplete="off" />
@@ -29,12 +28,12 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="dialogFormVisible = false">Cancel</el-button>
         <el-button type="primary" @click="dialogFormVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -80,17 +79,3 @@ const gridData = [
   },
 ]
 </script>
-<style scoped>
-.el-button--text {
-  margin-right: 15px;
-}
-.el-select {
-  width: 300px;
-}
-.el-input {
-  width: 300px;
-}
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>
diff --git a/docs/examples/dialog/customization-header.vue b/docs/examples/dialog/customization-header.vue
@@ -1,8 +1,9 @@
 <template>
-  <el-button @click="visible = true">
+  <el-button plain @click="visible = true">
     Open Dialog with customized header
   </el-button>
-  <el-dialog v-model="visible" :show-close="false">
+
+  <el-dialog v-model="visible" :show-close="false" width="500">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
@@ -29,5 +30,6 @@ const visible = ref(false)
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  gap: 16px;
 }
 </style>
diff --git a/docs/examples/dialog/destroy-on-close.vue b/docs/examples/dialog/destroy-on-close.vue
@@ -1,12 +1,12 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <el-button plain @click="centerDialogVisible = true">
     Click to open Dialog
   </el-button>
 
   <el-dialog
     v-model="centerDialogVisible"
     title="Notice"
-    width="30%"
+    width="500"
     destroy-on-close
     center
   >
@@ -18,12 +18,12 @@
       <strong>Extra content (Not rendered)</strong>
     </div>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="centerDialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="centerDialogVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -33,8 +33,3 @@ import { ref } from 'vue'
 
 const centerDialogVisible = ref(false)
 </script>
-<style scoped>
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>
diff --git a/docs/examples/dialog/draggable-dialog.vue b/docs/examples/dialog/draggable-dialog.vue
@@ -1,17 +1,39 @@
 <template>
-  <el-button text @click="dialogVisible = true">
-    Click to open Dialog
+  <el-button plain @click="dialogVisible = true">
+    Open a draggable Dialog
   </el-button>
 
-  <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
+  <el-button plain @click="dialogOverflowVisible = true">
+    Open a overflow draggable Dialog
+  </el-button>
+
+  <el-dialog v-model="dialogVisible" title="Tips" width="500" draggable>
     <span>It's a draggable Dialog</span>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="dialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="dialogVisible = false">
           Confirm
         </el-button>
-      </span>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="dialogOverflowVisible"
+    title="Tips"
+    width="500"
+    draggable
+    overflow
+  >
+    <span>It's a overflow draggable Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogOverflowVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogOverflowVisible = false">
+          Confirm
+        </el-button>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -20,4 +42,5 @@
 import { ref } from 'vue'
 
 const dialogVisible = ref(false)
+const dialogOverflowVisible = ref(false)
 </script>
diff --git a/docs/examples/dialog/focus-trapping.vue b/docs/examples/dialog/focus-trapping.vue
diff --git a/docs/examples/dialog/nested-dialog.vue b/docs/examples/dialog/nested-dialog.vue
@@ -1,22 +1,23 @@
 <template>
-  <el-button text @click="outerVisible = true">
-    open the outer Dialog
+  <el-button plain @click="outerVisible = true">
+    Open the outer Dialog
   </el-button>
 
-  <el-dialog v-model="outerVisible" title="Outer Dialog">
-    <template #default>
-      <el-dialog
-        v-model="innerVisible"
-        width="30%"
-        title="Inner Dialog"
-        append-to-body
-      />
-    </template>
+  <el-dialog v-model="outerVisible" title="Outer Dialog" width="800">
+    <span>This is the outer Dialog</span>
+    <el-dialog
+      v-model="innerVisible"
+      width="500"
+      title="Inner Dialog"
+      append-to-body
+    >
+      <span>This is the inner Dialog</span>
+    </el-dialog>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="outerVisible = false">Cancel</el-button>
         <el-button type="primary" @click="innerVisible = true">
-          open the inner Dialog
+          Open the inner Dialog
         </el-button>
       </div>
     </template>
@@ -29,8 +30,3 @@ import { ref } from 'vue'
 const outerVisible = ref(false)
 const innerVisible = ref(false)
 </script>
-<style scoped>
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>