From e61b4b0b992a3f853b7d9662d639bad5867b75a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 2 Sep 2021 09:23:44 +0300
Subject: [PATCH] speeddial demo fix

---
 src/views/speeddial/SpeedDialDemo.vue | 16 ++++++-------
 src/views/speeddial/SpeedDialDoc.vue  | 34 ++++++++++++++-------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/views/speeddial/SpeedDialDemo.vue b/src/views/speeddial/SpeedDialDemo.vue
index 6bb1a3aa7..b57fa40ec 100644
--- a/src/views/speeddial/SpeedDialDemo.vue
+++ b/src/views/speeddial/SpeedDialDemo.vue
@@ -22,31 +22,31 @@
             <div class="card">
                 <h5>Circle, Semi-Circle and Quarter-Circle</h5>
                 <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
-                    <SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" />
+                    <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
                     <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
                     <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
                     <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
                     <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
-                    <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" />
-                    <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" />
-                    <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" />
-                    <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" />
+                    <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
                 </div>
             </div>
 
             <div class="card">
                 <h5>Tooltip</h5>
                 <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
                 </div>
             </div>
 
             <div class="card">
                 <h5>Transition Duration, Icon and No Rotate Animation</h5>
                 <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
-                    <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+                    <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
                 </div>
             </div>
 
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index 6fdb59031..2cf48d6c2 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -291,6 +291,7 @@ export default {
                     content: `
 <template>
     <div>
+        <Toast />
         <div class="card">
             <h5>Linear</h5>
             <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
@@ -304,31 +305,31 @@ export default {
         <div class="card">
             <h5>Circle, Semi-Circle and Quarter-Circle</h5>
             <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
-                <SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" />
+                <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
                 <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
-                <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
             </div>
         </div>
 
         <div class="card">
             <h5>Tooltip</h5>
             <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
+                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
         <div class="card">
             <h5>Transition Duration, Icon and No Rotate Animation</h5>
             <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+                <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
             </div>
         </div>
 
@@ -502,6 +503,7 @@ export default {
                     content: `
 <template>
     <div>
+        <Toast />
         <div class="card">
             <h5>Linear</h5>
             <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
@@ -515,31 +517,31 @@ export default {
         <div class="card">
             <h5>Circle, Semi-Circle and Quarter-Circle</h5>
             <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
-                <SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" />
+                <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
                 <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
                 <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
-                <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" />
-                <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
+                <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
             </div>
         </div>
 
         <div class="card">
             <h5>Tooltip</h5>
             <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
+                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
         <div class="card">
             <h5>Transition Duration, Icon and No Rotate Animation</h5>
             <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+                <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
             </div>
         </div>