Refactor #5437 - SpeedDial

components/lib/themes/primeone/base/speeddial/index.js

@@ -1,7 +1,7 @@
 export default {
     css: ({ dt }) => `
 .p-speeddial {
-    position: absolute;
+    position: static;
     display: flex;
     gap: 0.25rem;
 }

doc/speeddial/CircleDoc.vue

@@ -3,8 +3,8 @@
         <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
     </DocSectionText>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
 `,
                 options: `
 <template>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
     </div>
@@ -114,8 +114,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
     </div>

doc/speeddial/CustomDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,62 +53,61 @@ export default {
             ],
             code: {
                 basic: `
-<Toast />
-<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
 </template>
 
 <script>
 export default {
-  data() {
-      return {
-          items: [
-              {
-                  label: 'Add',
-                  icon: 'pi pi-pencil',
-                  command: () => {
-                      this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-                  }
-              },
-              {
-                  label: 'Update',
-                  icon: 'pi pi-refresh',
-                  command: () => {
-                      this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                  }
-              },
-              {
-                  label: 'Delete',
-                  icon: 'pi pi-trash',
-                  command: () => {
-                      this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                  }
-              },
-              {
-                  label: 'Upload',
-                  icon: 'pi pi-upload',
-                  command: () => {
-                      this.$router.push('/fileupload');
-                  }
-              },
-              {
-                  label: 'Vue Website',
-                  icon: 'pi pi-external-link',
-                  command: () => {
-                      window.location.href = 'https://vuejs.org/';
-                  }
-              }
-          ]
-      }
-  }
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
 };
 <\/script>
 `,
@@ -117,7 +116,7 @@ export default {
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
 </template>
@@ -131,41 +130,41 @@ const toast = useToast();
 const router = useRouter();
 
 const items = ref([
-  {
-      label: 'Add',
-      icon: 'pi pi-pencil',
-      command: () => {
-          toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-      }
-  },
-  {
-      label: 'Update',
-      icon: 'pi pi-refresh',
-      command: () => {
-          toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-      }
-  },
-  {
-      label: 'Delete',
-      icon: 'pi pi-trash',
-      command: () => {
-          toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-      }
-  },
-  {
-      label: 'Upload',
-      icon: 'pi pi-upload',
-      command: () => {
-          router.push('/fileupload');
-      }
-  },
-  {
-      label: 'Vue Website',
-      icon: 'pi pi-external-link',
-      command: () => {
-          window.location.href = 'https://vuejs.org/'
-      }
-  }
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
 ])
 <\/script>
 `

doc/speeddial/LinearDoc.vue

@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+<SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+<SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+<SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
             <Toast />
         </div>
     </div>
@@ -124,10 +124,10 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
             <Toast />
         </div>
     </div>

doc/speeddial/MaskDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
 `,
                 options: `
 <template>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>
@@ -114,7 +114,7 @@ data() {
 <template>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>

doc/speeddial/QuarterCircleDoc.vue

@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
             <Toast />
         </div>
     </div>
@@ -124,10 +124,10 @@ data() {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
             <Toast />
         </div>
     </div>

doc/speeddial/SemiCircleDoc.vue

@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
             <Toast />
         </div>
     </div>
@@ -123,10 +123,10 @@ export default {
                 composition: `
 <template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
         <Toast />
     </div>
 </template>

doc/speeddial/TooltipDoc.vue

@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -54,15 +54,15 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+<SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+<SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>
@@ -118,8 +118,8 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>