From 656e9501d6c3db1e4b34dcf5c0321c5cc7c0f70f 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, 31 Aug 2021 11:32:47 +0300
Subject: [PATCH 01/11] refactor

---
 api-generator/components/image.js           | 2 +-
 api-generator/components/virtualscroller.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index 80c588b4e..b7643278f 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -22,7 +22,7 @@ const ImageSlots = [
     {
         name: "indicator",
         description: "Custom content for the preview indicator"
-    }-
+    }
 ];
 
 module.exports = {
diff --git a/api-generator/components/virtualscroller.js b/api-generator/components/virtualscroller.js
index e454f8b89..75afb734e 100644
--- a/api-generator/components/virtualscroller.js
+++ b/api-generator/components/virtualscroller.js
@@ -110,7 +110,7 @@ const VirtualScrollerSlots = [
     {
         name: "content",
         description: "Custom content for the component"
-    }
+    },
     {
         name: "loader",
         description: "Custom content for the loader items"

From 2495d6099adf753fb1e2b06de99acbd70c7da4da 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, 31 Aug 2021 12:16:23 +0300
Subject: [PATCH 02/11] Fixed #1488 - activeIndex for TabMenu

---
 api-generator/components/tabmenu.js | 26 ++++++++++++++++++++++
 src/components/tabmenu/TabMenu.d.ts |  1 +
 src/components/tabmenu/TabMenu.vue  | 34 ++++++++++++++++++++++++-----
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/tabmenu.js b/api-generator/components/tabmenu.js
index 8ac64f24a..de136a868 100644
--- a/api-generator/components/tabmenu.js
+++ b/api-generator/components/tabmenu.js
@@ -10,6 +10,31 @@ const TabMenuProps = [
         type: "boolean",
         default: "true",
         description: "Defines if active route highlight should match the exact route path."
+    },
+    {
+        name: "activeIndex",
+        type: "number",
+        default: "0",
+        description: "Active index of menuitem."
+    }
+];
+
+const TabMenuEvents = [
+    {
+        name: "tab-change",
+        description: "Callback to invoke when an active tab is changed.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "event.index",
+                type: "number",
+                description: "Index of the selected tab"
+            }
+        ]
     }
 ];
 
@@ -25,6 +50,7 @@ module.exports = {
         name: "TabMenu",
         description: "TabMenu is a navigation component that displays items as tab headers.",
         props: TabMenuProps,
+        events: TabMenuEvents,
         slots: TabMenuSlots
     }
 };
diff --git a/src/components/tabmenu/TabMenu.d.ts b/src/components/tabmenu/TabMenu.d.ts
index 31942d9c7..a33d7aaa5 100755
--- a/src/components/tabmenu/TabMenu.d.ts
+++ b/src/components/tabmenu/TabMenu.d.ts
@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 interface TabMenuProps {
     model?: any[];
     exact?: boolean;
+    activeIndex?: number;
 }
 
 declare class TabMenu {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 340ca35fa..fbc7c4f01 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -5,7 +5,7 @@
                 <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                     <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
                         <template v-if="!$slots.item">
-                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
+                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, i, navigate)" role="presentation" v-ripple>
                                 <span :class="getItemIcon(item)" v-if="item.icon"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
@@ -13,9 +13,9 @@
                         <component v-else :is="$slots.item" :item="item"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
+                <li v-else-if="visible(item)" :class="getItemClass(item, i)" role="tab">
                     <template v-if="!$slots.item">
-                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
+                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
@@ -34,6 +34,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'TabMenu',
+    emits: ['update:activeIndex', 'tab-change'],
     props: {
 		model: {
             type: Array,
@@ -42,9 +43,18 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
         }
     },
     timeout: null,
+    data() {
+        return {
+            d_activeIndex: this.activeIndex
+        }
+    },
     mounted() {
         this.updateInkBar();
     },
