From e741c3d269a2f0f97456c500b713c3801b9d9578 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 6 Feb 2020 14:57:20 +0300
Subject: [PATCH] Refactor styles

---
 src/components/dialog/Dialog.d.ts |  2 ++
 src/components/dialog/Dialog.vue  | 42 +++++++++++++++----------------
 src/views/dialog/DialogDoc.vue    |  6 ++---
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
index 56cedcdc6..82d7b7601 100644
--- a/src/components/dialog/Dialog.d.ts
+++ b/src/components/dialog/Dialog.d.ts
@@ -12,6 +12,8 @@ export declare class Dialog extends Vue {
     baseZIndex?: number;
     autoZIndex?: boolean;
     ariaCloseLabel?: string;
+    position?: string;
+    maximizable?: boolean;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $slots: {
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 13dca1237..5c3f44890 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -186,7 +186,7 @@ export default {
             }
         },
         getPositionClass() {
-            const positions = ['left', 'right', 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight'];
+            const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
             const pos = positions.find(item => item === this.position);
 
             return pos ? `p-dialog-${pos}` : '';
@@ -369,10 +369,10 @@ export default {
 .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 {
+.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);
 }
@@ -384,14 +384,14 @@ export default {
 .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 {
+.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,
@@ -404,18 +404,18 @@ export default {
 }
 .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 {
+.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 {
+.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 */
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 3ae72669b..27df22a52 100644
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -50,8 +50,8 @@ export default {
 &lt;/Dialog&gt;
 </CodeHighlight>
 
-				<h3>Dynamic Content</h3>
-				<p>Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via <i>contentStyle</i> so longer content displays a scrollbar.</p>
+                <h3>Positioning</h3>
+                <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>
 
 				<h3>Properties</h3>
 				<div class="doc-tablewrapper">
@@ -93,7 +93,7 @@ export default {
                                 <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>
+                                <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
                             </tr>
                             <tr>
                                 <td>contentStyle</td>