Fixed #992 - breakpoints for Dialog and ConfirmDialog

2021-02-19 20:24:08 +03:00 · 2021-02-19 20:24:08 +03:00 · a8fdc2858d
parent 19fe8b219b
commit a8fdc2858d
7 changed files with 142 additions and 5 deletions
--- 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 {
--- 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 {
--- 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 {
--- 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,6 +83,7 @@ export default {
    documentKeydownListener: null,
    container: null,
    mask: null,
+    styleElement: null,
    updated() {
        if (this.visible) {
            this.containerVisible = this.visible;
@ -86,9 +91,15 @@ export default {
    },
    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: {
--- 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>
--- 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;
        },
--- 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;
        },