Fixed #992 - breakpoints for Dialog and ConfirmDialog

primefaces · Feb 19, 2021 · a8fdc28 · a8fdc28
1 parent 19fe8b2
commit a8fdc28
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 5 deletions.
diff --git a/src/components/confirmdialog/ConfirmDialog.d.ts b/src/components/confirmdialog/ConfirmDialog.d.ts
@@ -1,5 +1,6 @@
 interface ConfirmDialogProps {
     group?: string;
+    breakpoints?: {[key: string]: string};
 }
 
 declare class ConfirmDialog {

diff --git a/src/components/confirmdialog/ConfirmDialog.vue b/src/components/confirmdialog/ConfirmDialog.vue
@@ -1,5 +1,6 @@
 <template>
-    <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog">
+    <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog"
+        :breakpoints="breakpoints">
         <i :class="iconClass" /> 
         <span class="p-confirm-dialog-message">{{message}}</span>
         <template #footer>
@@ -16,7 +17,11 @@ import Button from 'primevue/button';
 
 export default {
     props: {
-        group: String
+        group: String,
+        breakpoints: {
+            type: Object,
+            default: null
+        }
     },
     data() {
         return {

diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
@@ -16,6 +16,7 @@ interface DialogProps {
     ariaCloseLabel?: string;
     position?: string;
     maximizable?: boolean;
+    breakpoints?: {[key: string]: string};
 }
 
 declare class Dialog {

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -68,6 +68,10 @@ export default {
         position: {
             type: String,
             default: 'center'
+        },
+        breakpoints: {
+            type: Object,
+            default: null
         }
     },
     data() {
@@ -79,16 +83,23 @@ export default {
     documentKeydownListener: null,
     container: null,
     mask: null,
+    styleElement: null,
     updated() {
         if (this.visible) {
             this.containerVisible = this.visible;
         }
     },
     beforeUnmount() {
         this.unbindDocumentState();
+        this.destroyStyle();
         this.container = null;
         this.mask = null;
     },
+    mounted() {
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    },
     methods: {
         close() {
             this.$emit('update:visible', false);
@@ -97,6 +108,8 @@ export default {
             if (this.autoZIndex) {
                 el.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
+            
+            el.setAttribute(this.attributeSelector, '');
         },
         onEnter() {
             this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
@@ -205,6 +218,32 @@ export default {
         },
         maskRef(el) {
             this.mask = el;
+        },
+        createStyle() {
+			if (!this.styleElement) {
+				this.styleElement = document.createElement('style');
+				this.styleElement.type = 'text/css';
+				document.body.appendChild(this.styleElement);
+
+                let innerHTML = '';
+                for (let breakpoint in this.breakpoints) {
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            .p-dialog[${this.attributeSelector}] {
+                                width: ${this.breakpoints[breakpoint]} !important;
+                            }
+                        }
+                    `
+                }
+                
+                this.styleElement.innerHTML = innerHTML;
+			}
+		},
+        destroyStyle() {
+            if (this.styleElement) {
+                document.body.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
         }
     },
     computed: {
@@ -228,6 +267,9 @@ export default {
         },
         ariaLabelledById() {
             return this.header != null ? this.ariaId + '_header' : null;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     directives: {

diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -93,6 +93,14 @@ export default {
     }
 }
 
+</code></pre>
+
+                <h5>Responsive</h5>
+                <p>ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
+                100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
+<pre v-code><code>
+&lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
+
 </code></pre>
 
                 <h5>Confirmation Options</h5>
@@ -208,6 +216,12 @@ export default {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoints</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Object literal to define widths per screen size.</td>
                             </tr>
 						</tbody>
 					</table>

diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
@@ -56,6 +56,19 @@
                     </template>
                 </Dialog>
 
+                <h5>Responsive</h5>
+                <Button label="Show" icon="pi pi-external-link" @click="openResponsive" />
+                <Dialog header="Header" v-model:visible="displayResponsive" :breakpoints="{'960px': '75vw'}" :style="{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>
+                    <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closeResponsive" class="p-button-text"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeResponsive" autofocus />
+                    </template>
+                </Dialog>
+
                 <h5>Confirmation</h5>
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
                 <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
@@ -124,6 +137,7 @@ export default {
             displayBasic: false,
             displayBasic2: false,
             displayModal: false,
+            displayResponsive: false,
             displayConfirmation: false,
             displayMaximizable: false,
             displayPosition: false,
@@ -143,6 +157,12 @@ export default {
         closeBasic2() {
             this.displayBasic2 = false;
         },
+        openResponsive() {
+            this.displayResponsive = true;
+        },
+        closeResponsive() {
+            this.displayResponsive = false;
+        },
         openModal() {
             this.displayModal = true;
         },

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
@@ -62,10 +62,18 @@ export default {
 
 </code></pre>
 
-                <h5>Popup Content inside the Dialog</h5>
-                <p>If the dialog contains components with popup elements such as Dropdown or Calendar, set <i>contentStyle</i> to overflow:visible so that overlays can be displayed outside of the content area.</p>
+                <h5>Responsive</h5>
+                <p>Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
+                100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
 <pre v-code><code>
-&lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt;
+&lt;Dialog position="top" v-model:visible="display"&gt;
+	Content
+&lt;/Dialog&gt;
+
+</code></pre>
+
+<pre v-code><code>
+&lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;
 	Content
 &lt;/Dialog&gt;
 
@@ -185,6 +193,12 @@ export default {
                                 <td>boolean</td>
                                 <td>false</td>
                                 <td>Whether the dialog can be displayed full screen.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoints</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Object literal to define widths per screen size.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -313,6 +327,19 @@ export default {
     &lt;/template&gt;
 &lt;/Dialog&gt;
 
+&lt;h5&gt;Responsive&lt;/h5&gt;
+&lt;Button label="Show" icon="pi pi-external-link" @click="openResponsive" /&gt;
+&lt;Dialog header="Header" v-model:visible="displayResponsive" :breakpoints="{'960px': '75vw'}" :style="{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;
+    &lt;template #footer&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeResponsive" class="p-button-text"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeResponsive" autofocus /&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
 &lt;h5&gt;Confirmation&lt;/h5&gt;
 &lt;Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /&gt;
 &lt;Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt;
@@ -375,6 +402,7 @@ export default {
             displayBasic: false,
             displayBasic2: false,
             displayModal: false,
+            displayResponsive: false,
             displayConfirmation: false,
             displayMaximizable: false,
             displayPosition: false,
@@ -394,6 +422,12 @@ export default {
         closeBasic2() {
             this.displayBasic2 = false;
         },
+        openResponsive() {
+            this.displayResponsive = true;
+        },
+        closeResponsive() {
+            this.displayResponsive = false;
+        },
         openModal() {
             this.displayModal = true;
         },
@@ -511,6 +545,19 @@ export default {
                     </template>
                 </Dialog>
 
+                <h5>Responsive</h5>
+                <Button label="Show" icon="pi pi-external-link" @click="openResponsive" />
+                <Dialog header="Header" v-model:visible="displayResponsive" :breakpoints="{'960px': '75vw'}" :style="{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>
+                    <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closeResponsive" class="p-button-text"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeResponsive" autofocus />
+                    </template>
+                </Dialog>
+
                 <h5>Confirmation</h5>
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
                 <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
@@ -575,6 +622,7 @@ export default {
             displayBasic: false,
             displayBasic2: false,
             displayModal: false,
+            displayResponsive: false,
             displayConfirmation: false,
             displayMaximizable: false,
             displayPosition: false,
@@ -594,6 +642,12 @@ export default {
         closeBasic2() {
             this.displayBasic2 = false;
         },
+        openResponsive() {
+            this.displayResponsive = true;
+        },
+        closeResponsive() {
+            this.displayResponsive = false;
+        },
         openModal() {
             this.displayModal = true;
         },