From bf9f2cebaacbd310450171eab55c8f878f3c93b8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 22 Sep 2020 17:55:01 +0300
Subject: [PATCH] Migrated Dialog to V3

---
 src/components/dialog/Dialog.vue | 94 +++++++++++---------------------
 src/views/dialog/DialogDoc.vue   | 42 ++++++++------
 2 files changed, 58 insertions(+), 78 deletions(-)

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 8f2c9610f..dde9d145e 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,10 +1,10 @@
 <template>
-    <div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
-        <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
+    <div :ref="maskRef" :class="maskClass" v-if="visible" @click="onMaskClick">
+        <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
+            <div :ref="containerRef" :class="dialogClass" v-if="containerVisible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
                 <div class="p-dialog-header" v-if="showHeader">
                     <slot name="header">
-                        <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
+                        <span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
                     </slot>
                     <div class="p-dialog-header-icons">
                         <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
@@ -72,33 +72,22 @@ export default {
     },
     data() {
         return {
-            dialogClasses: null,
-            dialogStyles: null,
-            maskVisible: this.visible,
+            containerVisible: this.visible,
             maximized: false
         }
     },
     documentKeydownListener: null,
+    container: null,
+    mask: null,
     updated() {
-        this.removeStylesFromMask();
-
-        if (this.visible && !this.maskVisible) {
-            this.maskVisible = true;
-        }
-
-        if (this.modal && this.$refs.mask && !DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
-            DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-        }
-    },
-    mounted() {
-        this.removeStylesFromMask();
+        this.containerVisible = this.visible;
     },
     beforeUnmount() {
-        this.disableDocumentSettings();
+        this.unbindDocumentState();
     },
     methods: {
         close() {
-            this.$emit('update:visible', false);
+            this.containerVisible = false;
         },
         onBeforeEnter(el) {
             if (this.autoZIndex) {
@@ -106,26 +95,21 @@ export default {
             }
         },
         onEnter() {
-            this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
+            this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
 
             this.$emit('show');
             this.focus();
             this.enableDocumentSettings();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
+            DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
         },
         onLeave() {
             this.$emit('hide');
         },
         onAfterLeave() {
-            this.maskVisible = false;
-            this.disableDocumentSettings();
-        },
-        onAppear() {
-            if (this.visible) {
-                this.onEnter();
-            }
+            this.$emit('update:visible', false);
+            this.unbindDocumentState();
         },
         onMaskClick() {
             if (this.modal && this.closable && this.dismissableMask) {
@@ -133,7 +117,7 @@ export default {
             }
         },
         focus() {
-            let focusTarget = this.$refs.dialog.querySelector('[autofocus]');
+            let focusTarget = this.container.querySelector('[autofocus]');
             if (focusTarget) {
                 focusTarget.focus();
             }
@@ -157,7 +141,7 @@ export default {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
-        disableDocumentSettings() {
+        unbindDocumentState() {
             if (this.modal) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 this.unbindDocumentKeydownListener();
@@ -169,7 +153,7 @@ export default {
         onKeyDown(event) {
             if (event.which === 9) {
                 event.preventDefault();
-                let focusableElements = DomHandler.getFocusableElements(this.$refs.dialog);
+                let focusableElements = DomHandler.getFocusableElements(this.container);
                 if (focusableElements && focusableElements.length > 0) {
                     if (!document.activeElement) {
                         focusableElements[0].focus();
@@ -212,31 +196,22 @@ export default {
 
             return pos ? `p-dialog-${pos}` : '';
         },
-        removeStylesFromMask() {
-            if (this.$refs.mask) {
-                this.dialogStyles = this.$vnode.data.style;
-                if (this.dialogStyles) {
-                    Object.keys(this.dialogStyles).forEach((key) => {
-                        this.$refs.mask.style[key] = '';
-                    });
-                }
-
-                this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
-                if (this.dialogClasses) {
-                    this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
-                }
-            }
+        containerRef(el) {
+            this.container = el;
+        },
+        maskRef(el) {
+            this.mask = el;
         }
     },
     computed: {
         maskClass() {
-            return ['p-dialog-mask', this.getPositionClass()];
+            return ['p-dialog-mask', {'p-component-overlay': this.modal}, this.getPositionClass()];
         },
         dialogClass() {
             return ['p-dialog p-component', {
                 'p-dialog-rtl': this.rtl,
                 'p-dialog-maximized': this.maximizable && this.maximized
-            }, this.dialogClasses];
+            }];
         },
         maximizeIconClass() {
             return ['p-dialog-header-maximize-icon pi', {
@@ -244,9 +219,6 @@ export default {
                 'pi-window-minimize': this.maximized
             }];
         },
-        dialogStyle() {
-            return this.dialogStyles;
-        },
         ariaId() {
             return UniqueComponentId();
         },
@@ -327,7 +299,7 @@ export default {
 .p-dialog-leave-active {
     transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
-.p-dialog-enter,
+.p-dialog-enter-from,
 .p-dialog-leave-to {
     opacity: 0;
     transform: scale(0.7);
@@ -367,27 +339,27 @@ export default {
 .p-dialog-bottomright .p-dialog-leave-active {
     transition: all .3s ease-out;
 }
-.p-dialog-top .p-dialog-enter,
+.p-dialog-top .p-dialog-enter-from,
 .p-dialog-top .p-dialog-leave-to {
     transform: translate3d(0px, -100%, 0px);
 }
-.p-dialog-bottom .p-dialog-enter,
+.p-dialog-bottom .p-dialog-enter-from,
 .p-dialog-bottom .p-dialog-leave-to {
     transform: translate3d(0px, 100%, 0px);
 }
-.p-dialog-left .p-dialog-enter,
+.p-dialog-left .p-dialog-enter-from,
 .p-dialog-left .p-dialog-leave-to,
-.p-dialog-topleft .p-dialog-enter,
+.p-dialog-topleft .p-dialog-enter-from,
 .p-dialog-topleft .p-dialog-leave-to,
-.p-dialog-bottomleft .p-dialog-enter,
+.p-dialog-bottomleft .p-dialog-enter-from,
 .p-dialog-bottomleft .p-dialog-leave-to {
     transform: translate3d(-100%, 0px, 0px);
 }
-.p-dialog-right .p-dialog-enter,
+.p-dialog-right .p-dialog-enter-from,
 .p-dialog-right .p-dialog-leave-to,
-.p-dialog-topright .p-dialog-enter,
+.p-dialog-topright .p-dialog-enter-from,
 .p-dialog-topright .p-dialog-leave-to,
-.p-dialog-bottomright .p-dialog-enter,
+.p-dialog-bottomright .p-dialog-enter-from,
 .p-dialog-bottomright .p-dialog-leave-to {
     transform: translate3d(100%, 0px, 0px);
 }
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 00a0f0337..a7fde8e7f 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -8,9 +8,9 @@ import Dialog from 'primevue/dialog';
 </CodeHighlight>
 
 				<h5>Getting Started</h5>
-				<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the sync operator for two-way binding.</p>
+				<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
 <CodeHighlight>
-&lt;Dialog header="Header" :visible.sync="display" &gt;
+&lt;Dialog header="Header" v-model:visible="display" &gt;
 	Content
 &lt;/Dialog&gt;
 </CodeHighlight>
@@ -28,13 +28,13 @@ export default {
 				<h5>Header and Footer</h5>
 				<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
 <CodeHighlight>
-&lt;Dialog header="Header" footer="Footer" :visible.sync="display"&gt;
+&lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 </CodeHighlight>
 
 <CodeHighlight>
-&lt;Dialog :visible.sync="display"&gt;
+&lt;Dialog v-model:visible="display"&gt;
     &lt;template #header&gt;
 		&lt;h3&gt;Header&lt;/h3&gt;
 	&lt;/template&gt;
@@ -51,7 +51,7 @@ export default {
                 <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".</p>
 <CodeHighlight>
-&lt;Dialog position="top" :visible.sync="display"&gt;
+&lt;Dialog position="top" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 </CodeHighlight>
@@ -59,7 +59,7 @@ export default {
                 <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>
 <CodeHighlight>
-&lt;Dialog :visible.sync="display" :contentStyle="{overflow: 'visible'}"&gt;
+&lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt;
 	Content
 &lt;/Dialog&gt;
 </CodeHighlight>
@@ -67,7 +67,7 @@ export default {
                 <h5>Initial Focus</h5>
                 <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
 <CodeHighlight>
-&lt;Dialog :visible.sync="display"&gt;
+&lt;Dialog v-model:visible="display"&gt;
     Content
 	&lt;template #footer&gt;
         &lt;Button label="No" /&gt;
@@ -258,10 +258,11 @@ 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;p class="p-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;
+&lt;Dialog header="Header" v-model:visible="displayBasic" :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="closeBasic" class="p-button-text"/&gt;
         &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus /&gt;
@@ -269,7 +270,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" v-model:visible="displayBasic2" :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;
@@ -292,7 +293,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" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"&gt;
     &lt;p class="p-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;
@@ -304,7 +305,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" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt;
     &lt;div class="confirmation-content"&gt;
         &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
         &lt;span&gt;Are you sure you want to proceed?&lt;/span&gt;
@@ -317,7 +318,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" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
     &lt;p class="p-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;
@@ -345,12 +346,12 @@ 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" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&gt;
     &lt;p class="p-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;
     &lt;template #footer&gt;
-        &lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-text"/&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-text" /&gt;
         &lt;Button label="Yes" icon="pi pi-check" @click="closePosition" autofocus /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
@@ -408,6 +409,9 @@ export default {
         closePosition() {
             this.displayPosition = false;
         }
+    },
+    components: {
+        'DialogDoc': DialogDoc
     }
 }
 </CodeHighlight>
@@ -427,6 +431,10 @@ p {
     align-items: center;
     justify-content: center;
 }
+
+.p-dialog .p-button {
+    min-width: 6rem;
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>