From c8dbe3a06ee69c45db1eed86edd05c50ffb7c36d 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: Tue, 27 Jul 2021 11:19:04 +0300
Subject: [PATCH] SpeedDial demo added

---
 src/assets/menu/menu.json             |   5 +
 src/main.js                           |   2 +
 src/router/index.js                   |   5 +
 src/views/speeddial/SpeedDialDemo.vue | 229 +++++++++
 src/views/speeddial/SpeedDialDoc.vue  | 702 ++++++++++++++++++++++++++
 5 files changed, 943 insertions(+)
 create mode 100644 src/views/speeddial/SpeedDialDemo.vue
 create mode 100644 src/views/speeddial/SpeedDialDoc.vue

diff --git a/src/assets/menu/menu.json b/src/assets/menu/menu.json
index 92ce8d6e3..ed5755931 100644
--- a/src/assets/menu/menu.json
+++ b/src/assets/menu/menu.json
@@ -268,6 +268,11 @@
                     "name": "Button",
                     "to": "/button"
                 },
+                {
+                    "name": "Speed Dial",
+                    "to": "/speeddial",
+                    "badge": "New"
+                },
                 {
                     "name": "SplitButton",
                     "to": "/splitbutton"
diff --git a/src/main.js b/src/main.js
index d54f26d2c..7e9272f47 100644
--- a/src/main.js
+++ b/src/main.js
@@ -73,6 +73,7 @@ import Skeleton from './components/skeleton/Skeleton';
 import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import SplitButton from './components/splitbutton/SplitButton';
+import SpeedDial from './components/speeddial/SpeedDial';
 import Splitter from './components/splitter/Splitter';
 import SplitterPanel from './components/splitterpanel/SplitterPanel';
 import Steps from './components/steps/Steps';
@@ -191,6 +192,7 @@ app.component('SelectButton', SelectButton);
 app.component('Slider', Slider);
 app.component('Sidebar', Sidebar);
 app.component('Skeleton', Skeleton);
+app.component('SpeedDial', SpeedDial);
 app.component('SplitButton', SplitButton);
 app.component('Splitter', Splitter);
 app.component('SplitterPanel', SplitterPanel);
diff --git a/src/router/index.js b/src/router/index.js
index d07b45819..0fd79f847 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -577,6 +577,11 @@ const routes = [
         name: 'spacing',
         component: () => import('../views/spacing/SpacingDemo.vue')
     },
+    {
+        path: '/speeddial',
+        name: 'speeddial',
+        component: () => import('../views/speeddial/SpeedDialDemo.vue')
+    },
     {
         path: '/splitbutton',
         name: 'splitbutton',
diff --git a/src/views/speeddial/SpeedDialDemo.vue b/src/views/speeddial/SpeedDialDemo.vue
new file mode 100644
index 000000000..6463cfeed
--- /dev/null
+++ b/src/views/speeddial/SpeedDialDemo.vue
@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Speed Dial</h1>
+                <p>When pressed, a floating action button can display multiple primary actions that can be performed on a page.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Linear</h5>
+                <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
+                    <SpeedDial :model="items" direction="up">
+                        <template #button="{ toggle }">
+                            <Button type="button" class="p-px-3" @click="toggle($event)">
+                                <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
+                            </Button>
+                        </template>
+                    </SpeedDial>
+                    <SpeedDial :model="items" direction="down" hideIcon="pi pi-discord">
+                        <template #item="{ item }">
+                            <a :href="item.url || '#'" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" @click="deneme($event, item)">
+                                <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
+                            </a>
+                        </template>
+                    </SpeedDial>
+                    <SpeedDial :model="items" direction="left" />
+                    <SpeedDial :model="items" direction="right" /> 
+                </div>
+            </div>
+
+            <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" hideIcon="pi pi-discord" />
+                    <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" />
+                </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" />
+
+                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                </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" />
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Mask</h5>
+                <div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
+                    <SpeedDial :model="items" direction="up" mask />
+                </div>
+            </div>
+        </div>
+
+        <SpeedDialDoc />
+    </div>
+</template>
+
+<script>
+import SpeedDialDoc from './SpeedDialDoc.vue';
+
+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: () => {
+                        window.location.hash = "/fileupload"
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/'
+                    }
+                }
+            ]
+        }
+    },
+    components: {
+        'SpeedDialDoc': SpeedDialDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.speeddial-linear-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+
+    .p-speeddial-direction-down {
+        left: calc(50% - 2rem);
+        top: 0;
+    }
+
+    .p-speeddial-direction-left {
+        right: 0;
+        top: calc(50% - 2rem);
+    }
+
+    .p-speeddial-direction-right {
+        left: 0;
+        top: calc(50% - 2rem);
+    }
+}
+
+::v-deep(.speeddial-circle-demo) {
+    .p-speeddial-circle {
+        top: calc(50% - 2rem);
+        left: calc(50% - 2rem);
+    }
+
+    .p-speeddial-semi-circle {
+        &.p-speeddial-direction-up {
+            left: calc(50% - 2rem);
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down {
+            left: calc(50% - 2rem);
+            top: 0;
+        }
+
+        &.p-speeddial-direction-left {
+            right: 0;
+            top: calc(50% - 2rem);
+        }
+
+        &.p-speeddial-direction-right {
+            left: 0;
+            top: calc(50% - 2rem);
+        }
+    }
+
+    .p-speeddial-quarter-circle {
+        &.p-speeddial-direction-up-left {
+            right: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-up-right {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down-left {
+            right: 0;
+            top: 0;
+        }
+
+        &.p-speeddial-direction-down-right {
+            left: 0;
+            top: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-tooltip-demo) {
+    .p-speeddial-direction-up {
+        &.speeddial-left {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.speeddial-right {
+            right: 0;
+            bottom: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-delay-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+}
+
+::v-deep(.speeddial-mask-demo) {
+    .p-speeddial-direction-up {
+        right: 0;
+        bottom: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
new file mode 100644
index 000000000..db53b20aa
--- /dev/null
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -0,0 +1,702 @@
+<template>
+    <AppDoc name="SpeedDialDemo" :sources="sources" github="speeddial/SpeedDialDemo.vue">
+        <h5>Import</h5>
+<pre v-code.script><code>
+import SpeedDial from 'primevue/speeddial';
+
+</code></pre>
+
+        <h5>Getting Started</h5>
+        <p>When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the <i>model</i> property.
+        SpeedDial's position is calculated according to the container element with the position type style.</p>
+
+<pre v-code.script><code>
+&lt;SpeedDial :model="items" /&gt;
+
+</code></pre>
+
+<pre v-code.script><code>
+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: () => {
+            window.location.hash = "/fileupload"
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+] 
+</code></pre>
+
+        <h5>MenuModel API</h5>
+        <p>SpeedDial uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+
+        <h5>Type</h5>
+        <p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p>
+
+        <h5>Direction</h5>
+        <p>Specifies the opening direction of actions. For the <strong>linear</strong> and <strong>semi-circle</strong> types; <i>up</i>, <i>down</i>, <i>left</i> and <i>right</i>. For the <strong>quarter-circle</strong> type; <i>up-left</i>, <i>up-right</i>, <i>down-left</i> and <i>down-right</i>.</p>
+
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>MenuModel instance to define the action items.</td>
+                    </tr>
+                    <tr>
+                        <td>visible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies the visibility of the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>direction</td>
+                        <td>string</td>
+                        <td>up</td>
+                        <td>Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'</td>
+                    </tr>
+                    <tr>
+                        <td>transitionDelay</td>
+                        <td>number</td>
+                        <td>30</td>
+                        <td>Transition delay step for each action item.</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>linear</td>
+                        <td>Specifies the opening type of actions.</td>
+                    </tr>
+                    <tr>
+                        <td>radius</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Radius for *circle types.</td>
+                    </tr>
+                    <tr>
+                        <td>mask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show a mask element behind the speeddial</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the component is disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>hideOnClickOutside</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the actions close when clicked outside.</td>
+                    </tr>
+                    <tr>
+                        <td>buttonClassName</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>maskClassName</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>maskStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>showIcon</td>
+                        <td>string</td>
+                        <td>pi pi-plus</td>
+                        <td>Show icon of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>hideIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Hide icon of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>rotateAnimation</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Defined to rotate showIcon when hideIcon is not present.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event.</td>
+                        <td>Fired when the button element clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Fired when the actions are visible.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Fired when the actions are hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Custom template for item</td>
+                    </tr>
+                    <tr>
+                        <td>button</td>
+                        <td>toggle: toggle metadata</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-speeddial</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-button</td>
+                        <td>Button element of speeddial.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-mask</td>
+                        <td>Mask element of speeddial.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-list</td>
+                        <td>List of the actions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-item</td>
+                        <td>Each action item of list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <div class="card">
+            <h5>Linear</h5>
+            <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
+                <SpeedDial :model="items" direction="up" />
+                <SpeedDial :model="items" direction="down" />
+                <SpeedDial :model="items" direction="left" />
+                <SpeedDial :model="items" direction="right" /> 
+            </div>
+        </div>
+
+        <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" hideIcon="pi pi-discord" />
+                <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" />
+            </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" />
+
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+            </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" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Mask</h5>
+            <div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
+                <SpeedDial :model="items" direction="up" mask />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { useToast } from "primevue/usetoast";
+
+export default {
+    setup() {
+        const toast = useToast();
+
+        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: () => {
+                    window.location.hash = "/fileupload"
+                }
+            },
+            {
+                label: 'Vue Website',
+                icon: 'pi pi-external-link',
+                command: () => {
+                    window.location.href = 'https://vuejs.org/'
+                }
+            }
+        ]);
+
+        return { items }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+::v-deep(.speeddial-linear-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+
+    .p-speeddial-direction-down {
+        left: calc(50% - 2rem);
+        top: 0;
+    }
+
+    .p-speeddial-direction-left {
+        right: 0;
+        top: calc(50% - 2rem);
+    }
+
+    .p-speeddial-direction-right {
+        left: 0;
+        top: calc(50% - 2rem);
+    }
+}
+
+::v-deep(.speeddial-circle-demo) {
+    .p-speeddial-circle {
+        top: calc(50% - 2rem);
+        left: calc(50% - 2rem);
+    }
+
+    .p-speeddial-semi-circle {
+        &.p-speeddial-direction-up {
+            left: calc(50% - 2rem);
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down {
+            left: calc(50% - 2rem);
+            top: 0;
+        }
+
+        &.p-speeddial-direction-left {
+            right: 0;
+            top: calc(50% - 2rem);
+        }
+
+        &.p-speeddial-direction-right {
+            left: 0;
+            top: calc(50% - 2rem);
+        }
+    }
+
+    .p-speeddial-quarter-circle {
+        &.p-speeddial-direction-up-left {
+            right: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-up-right {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down-left {
+            right: 0;
+            top: 0;
+        }
+
+        &.p-speeddial-direction-down-right {
+            left: 0;
+            top: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-tooltip-demo) {
+    .p-speeddial-direction-up {
+        &.speeddial-left {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.speeddial-right {
+            right: 0;
+            bottom: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-delay-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+}
+
+::v-deep(.speeddial-mask-demo) {
+    .p-speeddial-direction-up {
+        right: 0;
+        bottom: 0;
+    }
+}
+</style>
+                    `
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+                    <template>
+    <div>
+        <div class="card">
+            <h5>Linear</h5>
+            <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
+                <SpeedDial :model="items" direction="up" />
+                <SpeedDial :model="items" direction="down" />
+                <SpeedDial :model="items" direction="left" />
+                <SpeedDial :model="items" direction="right" /> 
+            </div>
+        </div>
+
+        <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" hideIcon="pi pi-discord" />
+                <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" />
+            </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" />
+
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+            </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" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Mask</h5>
+            <div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
+                <SpeedDial :model="items" direction="up" mask />
+            </div>
+        </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: () => {
+                        window.location.hash = "/fileupload"
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/'
+                    }
+                }
+            ]
+        }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+::v-deep(.speeddial-linear-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+
+    .p-speeddial-direction-down {
+        left: calc(50% - 2rem);
+        top: 0;
+    }
+
+    .p-speeddial-direction-left {
+        right: 0;
+        top: calc(50% - 2rem);
+    }
+
+    .p-speeddial-direction-right {
+        left: 0;
+        top: calc(50% - 2rem);
+    }
+}
+
+::v-deep(.speeddial-circle-demo) {
+    .p-speeddial-circle {
+        top: calc(50% - 2rem);
+        left: calc(50% - 2rem);
+    }
+
+    .p-speeddial-semi-circle {
+        &.p-speeddial-direction-up {
+            left: calc(50% - 2rem);
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down {
+            left: calc(50% - 2rem);
+            top: 0;
+        }
+
+        &.p-speeddial-direction-left {
+            right: 0;
+            top: calc(50% - 2rem);
+        }
+
+        &.p-speeddial-direction-right {
+            left: 0;
+            top: calc(50% - 2rem);
+        }
+    }
+
+    .p-speeddial-quarter-circle {
+        &.p-speeddial-direction-up-left {
+            right: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-up-right {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.p-speeddial-direction-down-left {
+            right: 0;
+            top: 0;
+        }
+
+        &.p-speeddial-direction-down-right {
+            left: 0;
+            top: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-tooltip-demo) {
+    .p-speeddial-direction-up {
+        &.speeddial-left {
+            left: 0;
+            bottom: 0;
+        }
+
+        &.speeddial-right {
+            right: 0;
+            bottom: 0;
+        }
+    }
+}
+
+::v-deep(.speeddial-delay-demo) {
+    .p-speeddial-direction-up {
+        left: calc(50% - 2rem);
+        bottom: 0;
+    }
+}
+
+::v-deep(.speeddial-mask-demo) {
+    .p-speeddial-direction-up {
+        right: 0;
+        bottom: 0;
+    }
+}
+</style>
+`
+                }
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file