@@ -57,10 +67,13 @@ export default {
     watch: {
         $route() {
             this.timeout = setTimeout(() => this.updateInkBar(), 50);
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
         }
     },
     methods: {
-        onItemClick(event, item, navigate) {
+        onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
                 return;
@@ -76,9 +89,20 @@ export default {
             if (item.to && navigate) {
                 navigate(event);
             }
+
+            if (index !== this.d_activeIndex) {
+                this.d_activeIndex = index;
+                this.$emit('update:activeIndex', this.d_activeIndex);
+            }
+
+            this.$emit('tab-change', {
+                originalEvent: event,
+                index: index
+            });
         },
-        getItemClass(item) {
+        getItemClass(item, index) {
             return ['p-tabmenuitem', item.class, {
+                'p-highlight': this.d_activeIndex === index,
                 'p-disabled': this.disabled(item)
             }];
         },

From 132f91f7aa205f4868978502e3d3b1c994e96b22 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, 31 Aug 2021 12:16:43 +0300
Subject: [PATCH 03/11] update tabmenu demo, doc

---
 src/views/tabmenu/TabMenuDemo.vue |  20 ++++
 src/views/tabmenu/TabMenuDoc.vue  | 193 +++++++++++++++++++++++++-----
 2 files changed, 186 insertions(+), 27 deletions(-)

diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 46b1223ec..76032cfbf 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -10,9 +10,21 @@
 
         <div class="content-section implementation">
             <div class="card">
+                <h5>Default</h5>
                 <TabMenu :model="items" />
                 <router-view/>
             </div>
+            
+            <div class="card">
+                <h5>Programmatic</h5>
+                <div class="p-py-2">
+                    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                    <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                    <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                </div>
+
+                <TabMenu :model="items2" v-model:activeIndex="active" />
+            </div>
         </div>
 
         <TabMenuDoc />
@@ -25,12 +37,20 @@ import TabMenuDoc from './TabMenuDoc';
 export default {
     data() {
         return {
+            active: 3,
             items: [
                 {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
                 {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
                 {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
                 {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
                 {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
+            ],
+            items2: [
+                {label: 'Home', icon: 'pi pi-fw pi-home'},
+                {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
+                {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+                {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+                {label: 'Settings', icon: 'pi pi-fw pi-cog'}
             ]
         }
     },
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 6d7b3e5d1..7eaacae45 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -10,9 +10,32 @@ import TabMenu from 'primevue/tabmenu';
         <p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
 		<h5>Getting Started</h5>
-		<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
+		<p>TabMenu requires a collection of menuitems as its model.</p>
 <pre v-code><code>
 &lt;TabMenu :model="items" /&gt;
+
+</code></pre>
+
+<pre v-code.script><code>
+export default {
+	data() {
+		return {
+			items: [
+                {label: 'Home', icon: 'pi pi-fw pi-home'},
+                {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
+                {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+                {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+                {label: 'Settings', icon: 'pi pi-fw pi-cog'}
+            ]
+		}
+	}
+}
+
+</code></pre>
+
+        <p>TabMenu can be also integrated with Vue Router.</p>
+        <pre v-code><code>
+&lt;TabMenu :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
@@ -32,10 +55,24 @@ export default {
 	}
 }
 
+</code></pre>
+
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the activeIndex property that supports one or two-way binding.</p>
+
+<pre v-code><code>
+&lt;TabMenu :model="items" :activeIndex="activeIndex" /&gt;
+
+</code></pre>
+
+        <p>Two-way binding requires v-model.</p>
+<pre v-code><code>
+&lt;TabMenu :model="items" v-model:activeIndex="activeIndex" /&gt;
+
 </code></pre>
 
         <h5>Templating</h5>
-         <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;TabMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
@@ -69,6 +106,34 @@ export default {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Defines if active route highlight should match the exact route path.</td>
+                    </tr>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Active index of menuitem.</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>tab-change</td>
+                        <td>event.originalEvent: Browser event  <br/>
+                            event.index: Index of the selected tab
+                        </td>
+                        <td>Callback to invoke when an active tab is changed.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -146,8 +211,22 @@ export default {
                     content: `
 <template>
     <div>
-        <TabMenu :model="items" />
-        <router-view />
+        <div class="card">
+            <h5>Default</h5>
+            <TabMenu :model="items" />
+            <router-view/>
+        </div>
+            
+        <div class="card">
+            <h5>Programmatic</h5>
+            <div class="p-py-2">
+                <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+            </div>
+
+            <TabMenu :model="items2" v-model:activeIndex="active" />
+        </div>
     </div>
 </template>
 
@@ -155,32 +234,55 @@ export default {
 export default {
     data() {
         return {
+            active: 3,
             items: [
                 {
-                    label: 'Home', 
-                    icon: 'pi pi-fw pi-home', 
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home',
                     to: '/'
                 },
                 {
-                    label: 'Calendar', 
-                    icon: 'pi pi-fw pi-calendar', 
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar',
                     to: '/calendar'
                 },
                 {
-                    label: 'Edit', 
-                    icon: 'pi pi-fw pi-pencil', 
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
                     to: '/edit'
                 },
                 {
-                    label: 'Documentation', 
-                    icon: 'pi pi-fw pi-file', 
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file',
                     to: '/documentation'
                 },
                 {
-                    label: 'Settings', 
-                    icon: 'pi pi-fw pi-cog', 
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
                     to: '/settings'
                 }
+            ],
+            items2: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home'
+                },
+                {
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar'
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil'
+                },
+                {
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                }
             ]
         }
     }
@@ -198,8 +300,22 @@ export default {
                     content: `
 <template>
     <div>
-        <TabMenu :model="items" />
-        <router-view />
+        <div class="card">
+            <h5>Default</h5>
+            <TabMenu :model="items" />
+            <router-view/>
+        </div>
+            
+        <div class="card">
+            <h5>Programmatic</h5>
+            <div class="p-py-2">
+                <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+            </div>
+
+            <TabMenu :model="items2" v-model:activeIndex="active" />
+        </div>
     </div>
 </template>
 
@@ -208,35 +324,58 @@ import { ref } from 'vue';
 
 export default {
     setup() {
+        const active = ref(3);
         const items = ref([
             {
-                label: 'Home', 
-                icon: 'pi pi-fw pi-home', 
+                label: 'Home',
+                icon: 'pi pi-fw pi-home',
                 to: '/'
             },
             {
-                label: 'Calendar', 
-                icon: 'pi pi-fw pi-calendar', 
+                label: 'Calendar',
+                icon: 'pi pi-fw pi-calendar',
                 to: '/calendar'
             },
             {
-                label: 'Edit', 
-                icon: 'pi pi-fw pi-pencil', 
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
                 to: '/edit'
             },
             {
-                label: 'Documentation', 
-                icon: 'pi pi-fw pi-file', 
+                label: 'Documentation',
+                icon: 'pi pi-fw pi-file',
                 to: '/documentation'
             },
             {
-                label: 'Settings', 
-                icon: 'pi pi-fw pi-cog', 
+                label: 'Settings',
+                icon: 'pi pi-fw pi-cog',
                 to: '/settings'
             }
         ]);
+        const items2 = ref([
+            {
+                label: 'Home',
+                icon: 'pi pi-fw pi-home'
+            },
+            {
+                label: 'Calendar',
+                icon: 'pi pi-fw pi-calendar'
+            },
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil'
+            },
+            {
+                label: 'Documentation',
+                icon: 'pi pi-fw pi-file'
+            },
+            {
+                label: 'Settings',
+                icon: 'pi pi-fw pi-cog'
+            }
+        ]);
         
-        return { items }
+        return { active, items, items2 }
     }
 }
 <\\/script>

From f12f8e73a6ced22832c8f785a6751bd1d4d60dd9 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 12:33:15 +0300
Subject: [PATCH 04/11] Fixed #1473 - Alignment issue with multiple frozen
 columns on DataTable

---
 src/components/datatable/BodyCell.vue   | 4 ++--
 src/components/datatable/HeaderCell.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 408c702fa..38da1f558 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -312,7 +312,7 @@ export default {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
                     if (next) {
-                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
                     this.styleObject.right = right + 'px';
                 }
@@ -320,7 +320,7 @@ export default {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
                     if (prev) {
-                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
                     this.styleObject.left = left + 'px';
                 }
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index c15c73f40..4233a6b77 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -156,7 +156,7 @@ export default {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
                     if (next) {
-                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
                     this.styleObject.right = right + 'px';
                 }
@@ -164,7 +164,7 @@ export default {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
                     if (prev) {
-                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
                     this.styleObject.left = left + 'px';
                 }

From c4be23c9af648aacec87099e2b65a4d415efe732 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 12:42:45 +0300
Subject: [PATCH 05/11] Remove IE section from Setup page

---
 src/views/setup/Setup.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 48e60c3d3..bf3a7983b 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -98,7 +98,7 @@ import Dialog from 'primevue/dialog/sfc';
                 },
                 components: {
                     'p-inputtext': primevue.inputtext
-                } 
+                }
             };
 
             createApp(App).mount("#app");
@@ -218,7 +218,7 @@ app.use(PrimeVue, {ripple: true});
 
             <h5>Outlined vs Filled Input Styles</h5>
             <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
-            to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, 
+            to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application,
             use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog
             will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.</p>
 
@@ -269,7 +269,7 @@ app.use(PrimeVue, {
                             <th>
                                 <div class="p-d-flex p-ai-center">
                                     <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem;" class="p-mr-2">
-                                    IE / Edge
+                                    Edge
                                 </div>
                             </th>
                             <th>
@@ -300,7 +300,7 @@ app.use(PrimeVue, {
                     </thead>
                     <tbody>
                         <tr>
-                            <td>IE11, Edge</td>
+                            <td>Edge</td>
                             <td>Last 2 versions</td>
                             <td>Last 2 versions</td>
                             <td>Last 2 versions</td>
@@ -311,4 +311,4 @@ app.use(PrimeVue, {
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>

From be2365bfeff31c98c98c109bf318c6c575ba26b1 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 14:18:37 +0300
Subject: [PATCH 06/11] Fixed #1489 - Add tooltipOptions property to SpeedDial

---
 src/components/speeddial/SpeedDial.d.ts |  1 +
 src/components/speeddial/SpeedDial.vue  |  7 ++++---
 src/components/tooltip/Tooltip.js       | 24 ++++++++++++++++++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/speeddial/SpeedDial.d.ts b/src/components/speeddial/SpeedDial.d.ts
index 2b9fa64f0..1ef430b85 100644
--- a/src/components/speeddial/SpeedDial.d.ts
+++ b/src/components/speeddial/SpeedDial.d.ts
@@ -18,6 +18,7 @@ interface SpeedDialProps {
     rotateAnimation?: boolean;
     class?: string;
     style?: any;
+    tooltipOptions?: any;
 }
 
 declare class SpeedDial {
diff --git a/src/components/speeddial/SpeedDial.vue b/src/components/speeddial/SpeedDial.vue
index d64d9f10e..f2bdb40d0 100644
--- a/src/components/speeddial/SpeedDial.vue
+++ b/src/components/speeddial/SpeedDial.vue
@@ -6,8 +6,8 @@
         <ul :ref="listRef" class="p-speeddial-list" role="menu">
             <li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
                 <template v-if="!$slots.item">
-                    <a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target" 
-                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)" v-ripple>
+                    <a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target"
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" v-ripple>
                         <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
                     </a>
                 </template>
@@ -73,6 +73,7 @@ export default {
             type: Boolean,
             default: true
         },
+        tooltipOptions: null,
         style: null,
         class: null
     },
@@ -375,4 +376,4 @@ export default {
 .p-speeddial-direction-right .p-speeddial-list {
     flex-direction: row;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 5eabdf6cb..8ffa424db 100755
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -241,10 +241,27 @@ function getTarget(el) {
     return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input'): el;
 }
 
+function getModifiers(options) {
+    // modifiers
+    if (options.modifiers && Object.keys(options.modifiers).length) {
+        return options.modifiers;
+    }
+
+    // arg
+    if (options.arg && typeof options.arg === 'object') {
+        return Object.entries(options.arg).reduce((acc, [key, val]) => {
+            if (key === 'event' || key === 'position') acc[val] = true;
+            return acc;
+        }, {});
+    }
+
+    return {};
+}
+
 const Tooltip = {
     beforeMount(el, options) {
         let target = getTarget(el);
-        target.$_ptooltipModifiers = options.modifiers;
+        target.$_ptooltipModifiers = getModifiers(options);
         if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
             target.$_ptooltipDisabled = false;
@@ -271,7 +288,7 @@ const Tooltip = {
     },
     updated(el, options) {
         let target = getTarget(el);
-        target.$_ptooltipModifiers = options.modifiers;
+        target.$_ptooltipModifiers = getModifiers(options);
 
         if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
@@ -281,8 +298,7 @@ const Tooltip = {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled;
         }
-    },
-
+    }
 };
 
 export default Tooltip;

From 003b90c62d8855c81738feb57409940b977c88e4 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 14:20:07 +0300
Subject: [PATCH 07/11] Update SpeedDial doc and demo

---
 src/views/speeddial/SpeedDialDemo.vue |  8 ++++----
 src/views/speeddial/SpeedDialDoc.vue  | 22 ++++++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/views/speeddial/SpeedDialDemo.vue b/src/views/speeddial/SpeedDialDemo.vue
index 884c343a7..6bb1a3aa7 100644
--- a/src/views/speeddial/SpeedDialDemo.vue
+++ b/src/views/speeddial/SpeedDialDemo.vue
@@ -15,7 +15,7 @@
                     <SpeedDial :model="items" direction="up" />
                     <SpeedDial :model="items" direction="down" />
                     <SpeedDial :model="items" direction="left" />
-                    <SpeedDial :model="items" direction="right" /> 
+                    <SpeedDial :model="items" direction="right" />
                 </div>
             </div>
 
@@ -37,9 +37,9 @@
             <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-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
                 </div>
             </div>
 
@@ -214,4 +214,4 @@ export default {
         bottom: 0;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index f19c1d4d1..b1cd40920 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -52,7 +52,7 @@ items: [
             window.location.href = 'https://vuejs.org/'
         }
     }
-] 
+]
 </code></pre>
 
         <h5>MenuModel API</h5>
@@ -179,6 +179,12 @@ items: [
                         <td>null</td>
                         <td>Inline style of the element.</td>
                     </tr>
+                    <tr>
+                        <td>tooltipOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -291,7 +297,7 @@ export default {
                 <SpeedDial :model="items" direction="up" />
                 <SpeedDial :model="items" direction="down" />
                 <SpeedDial :model="items" direction="left" />
-                <SpeedDial :model="items" direction="right" /> 
+                <SpeedDial :model="items" direction="right" />
             </div>
         </div>
 
@@ -313,9 +319,9 @@ export default {
         <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-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
@@ -502,7 +508,7 @@ export default {
                 <SpeedDial :model="items" direction="up" />
                 <SpeedDial :model="items" direction="down" />
                 <SpeedDial :model="items" direction="left" />
-                <SpeedDial :model="items" direction="right" /> 
+                <SpeedDial :model="items" direction="right" />
             </div>
         </div>
 
@@ -524,9 +530,9 @@ export default {
         <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-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
@@ -701,4 +707,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>

From a89c51bc71d06525629a1d0b4d7161158f71b113 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 14:20:10 +0300
Subject: [PATCH 08/11] Update speeddial.js

---
 api-generator/components/speeddial.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/speeddial.js b/api-generator/components/speeddial.js
index ffa68dbdf..21b21112f 100644
--- a/api-generator/components/speeddial.js
+++ b/api-generator/components/speeddial.js
@@ -100,6 +100,12 @@ const SpeedDialProps = [
         type: "any",
         default: "null",
         description: "Style class of the element."
+    },
+    {
+        name: "tooltipOptions",
+        type: "object",
+        default: "null",
+        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'."
     }
 ];
 
@@ -144,4 +150,4 @@ module.exports = {
         events: SpeedDialEvents,
         slots: SpeedDialSlots
     }
-}
\ No newline at end of file
+}

From aeba88374bd23a7016e47f838a040f5e6c61c7f9 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 14:28:46 +0300
Subject: [PATCH 09/11] Fixed #1490 - Add tooltipOptions property to Dock

---
 src/components/dock/Dock.d.ts   | 1 +
 src/components/dock/Dock.vue    | 3 ++-
 src/components/dock/DockSub.vue | 7 ++++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index 908876ca6..9ea7619bd 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -6,6 +6,7 @@ interface DockProps {
     class?: string;
     style?: any;
     exact?: boolean;
+    tooltipOptions?: any;
 }
 
 declare class Dock {
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index eaf85871a..29a96a110 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :template="$slots.item" :exact="exact"></DockSub>
+        <DockSub :model="model" :template="$slots.item" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
     </div>
 </template>
 
@@ -17,6 +17,7 @@ export default {
         model: null,
         class: null,
         style: null,
+        tooltipOptions: null,
         exact: {
             type: Boolean,
             default: true
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 2067794b4..8fe03717f 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -5,7 +5,7 @@
                 <template v-if="!template">
                     <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
-                            :data-pr-tooltip="item.label" @click="onItemClick($event, item, navigate)">
+                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
                             <template v-if="typeof item.icon === 'string'">
                                 <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                             </template>
@@ -13,7 +13,7 @@
                         </a>
                     </router-link>
                     <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
@@ -41,7 +41,8 @@ export default {
         exact: {
             type: Boolean,
             default: true
-        }
+        },
+        tooltipOptions: null
     },
     data() {
         return {

From 76cc027504c1462353a32b00244cb9fdcff10bf5 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 14:29:01 +0300
Subject: [PATCH 10/11] Update Dock doc and api-gen

---
 api-generator/components/dock.js |  8 +++++++-
 src/views/dock/DockDoc.vue       | 14 ++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 7fd3997a2..3920dba71 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -28,6 +28,12 @@ const DockProps = [
         type: "boolean",
         default: "true",
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: "tooltipOptions",
+        type: "object",
+        default: "null",
+        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'."
     }
 ];
 
@@ -45,4 +51,4 @@ module.exports = {
         props: DockProps,
         slots: DockSlots
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index 2878d907e..5fc5988b8 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -89,6 +89,12 @@ import Dock from 'primevue/dock';
                     <td>true</td>
                     <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                 </tr>
+                <tr>
+                    <td>tooltipOptions</td>
+                    <td>object</td>
+                    <td>null</td>
+                    <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                </tr>
             </tbody>
         </table>
     </div>
@@ -201,7 +207,7 @@ export default {
                     :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png' :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>    
+                    </template>
                 </Galleria>
             </div>
         </div>
@@ -584,7 +590,7 @@ export default {
                     :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>    
+                    </template>
                 </Galleria>
             </div>
         </div>
@@ -946,11 +952,11 @@ export default {
         }
     }
 }
-</style>                    
+</style>
 `
                 }
             }
         }
     }
 }
-</script>
\ No newline at end of file
+</script>

From fb256ed938ec9d621de405607d3c87b709fe95ea Mon Sep 17 00:00:00 2001
From: Burtchen <Burtchen@web.de>
Date: Tue, 31 Aug 2021 13:39:15 +0200
Subject: [PATCH 11/11] Update SeatDemo.vue (#1409)

vagon => wagon
---
 src/views/steps/SeatDemo.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 3d7573d7e..30e0cdb13 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -11,11 +11,11 @@
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
                         <label for="class">Class</label>
-                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
+                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </div>
                     <div class="p-field p-col-12 p-md-6">
                         <label for="lastname">Wagon</label>
-                        <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
+                        <Dropdown inputId="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
                     </div>
                     <div class="p-field p-col-12">
                         <label for="seat">Seat</label>
@@ -43,24 +43,24 @@ export default {
                 {name: 'Second Class', code: 'B', factor: 2},
                 {name: 'Third Class', code: 'C', factor: 3}
             ],
-            vagons: [],
-            selectedVagon: '',
+            wagons: [],
+            selectedWagon: '',
             seats: [],
             selectedSeat: ''
         }
     },
     methods: {
-        setVagons(event) {
+        setWagons(event) {
             if (this.selectedClass && event.value) {
-                this.vagons = [];
+                this.wagons = [];
                 this.seats = [];
                 for (let i = 1; i < 3 * event.value.factor; i++) {
-                    this.vagons.push({vagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
+                    this.wagons.push({wagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
                 }
             }
         },
         setSeats(event) {
-            if (this.selectedVagon && event.value) {
+            if (this.selectedWagon && event.value) {
                 this.seats = [];
                 for (let i = 1; i < 10 * event.value.factor; i++) {
                     this.seats.push({seat: i, type: event.value.type});
@@ -68,11 +68,11 @@ export default {
             }
         },
         nextPage() {
-            this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+            this.$emit('next-page', {formData: {class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat}, pageIndex: 1});
         },
         prevPage() {
             this.$emit('prev-page', {pageIndex: 1});
         }
     }
 }
-</script>
\ No newline at end of file
+</script>