From a6af4902759ed492e2e646df8b53cafe8c99706e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 9 Apr 2024 14:24:32 +0300
Subject: [PATCH] SpeedDial template demo updated

---
 doc/common/apidoc/index.json  | 117 ++++++----------
 doc/speeddial/CustomDoc.vue   | 175 -----------------------
 doc/speeddial/TemplateDoc.vue | 252 ++++++++++++++++++++++++++++++++++
 pages/speeddial/index.vue     |   4 +-
 4 files changed, 293 insertions(+), 255 deletions(-)
 delete mode 100644 doc/speeddial/CustomDoc.vue
 create mode 100644 doc/speeddial/TemplateDoc.vue

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index ba7a154af..fef835079 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -7513,7 +7513,7 @@
                             "name": "previousButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the previous button's DOM element."
                         },
@@ -7553,9 +7553,9 @@
                             "name": "nextButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the previous button's DOM element."
+                            "description": "Used to pass attributes to the next button's DOM element."
                         },
                         {
                             "name": "container",
@@ -8273,14 +8273,6 @@
                             "default": "date",
                             "description": "Type of view to display."
                         },
-                        {
-                            "name": "touchUI",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "boolean",
-                            "default": "false",
-                            "description": "When enabled, calendar overlay is displayed as optimized for touch devices."
-                        },
                         {
                             "name": "monthNavigator",
                             "optional": true,
@@ -8596,6 +8588,22 @@
                             "default": "",
                             "description": "Used to pass all properties of the ButtonProps to the clear button component."
                         },
+                        {
+                            "name": "navigatorButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the navigator button component."
+                        },
+                        {
+                            "name": "timepickerButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the timepicker button component."
+                        },
                         {
                             "name": "ariaLabelledby",
                             "optional": true,
@@ -45636,22 +45644,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
-                        {
-                            "name": "cancelItem",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "RatingPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the cancel item's DOM element."
-                        },
-                        {
-                            "name": "cancelIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "RatingPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the cancel icon's DOM element."
-                        },
                         {
                             "name": "item",
                             "optional": true,
@@ -45676,22 +45668,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the off icon's DOM element."
                         },
-                        {
-                            "name": "hiddenCancelInputWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "RatingPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the hidden cancel inputW wapper's DOM element."
-                        },
-                        {
-                            "name": "hiddenCancelInput",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "RatingPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the hidden cancel input's DOM element."
-                        },
                         {
                             "name": "hiddenItemInputWrapper",
                             "optional": true,
@@ -45845,15 +45821,6 @@
                             "default": "5",
                             "description": "Number of stars."
                         },
-                        {
-                            "name": "cancel",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "boolean",
-                            "default": "false",
-                            "description": "When specified a cancel icon is displayed to allow clearing the value.",
-                            "deprecated": "since v4.0.0-beta.1"
-                        },
                         {
                             "name": "onIcon",
                             "optional": true,
@@ -45872,15 +45839,6 @@
                             "description": "Icon for the off state.",
                             "deprecated": "since v3.27.0. Use 'officon' slot."
                         },
-                        {
-                            "name": "cancelIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Icon for the cancelable state.",
-                            "deprecated": "since v3.27.0. Use 'cancelicon' slot."
-                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -45921,19 +45879,6 @@
                     "relatedProp": "",
                     "props": [],
                     "methods": [
-                        {
-                            "name": "cancelicon",
-                            "parameters": [
-                                {
-                                    "name": "scope",
-                                    "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon.</span>\n }",
-                                    "description": "cancelicon slot's params."
-                                }
-                            ],
-                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom cancel icon template."
-                        },
                         {
                             "name": "onicon",
                             "parameters": [
@@ -48831,9 +48776,9 @@
                             "name": "action",
                             "optional": true,
                             "readonly": false,
-                            "type": "SpeedDialPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the action's DOM element."
+                            "description": "Used to pass attributes to the action's Button component."
                         },
                         {
                             "name": "actionIcon",
@@ -49124,6 +49069,22 @@
                             "default": "",
                             "description": "Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
                         },
+                        {
+                            "name": "buttonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the button component."
+                        },
+                        {
+                            "name": "actionButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the item component."
+                        },
                         {
                             "name": "ariaLabel",
                             "optional": true,
@@ -49186,7 +49147,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n}",
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -49199,7 +49160,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">visible</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Visible state of the item</span>\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
                                     "description": "button slot's params."
                                 }
                             ],
diff --git a/doc/speeddial/CustomDoc.vue b/doc/speeddial/CustomDoc.vue
deleted file mode 100644
index 0502de748..000000000
--- a/doc/speeddial/CustomDoc.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SpeedDial sample with an outlined button, custom icons and <i>transitionDelay</i>.</p>
-    </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" :style="{ position: 'absolute' }" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</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/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<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" :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/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<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" :style="{ position: 'absolute' }" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-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/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/speeddial/TemplateDoc.vue b/doc/speeddial/TemplateDoc.vue
new file mode 100644
index 000000000..bfddeba86
--- /dev/null
+++ b/doc/speeddial/TemplateDoc.vue
@@ -0,0 +1,252 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            SpeedDial offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The button has its own <i>button</i> template, additional slot named <i>icon</i> is provided to embed
+            icon content for default button.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border-2" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                fill="var(--p-primary-color)"
+                            />
+                            <path
+                                d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                fill="var(--text-color)"
+                            />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</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: 'Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+    <template #button="{ toggleCallback }">
+        <Button outlined class="border-2" @click="toggleCallback">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="..." fill="var(--p-primary-color)" />
+                <path d="..." fill="var(--text-color)" />
+            </svg>
+        </Button>
+    </template>
+    <template #item="{ item, toggleCallback }">
+        <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+            <span :class="item.icon" />
+            <span>
+                {{ item.label }}
+            </span>
+        </div>
+    </template>
+</SpeedDial>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border-2" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="..." fill="var(--p-primary-color)" />
+                            <path d="..." fill="var(--text-color)" />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+        <Toast />
+    </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/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border-2" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="..." fill="var(--p-primary-color)" />
+                            <path d="..." fill="var(--text-color)" />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+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/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/speeddial/index.vue b/pages/speeddial/index.vue
index 4e7380f45..df50b9c3b 100644
--- a/pages/speeddial/index.vue
+++ b/pages/speeddial/index.vue
@@ -13,12 +13,12 @@
 <script>
 import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
 import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
-import CustomDoc from '@/doc/speeddial/CustomDoc.vue';
 import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
 import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
 import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
 import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
 import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
+import TemplateDoc from '@/doc/speeddial/TemplateDoc.vue';
 import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
 import PTComponent from '@/doc/speeddial/pt/index.vue';
 import ThemingDoc from '@/doc/speeddial/theming/index.vue';
@@ -34,7 +34,7 @@ export default {
                 { id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
                 { id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
                 { id: 'mask', label: 'Mask', component: MaskDoc },
-                { id: 'custom', label: 'Custom', component: CustomDoc },
+                { id: 'template', label: 'Template', component: TemplateDoc },
                 { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
             ],
             ptComponent: PTComponent,