Fixed #1957 - New Dialog v2 containerStyle prop and modal leave defect

primefaces · Feb 7, 2022 · 6db8ab9 · 6db8ab9
1 parent c0de070
commit 6db8ab9
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 18 deletions.
diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
@@ -41,6 +41,12 @@ const DialogProps = [
         default: "center",
         description: 'Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".'
     },
+    {
+        name: "containerStyle",
+        type: "string",
+        default: "null",
+        description: "Inline style of the component."
+    },
     {
         name: "contentStyle",
         type: "object",

diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
@@ -5,6 +5,7 @@ declare class Dialog extends Vue {
     footer?: any;
     visible?: boolean;
     modal?: boolean;
+    containerStyle?: string;
     contentStyle?: string;
     rtl?: boolean;
     closable?: boolean;

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -37,6 +37,7 @@ export default {
         footer: null,
         visible: Boolean,
         modal: Boolean,
+        containerStyle: null,
         contentStyle: null,
         rtl: Boolean,
         maximizable: Boolean,
@@ -111,7 +112,9 @@ export default {
             this.enableDocumentSettings();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
+            if (this.modal) {
+                DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
+            }
         },
         onLeave() {
             this.$emit('hide');
@@ -212,7 +215,7 @@ export default {
         },
         removeStylesFromMask() {
             if (this.$refs.mask) {
-                this.dialogStyles = this.$vnode.data.style;
+                this.dialogStyles = this.$vnode.data.style || this.containerStyle;
                 if (this.dialogStyles) {
                     Object.keys(this.dialogStyles).forEach((key) => {
                         this.$refs.mask.style[key] = '';
@@ -270,7 +273,7 @@ export default {
             }];
         },
         dialogStyle() {
-            return this.dialogStyles;
+            return this.dialogStyles || this.containerStyle;
         },
         ariaId() {
             return UniqueComponentId();

diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
@@ -68,7 +68,7 @@
                 </DataTable>
             </div>
 
-            <Dialog :visible.sync="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
+            <Dialog :visible.sync="productDialog" :containerStyle="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
                 <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
                 <div class="field">
                     <label for="name">Name</label>
@@ -118,7 +118,7 @@
                 </template>
             </Dialog>
 
-            <Dialog :visible.sync="deleteProductDialog" :styles="{width: '450px'}" header="Confirm" :modal="true">
+            <Dialog :visible.sync="deleteProductDialog" :containerStyle="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
                     <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
@@ -129,7 +129,7 @@
                 </template>
             </Dialog>
 
-            <Dialog :visible.sync="deleteProductsDialog" :styles="{width: '450px'}" header="Confirm" :modal="true">
+            <Dialog :visible.sync="deleteProductsDialog" :containerStyle="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
                     <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete the selected products?</span>

diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>Basic</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
-                <Dialog header="Header" :visible.sync="displayBasic" :style="{width: '50vw'}">
+                <Dialog header="Header" :visible.sync="displayBasic" :containerStyle="{width: '50vw'}">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
@@ -23,7 +23,7 @@
                 </Dialog>
 
                 <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
-                <Dialog header="Header" :visible.sync="displayBasic2" :style="{width: '50vw'}">
+                <Dialog header="Header" :visible.sync="displayBasic2" :containerStyle="{width: '50vw'}">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                         culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -46,7 +46,7 @@
 
                 <h5>Modal</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openModal" />
-                <Dialog header="Header" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
+                <Dialog header="Header" :visible.sync="displayModal" :containerStyle="{width: '50vw'}" :modal="true">
                     <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -58,7 +58,7 @@
 
                 <h5>Confirmation</h5>
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
-                <Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
+                <Dialog header="Confirmation" :visible.sync="displayConfirmation" :containerStyle="{width: '350px'}" :modal="true">
                     <div class="confirmation-content">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                         <span>Are you sure you want to proceed?</span>
@@ -71,7 +71,7 @@
 
                 <h5>Maximizable</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
-                <Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
+                <Dialog header="Header" :visible.sync="displayMaximizable" :containerStyle="{width: '50vw'}" :maximizable="true" :modal="true">
                     <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
@@ -49,7 +49,7 @@ export default {
 </CodeHighlight>
 
                 <h5>Positioning</h5>
-                <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"<div class=""></div>
+                <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"</p>
 <CodeHighlight>
 &lt;Dialog position="top" :visible.sync="display"&gt;
 	Content
@@ -130,6 +130,12 @@ export default {
                                 <td>center</td>
                                 <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
                             </tr>
+                            <tr>
+                                <td>containerStyle</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Inline style of the component.</td>
+                            </tr>
                             <tr>
                                 <td>contentStyle</td>
                                 <td>object</td>
@@ -286,7 +292,7 @@ export default {
 <template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt;
-&lt;Dialog header="Header " :visible.sync="displayBasic" :style="{width: '50vw'}"&gt;
+&lt;Dialog header="Header " :visible.sync="displayBasic" :containerStyle="{width: '50vw'}"&gt;
     &lt;p class="m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@@ -297,7 +303,7 @@ export default {
 &lt;/Dialog&gt;
 
 &lt;Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" /&gt;
-&lt;Dialog header="Header" :visible.sync="displayBasic2" :style="{width: '50vw'}"&gt;
+&lt;Dialog header="Header" :visible.sync="displayBasic2" :containerStyle="{width: '50vw'}"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
         culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@@ -320,7 +326,7 @@ export default {
 
 &lt;h5&gt;Modal&lt;/h5&gt;
 &lt;Button label="Show" icon="pi pi-external-link" @click="openModal" /&gt;
-&lt;Dialog header="Header" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true"&gt;
+&lt;Dialog header="Header" :visible.sync="displayModal" :containerStyle="{width: '50vw'}" :modal="true"&gt;
     &lt;p class="m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@@ -332,7 +338,7 @@ export default {
 
 &lt;h5&gt;Confirmation&lt;/h5&gt;
 &lt;Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /&gt;
-&lt;Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt;
+&lt;Dialog header="Confirmation" :visible.sync="displayConfirmation" :containerStyle="{width: '350px'}" :modal="true"&gt;
     &lt;div class="confirmation-content"&gt;
         &lt;i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /&gt;
         &lt;span&gt;Are you sure you want to proceed?&lt;/span&gt;
@@ -345,7 +351,7 @@ export default {
 
 &lt;h5&gt;Maximizable&lt;/h5&gt;
 &lt;Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /&gt;
-&lt;Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
+&lt;Dialog header="Header" :visible.sync="displayMaximizable" :containerStyle="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
     &lt;p class="m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@@ -373,7 +379,7 @@ export default {
     &lt;/div&gt;
 &lt;/div&gt;
 
-&lt;Dialog header="Header" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&gt;
+&lt;Dialog header="Header" :visible.sync="displayPosition" :containerStyle="{width: '50vw'}" :position="position" :modal="true"&gt;
     &lt;p class="m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;