Added position animations

src/components/dialog/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <div ref="mask" :class="wrapperClass" v-if="maskVisible">
+    <div ref="mask" :class="maskClass" v-if="maskVisible">
         <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <div ref="container" :class="containerClass" :style="containerStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
+            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
                 <div class="p-dialog-titlebar" v-if="showHeader">
                     <slot name="header">
                         <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
@@ -95,7 +95,7 @@ export default {
             }
         },
         onEnter() {
-            this.$refs.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
+            this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
 
             this.$emit('show');
             this.focus();
@@ -114,7 +114,7 @@ export default {
             }
         },
         focus() {
-            let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
+            let focusable = DomHandler.findSingle(this.$refs.dialog, 'input,button');
             if (focusable) {
                 focusable.focus();
             }
@@ -150,7 +150,7 @@ export default {
         onKeyDown(event) {
             if (event.which === 9) {
                 event.preventDefault();
-                let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
+                let focusableElements = DomHandler.getFocusableElements(this.$refs.dialog);
                 if (focusableElements && focusableElements.length > 0) {
                     if (!document.activeElement) {
                         focusableElements[0].focus();
@@ -202,7 +202,7 @@ export default {
 
                 this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
                 if (this.dialogClasses) {
-                    this.$refs.mask.classList = 'p-dialog-wrapper' + (this.modal && ' p-component-overlay p-dialog-mask p-fadein ') + this.getPositionClass();
+                    this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
                 }
             }
         }
@@ -213,12 +213,12 @@ export default {
                 ...this.$listeners
             };
         },
-        wrapperClass() {
+        maskClass() {
-            return ['p-dialog-wrapper', {
+            return ['p-dialog-mask', {
-                'p-component-overlay p-dialog-mask p-fadein': this.modal,
+                'p-component-overlay': this.modal,
             }, this.getPositionClass()];
         },
-        containerClass() {
+        dialogClass() {
             return ['p-dialog p-component', {
                 'p-dialog-rtl': this.rtl,
                 'p-dialog-maximized': this.maximizable && this.maximized
@@ -230,7 +230,7 @@ export default {
                 'pi-window-minimize': this.maximized
             }];
         },
-        containerStyle() {
+        dialogStyle() {
             return this.dialogStyles;
         },
         ariaId() {
@@ -243,7 +243,7 @@ export default {
 }
 </script>
 <style>
-.p-dialog-wrapper {
+.p-dialog-mask {
     position: fixed;
     top: 0;
     left: 0;
@@ -254,7 +254,7 @@ export default {
     align-items: center;
     pointer-events: none;
 }
-.p-dialog-wrapper.p-dialog-mask {
+.p-dialog-mask.p-component-overlay {
     pointer-events: auto;
 }
 .p-dialog {
@@ -352,6 +352,7 @@ export default {
     }
 }
 /* Animation */
+/* Center */
 .p-dialog-enter-active {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
@@ -363,6 +364,60 @@ export default {
     opacity: 0;
     transform: scale(0.7);
 }
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topLeft .p-dialog,
+.p-dialog-topRight .p-dialog,
+.p-dialog-bottomLeft .p-dialog,
+.p-dialog-bottomRight .p-dialog {
+    margin: .75em;
+    transform: translate3d(0px, 0px, 0px);
+}
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topLeft .p-dialog-enter-active,
+.p-dialog-topLeft .p-dialog-leave-active,
+.p-dialog-topRight .p-dialog-enter-active,
+.p-dialog-topRight .p-dialog-leave-active,
+.p-dialog-bottomLeft .p-dialog-enter-active,
+.p-dialog-bottomLeft .p-dialog-leave-active,
+.p-dialog-bottomRight .p-dialog-enter-active,
+.p-dialog-bottomRight .p-dialog-leave-active {
+    transition: all .3s ease-out;
+}
+.p-dialog-top .p-dialog-enter,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+.p-dialog-bottom .p-dialog-enter,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+.p-dialog-left .p-dialog-enter,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topLeft .p-dialog-enter,
+.p-dialog-topLeft .p-dialog-leave-to,
+.p-dialog-bottomLeft .p-dialog-enter,
+.p-dialog-bottomLeft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+.p-dialog-right .p-dialog-enter,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topRight .p-dialog-enter,
+.p-dialog-topRight .p-dialog-leave-to,
+.p-dialog-bottomRight .p-dialog-enter,
+.p-dialog-bottomRight .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
 /* Maximize */
 .p-dialog-maximized {
     -webkit-transition: none;

src/views/dialog/DialogDoc.vue

@@ -89,6 +89,12 @@ export default {
                                 <td>null</td>
                                 <td>Defines if background should be blocked when dialog is displayed.</td>
                             </tr>
+                            <tr>
+                                <td>position</td>
+                                <td>string</td>
+                                <td>center</td>
+                                <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft" or "bottomRight".</td>
+                            </tr>
                             <tr>
                                 <td>contentStyle</td>
                                 <td>object</td>
@@ -215,15 +221,91 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Button label="Show" icon="pi pi-external-link" @click="open" /&gt;
+&lt;h3&gt;Basic&lt;/h3&gt;
-&lt;Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true"&gt;
+&lt;Button label="Show" icon="pi pi-external-link" class="show-btn" @click="openBasic" /&gt;
+&lt;Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}"&gt;
     The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
         His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
         Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
         kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="close" /&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" /&gt;
-        &lt;Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;Button label="Long Content" icon="pi pi-external-link" class="show-btn" @click="openBasic2" /&gt;
+&lt;Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}"&gt;
+    Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
+    &lt;br&gt;&lt;br&gt;
+    After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
+    &lt;br&gt;&lt;br&gt;
+    From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
+    &lt;br&gt;&lt;br&gt;
+    Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
+    &lt;br&gt;&lt;br&gt;
+    Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
+    &lt;br&gt;&lt;br&gt;
+    Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
+    &lt;br&gt;&lt;br&gt;
+    &lt;template #footer&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic2" /&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;h3&gt;Modal&lt;/h3&gt;
+&lt;Button label="Show" icon="pi pi-external-link" class="show-btn" @click="openModal" /&gt;
+&lt;Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true"&gt;
+    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+    &lt;template #footer&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeModal" /&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;h3&gt;Maximizable&lt;/h3&gt;
+&lt;Button label="Show" icon="pi pi-external-link" class="show-btn" @click="openMaximizable" /&gt;
+&lt;Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
+    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+    &lt;template #footer&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;h3&gt;Position&lt;/h3&gt;
+&lt;div class="p-grid p-dir-col"&gt;
+    &lt;div class="p-col"&gt;
+        &lt;Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="show-btn p-button-dark" /&gt;
+        &lt;Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="show-btn p-button-dark" /&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col"&gt;
+        &lt;Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="show-btn p-button-success" /&gt;
+        &lt;Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topLeft')" class="show-btn p-button-success" /&gt;
+        &lt;Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topRight')" class="show-btn p-button-success" /&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col"&gt;
+        &lt;Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="show-btn p-button-warning" /&gt;
+        &lt;Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomLeft')" class="show-btn p-button-warning" /&gt;
+        &lt;Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomRight')" class="show-btn p-button-warning" /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;Dialog header="Godfather I" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&gt;
+    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+    &lt;template #footer&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closePosition" /&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 </template>
@@ -233,18 +315,72 @@ export default {
 export default {
     data() {
         return {
-			display: false
+            displayBasic: false,
+            displayBasic2: false,
+            displayModal: false,
+            displayMaximizable: false,
+            displayPosition: false,
+            position: 'center'
         }
     },
     methods: {
-		open() {
+        openBasic() {
-			this.display = true;
+            this.displayBasic = true;
         },
-		close() {
+        closeBasic() {
-			this.display = false;
+            this.displayBasic = false;
+        },
+        openBasic2() {
+            this.displayBasic2 = true;
+        },
+        closeBasic2() {
+            this.displayBasic2 = false;
+        },
+        openModal() {
+            this.displayModal = true;
+        },
+        closeModal() {
+            this.displayModal = false;
+        },
+        openMaximizable() {
+            this.displayMaximizable = true;
+        },
+        closeMaximizable() {
+            this.displayMaximizable = false;
+        },
+        openPosition(position) {
+            this.position = position;
+            this.displayPosition = true;
+        },
+        closePosition() {
+            this.displayPosition = false;
         }
+    },
+    components: {
+        'DialogDoc': DialogDoc
     }
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+//CSS
+body .p-button-dark {
+    background-color: #455b70;
+    border-color: #455b70;
+}
+body .p-button-dark:enabled:hover {
+    background-color: #364758;
+}
+body .p-button-dark:enabled:focus {
+    box-shadow: 0 0 0 0.2em #95a9bd;
+}
+body .show-btn {
+    margin: .5em .5em .5em 0;
+    width: 140px;
+}
+body .p-dialog .p-dialog-content {
+    line-height: 1.5;
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>