From c67d645c8b05dbfd5d6bcfe306cec896ac8bed2c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 18:27:18 +0300
Subject: [PATCH] Update demo content

---
 src/views/dialog/DialogDemo.vue           | 30 +++++++++++++-
 src/views/dialog/DialogDoc.vue            | 49 ++++++++++++++---------
 src/views/inputswitch/InputSwitchDemo.vue |  2 -
 src/views/inputswitch/InputSwitchDoc.vue  |  2 -
 src/views/sidebar/SidebarDemo.vue         | 36 +++++------------
 src/views/sidebar/SidebarDoc.vue          | 32 +++++----------
 6 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 714751bbb..6bbdfcf52 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -56,6 +56,19 @@
                     </template>
                 </Dialog>
 
+                <h5>Confirmation</h5>
+                <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
+                <Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
+                    <div class="confirmation-content">
+                        <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> 
+                        <span>Are you sure you want to proceed?</span>
+                    </div>
+                    <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
+                    </template>
+                </Dialog>
+
                 <h5>Maximizable</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
                 <Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
@@ -111,6 +124,7 @@ export default {
             displayBasic: false,
             displayBasic2: false,
             displayModal: false,
+            displayConfirmation: false,
             displayMaximizable: false,
             displayPosition: false,
             position: 'center'
@@ -135,6 +149,12 @@ export default {
         closeModal() {
             this.displayModal = false;
         },
+        openConfirmation() {
+            this.displayConfirmation = true;
+        },
+        closeConfirmation() {
+            this.displayConfirmation = false;
+        },
         openMaximizable() {
             this.displayMaximizable = true;
         },
@@ -157,11 +177,17 @@ export default {
 
 <style scoped lang="scss">
 .p-button {
-    margin: .5em .5em .5em 0;
-    width: 140px;
+    margin: 0 .5rem 0 0;
+    min-width: 10rem;
 }
 
 p {
     margin: 0;
 }
+
+.confirmation-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index f77efbe68..5cf63a3d7 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -290,6 +290,19 @@ export default {
     &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" :visible.sync="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;
+    &lt;/div&gt;
+    &lt;template #footer&gt;
+        &lt;Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus /&gt;
+    &lt;/template&gt;
+&lt;/Dialog&gt;
+
 &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;
@@ -339,6 +352,7 @@ export default {
             displayBasic: false,
             displayBasic2: false,
             displayModal: false,
+            displayConfirmation: false,
             displayMaximizable: false,
             displayPosition: false,
             position: 'center'
@@ -363,6 +377,12 @@ export default {
         closeModal() {
             this.displayModal = false;
         },
+        openConfirmation() {
+            this.displayConfirmation = true;
+        },
+        closeConfirmation() {
+            this.displayConfirmation = false;
+        },
         openMaximizable() {
             this.displayMaximizable = true;
         },
@@ -376,31 +396,24 @@ export default {
         closePosition() {
             this.displayPosition = false;
         }
-    },
-    components: {
-        'DialogDoc': DialogDoc
     }
 }
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-//CSS
-body .p-button-dark {
-    background-color: #455b70;
-    border-color: #455b70;
+.p-button {
+    margin: 0 .5rem 0 0;
+    min-width: 10rem;
 }
-body .p-button-dark:enabled:hover {
-    background-color: #364758;
+
+p {
+    margin: 0;
 }
-body .p-button-dark:enabled:focus {
-    box-shadow: 0 0 0 0.2em #95a9bd;
-}
-body .{
-    margin: .5em .5em .5em 0;
-    width: 140px;
-}
-body .p-dialog .p-dialog-content {
-    line-height: 1.5;
+
+.confirmation-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 </CodeHighlight>
 			</TabPanel>
diff --git a/src/views/inputswitch/InputSwitchDemo.vue b/src/views/inputswitch/InputSwitchDemo.vue
index 6facaba24..fac1ff037 100755
--- a/src/views/inputswitch/InputSwitchDemo.vue
+++ b/src/views/inputswitch/InputSwitchDemo.vue
@@ -11,11 +11,9 @@
             <div class="card">
                 <h5>Basic</h5>
                 <InputSwitch v-model="checked1" />
-                <p style="font-weight: bold">{{checked1}}</p>
 
                 <h5>Preselection</h5>
                 <InputSwitch v-model="checked2" />
-                <p style="font-weight: bold">{{checked2}}</p>
             </div>
         </div>
 
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index 2dbca0fdf..956a7b124 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -161,11 +161,9 @@ export default {
 <template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;InputSwitch v-model="checked1" /&gt;
-&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
 
 &lt;h3&gt;Preselection&lt;/h3&gt;
 &lt;InputSwitch v-model="checked2" /&gt;
-&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
 </template>
 </CodeHighlight>
 
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index c4ee9ba1a..05d24ec83 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/src/views/sidebar/SidebarDemo.vue
@@ -9,40 +9,30 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
-                <Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
-                <Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
-                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
+                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
+                <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
+                <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
+                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
                 <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
                 <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
-                    <h1 style="fontWeight:normal">Left Sidebar</h1>
-                    <Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
-                    <Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
+                    <h3>Left Sidebar</h3>
                 </Sidebar>
 
                 <Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
-                    <h1 style="fontWeight:normal">Right Sidebar</h1>
-                    <Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
-                    <Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
+                    <h3>Right Sidebar</h3>
                 </Sidebar>
 
                 <Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
-                    <h1 style="fontWeight:normal">Top Sidebar</h1>
-                    <Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
-                    <Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
+                    <h3>Top Sidebar</h3>
                 </Sidebar>
 
                 <Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
-                    <h1 style="fontWeight:normal">Bottom Sidebar</h1>
-                    <Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
-                    <Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
+                    <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
                 <Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
-                    <h1 style="fontWeight:normal">Full Screen</h1>
-                    <Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
-                    <Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
+                    <h3>Full Screen</h3>
                 </Sidebar>
             </div>
         </div>
@@ -68,10 +58,4 @@ export default {
         'SidebarDoc': SidebarDoc
     }
 }
-</script>
-
-<style lang="scss" scoped>
-h1 {
-    margin-top: 0;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 539dce6e3..340c2b9b3 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -204,41 +204,31 @@ import Sidebar from 'primevue/sidebar';
 				</a>
 <CodeHighlight>
 <template v-pre>
+&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
+&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  /&gt;
+&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  /&gt;
+&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  /&gt;
+&lt;Button icon="pi pi-th-large" @click="visibleFull = true"  /&gt;
+
 &lt;Sidebar :visible.sync="visibleLeft" :baseZIndex="1000"&gt;
-    &lt;h1 style="fontWeight:normal"&gt;Left Sidebar&lt;/h1&gt;
-    &lt;Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
-    &lt;Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/&gt;
+    &lt;h3&gt;Left Sidebar&lt;/h3&gt;
 &lt;/Sidebar&gt;
 
 &lt;Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right"&gt;
-    &lt;h1 style="fontWeight:normal"&gt;Right Sidebar&lt;/h1&gt;
-    &lt;Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
-    &lt;Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/&gt;
+    &lt;h3&gt;Right Sidebar&lt;/h3&gt;
 &lt;/Sidebar&gt;
 
 &lt;Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top"&gt;
-    &lt;h1 style="fontWeight:normal"&gt;Top Sidebar&lt;/h1&gt;
-    &lt;Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
-    &lt;Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/&gt;
+    &lt;h3&gt;Top Sidebar&lt;/h3&gt;
 &lt;/Sidebar&gt;
 
 &lt;Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom"&gt;
-    &lt;h1 style="fontWeight:normal"&gt;Bottom Sidebar&lt;/h1&gt;
-    &lt;Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
-    &lt;Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/&gt;
+    &lt;h3&gt;Bottom Sidebar&lt;/h3&gt;
 &lt;/Sidebar&gt;
 
 &lt;Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full"&gt;
-    &lt;h1 style="fontWeight:normal"&gt;Full Screen&lt;/h1&gt;
-    &lt;Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
-    &lt;Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/&gt;
+    &lt;h3&gt;Full Screen&lt;/h3&gt;
 &lt;/Sidebar&gt;
-
-&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" /&gt;
-&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" /&gt;
-&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" /&gt;
-&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" /&gt;
-&lt;Button icon="pi pi-th-large" @click="visibleFull = true"  /&gt;
 </template>
 </CodeHighlight>