diff --git a/components/accordion/Accordion.d.ts b/components/accordion/Accordion.d.ts
index f70354ce2..640efc584 100755
--- a/components/accordion/Accordion.d.ts
+++ b/components/accordion/Accordion.d.ts
@@ -16,7 +16,12 @@ export interface AccordionTabOpenEvent {
 /**
  * @extends {AccordionTabOpenEvent}
  */
-export interface AccordionTabCloseEvent extends AccordionTabOpenEvent { }
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * @extends AccordionTabOpenEvent
+ */
+export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
 export interface AccordionProps {
     /**
@@ -39,6 +44,14 @@ export interface AccordionProps {
      * Icon of an expanded tab.
      */
     collapseIcon?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     */
+    selectOnFocus?: boolean | undefined;
 }
 
 export interface AccordionSlots {
@@ -64,13 +77,18 @@ export declare type AccordionEmits = {
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
      */
     'tab-close': (event: AccordionTabCloseEvent) => void;
-}
+    /**
+     * Callback to invoke when an active tab is clicked.
+     * @param {AccordionClickEvent} event - Custom tab click event.
+     */
+    'tab-click': (event: AccordionClickEvent) => void;
+};
 
-declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> { }
+declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Accordion: GlobalComponentConstructor<Accordion>
+        Accordion: GlobalComponentConstructor<Accordion>;
     }
 }
 
@@ -84,7 +102,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
+ * - [Accordion](https://www.primefaces.org/primevue/accordion)
  *
  */
 export default Accordion;
diff --git a/components/accordion/Accordion.spec.js b/components/accordion/Accordion.spec.js
index cc5ecac18..398f41fbe 100644
--- a/components/accordion/Accordion.spec.js
+++ b/components/accordion/Accordion.spec.js
@@ -4,7 +4,7 @@ import AccordionTab from '@/components/accordiontab/AccordionTab.vue';
 
 describe('Accordion.vue', () => {
     let wrapper;
-    
+
     beforeEach(() => {
         wrapper = mount(Accordion, {
             global: {
@@ -39,7 +39,7 @@ describe('Accordion.vue', () => {
         expect(wrapper.findAll('.p-accordion-tab').length).toBe(3);
     });
 
-    it('should activeIndex change', async() => {
+    it('should activeIndex change', async () => {
         await wrapper.setProps({ activeIndex: 1 });
 
         const allTabs = wrapper.findAll('.p-accordion-tab');
@@ -47,4 +47,4 @@ describe('Accordion.vue', () => {
         expect(allTabs[0].classes()).not.toContain('p-accordion-tab-active');
         expect(allTabs[1].classes()).toContain('p-accordion-tab-active');
     });
-});
\ No newline at end of file
+});
diff --git a/components/accordion/Accordion.vue b/components/accordion/Accordion.vue
index 19f6d97a1..9d96e3d72 100755
--- a/components/accordion/Accordion.vue
+++ b/components/accordion/Accordion.vue
@@ -1,17 +1,35 @@
 <template>
     <div class="p-accordion p-component">
-        <div v-for="(tab,i) of tabs" :key="getKey(tab,i)" :class="getTabClass(i)">
-            <div :class="getTabHeaderClass(tab, i)">
-                <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
-                    :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
-                    <span :class="isTabActive(i) ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></span>
-                    <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
+                <a
+                    :id="getTabHeaderActionId(i)"
+                    class="p-accordion-header-link p-accordion-header-action"
+                    :tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
+                    role="button"
+                    :aria-disabled="getTabProp(tab, 'disabled')"
+                    :aria-expanded="isTabActive(i)"
+                    :aria-controls="getTabContentId(i)"
+                    @click="onTabClick($event, tab, i)"
+                    @keydown="onTabKeyDown($event, tab, i)"
+                    v-bind="getTabProp(tab, 'headerActionProps')"
+                >
+                    <span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
+                    <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
             <transition name="p-toggleable-content">
-                <div class="p-toggleable-content" v-if="lazy ? isTabActive(i) : true" v-show="lazy ? true: isTabActive(i)"
-                    role="region" :id="getTabAriaId(i) + '_content'" :aria-labelledby="getTabAriaId(i) + '_header'">
+                <div
+                    v-if="lazy ? isTabActive(i) : true"
+                    v-show="lazy ? true : isTabActive(i)"
+                    :id="getTabContentId(i)"
+                    :style="getTabProp(tab, 'contentStyle')"
+                    :class="getTabContentClass(tab)"
+                    role="region"
+                    :aria-labelledby="getTabHeaderActionId(i)"
+                    v-bind="getTabProp(tab, 'contentProps')"
+                >
                     <div class="p-accordion-content">
                         <component :is="tab"></component>
                     </div>
@@ -22,18 +40,19 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Accordion',
-    emits: ['tab-close', 'tab-open', 'update:activeIndex'],
+    emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
             type: Boolean,
             default: false
         },
         activeIndex: {
-            type: [Number,Array],
+            type: [Number, Array],
             default: null
         },
         lazy: {
@@ -47,12 +66,20 @@ export default {
         collapseIcon: {
             type: String,
             default: 'pi-chevron-down'
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
             d_activeIndex: this.activeIndex
-        }
+        };
     },
     watch: {
         activeIndex(newValue) {
@@ -60,97 +87,187 @@ export default {
         }
     },
     methods: {
-        onTabClick(event, tab, i) {
-            if (!this.isTabDisabled(tab)) {
-                const active = this.isTabActive(i);
+        isAccordionTab(child) {
+            return child.type.name === 'AccordionTab';
+        },
+        isTabActive(index) {
+            return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
+        },
+        getTabProp(tab, name) {
+            return tab.props ? tab.props[name] : undefined;
+        },
+        getKey(tab, index) {
+            return this.getTabProp(tab, 'header') || index;
+        },
+        getTabHeaderActionId(index) {
+            return `${this.id}_${index}_header_action`;
+        },
+        getTabContentId(index) {
+            return `${this.id}_${index}_content`;
+        },
+        onTabClick(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+            this.$emit('tab-click', { originalEvent: event, index });
+        },
+        onTabKeyDown(event, tab, index) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onTabArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onTabArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    this.onTabHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onTabEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onTabEnterKey(event, tab, index);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onTabArrowDownKey(event) {
+            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement);
+
+            nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
+            event.preventDefault();
+        },
+        onTabArrowUpKey(event) {
+            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement);
+
+            prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
+            event.preventDefault();
+        },
+        onTabHomeKey(event) {
+            const firstHeaderAction = this.findFirstHeaderAction();
+
+            this.changeFocusedTab(event, firstHeaderAction);
+            event.preventDefault();
+        },
+        onTabEndKey(event) {
+            const lastHeaderAction = this.findLastHeaderAction();
+
+            this.changeFocusedTab(event, lastHeaderAction);
+            event.preventDefault();
+        },
+        onTabEnterKey(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+
+            event.preventDefault();
+        },
+        findNextHeaderAction(tabElement, selfCheck = false) {
+            const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+            const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+        },
+        findPrevHeaderAction(tabElement, selfCheck = false) {
+            const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+            const headerElement = DomHandler.findSingle(prevTabElement, '.p-accordion-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+        },
+        findFirstHeaderAction() {
+            return this.findNextHeaderAction(this.$el.firstElementChild, true);
+        },
+        findLastHeaderAction() {
+            return this.findPrevHeaderAction(this.$el.lastElementChild, true);
+        },
+        changeActiveIndex(event, tab, index) {
+            if (!this.getTabProp(tab, 'disabled')) {
+                const active = this.isTabActive(index);
                 const eventName = active ? 'tab-close' : 'tab-open';
 
                 if (this.multiple) {
                     if (active) {
-                        this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
+                        this.d_activeIndex = this.d_activeIndex.filter((i) => i !== index);
+                    } else {
+                        if (this.d_activeIndex) this.d_activeIndex.push(index);
+                        else this.d_activeIndex = [index];
                     }
-                    else {
-                        if (this.d_activeIndex)
-                            this.d_activeIndex.push(i);
-                        else
-                            this.d_activeIndex = [i];
-                    }
-                }
-                else {
-                    this.d_activeIndex = this.d_activeIndex === i ? null : i;
+                } else {
+                    this.d_activeIndex = this.d_activeIndex === index ? null : index;
                 }
 
                 this.$emit('update:activeIndex', this.d_activeIndex);
+                this.$emit(eventName, { originalEvent: event, index });
+            }
+        },
+        changeFocusedTab(event, element) {
+            if (element) {
+                DomHandler.focus(element);
 
-                this.$emit(eventName, {
-                    originalEvent: event,
-                    index: i
-                });
+                if (this.selectOnFocus) {
+                    const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
+                    const tab = this.tabs[index];
+
+                    this.changeActiveIndex(event, tab, index);
+                }
             }
         },
-        onTabKeydown(event, tab, i) {
-            if (event.which === 13) {
-                this.onTabClick(event, tab, i);
-            }
-        },
-        isTabActive(index) {
-            if (this.multiple)
-                return this.d_activeIndex && this.d_activeIndex.includes(index);
-            else
-                return index === this.d_activeIndex;
-        },
-        getKey(tab, i) {
-            return (tab.props && tab.props.header) ? tab.props.header : i;
-        },
-        isTabDisabled(tab) {
-            return tab.props && tab.props.disabled;
-        },
         getTabClass(i) {
-            return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
+            return [
+                'p-accordion-tab',
+                {
+                    'p-accordion-tab-active': this.isTabActive(i)
+                }
+            ];
         },
         getTabHeaderClass(tab, i) {
-            return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
+            return [
+                'p-accordion-header',
+                this.getTabProp(tab, 'headerClass'),
+                {
+                    'p-highlight': this.isTabActive(i),
+                    'p-disabled': this.getTabProp(tab, 'disabled')
+                }
+            ];
         },
-        getTabAriaId(i) {
-            return this.ariaId + '_' + i;
+        getTabHeaderIconClass(i) {
+            return ['p-accordion-toggle-icon pi', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
         },
-        getHeaderCollapseIcon() {
-            return ['p-accordion-toggle-icon pi', this.collapseIcon];
-        },
-        getHeaderExpandIcon() {
-            return ['p-accordion-toggle-icon pi', this.expandIcon];
-        },
-        isAccordionTab(child) {
-            return child.type.name === 'AccordionTab';
+        getTabContentClass(tab) {
+            return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
     },
     computed: {
         tabs() {
-            const tabs = []
-            this.$slots.default().forEach(child => {
-                    if (this.isAccordionTab(child)) {
-                        tabs.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isAccordionTab(nestedChild)) {
-                                tabs.push(nestedChild)
-                            }
-                        });
-                    }
+            return this.$slots.default().reduce((tabs, child) => {
+                if (this.isAccordionTab(child)) {
+                    tabs.push(child);
+                } else if (child.children && child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isAccordionTab(nestedChild)) {
+                            tabs.push(nestedChild);
+                        }
+                    });
                 }
-            )
-            return tabs;
+
+                return tabs;
+            }, []);
         },
-        ariaId() {
-            return UniqueComponentId();
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
+    },
+    directives: {
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
-.p-accordion-header-link {
+.p-accordion-header-action {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -159,7 +276,7 @@ export default {
     text-decoration: none;
 }
 
-.p-accordion-header-link:focus {
+.p-accordion-header-action:focus {
     z-index: 1;
 }
 
diff --git a/components/accordiontab/AccordionTab.d.ts b/components/accordiontab/AccordionTab.d.ts
index aee6fb00d..3d12543a4 100755
--- a/components/accordiontab/AccordionTab.d.ts
+++ b/components/accordiontab/AccordionTab.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface AccordionTabProps {
@@ -6,6 +6,34 @@ export interface AccordionTabProps {
      * Orientation of tab headers.
      */
     header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     */
+    headerClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab header.
+     */
+    headerProps?: HTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     */
+    contentClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab content.
+     */
+    contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      */
@@ -23,13 +51,13 @@ export interface AccordionTabSlots {
     header: () => VNode[];
 }
 
-export declare type AccordionTabEmits = { }
+export declare type AccordionTabEmits = {};
 
-declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> { }
+declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        AccordionTab: GlobalComponentConstructor<AccordionTab>
+        AccordionTab: GlobalComponentConstructor<AccordionTab>;
     }
 }
 
@@ -39,7 +67,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
+ * - [Accordion](https://www.primefaces.org/primevue/accordion)
  *
  */
 export default AccordionTab;
diff --git a/components/accordiontab/AccordionTab.spec.js b/components/accordiontab/AccordionTab.spec.js
index 65f46426e..48eaa0c9a 100644
--- a/components/accordiontab/AccordionTab.spec.js
+++ b/components/accordiontab/AccordionTab.spec.js
@@ -11,4 +11,4 @@ describe('AccordionTab.vue', () => {
 
         expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do');
     });
-});
\ No newline at end of file
+});
diff --git a/components/accordiontab/AccordionTab.vue b/components/accordiontab/AccordionTab.vue
index 6bcdfa7ed..1811ef8a4 100755
--- a/components/accordiontab/AccordionTab.vue
+++ b/components/accordiontab/AccordionTab.vue
@@ -7,7 +7,14 @@ export default {
     name: 'AccordionTab',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
-}
+};
 </script>
diff --git a/components/api/Api.d.ts b/components/api/Api.d.ts
index d18751bf1..bd03e72a5 100644
--- a/components/api/Api.d.ts
+++ b/components/api/Api.d.ts
@@ -144,7 +144,7 @@ export interface PrimeIconsOptions {
     readonly ENVELOPE: string;
     readonly EURO: string;
     readonly EXCLAMATION_CIRCLE: string;
-    readonly EXCLAMATION_TRIANGLE : string;
+    readonly EXCLAMATION_TRIANGLE: string;
     readonly EXTERNAL_LINK: string;
     readonly EYE: string;
     readonly EYE_SLASH: string;
diff --git a/components/api/Api.js b/components/api/Api.js
index 355321fe0..61b5b7470 100644
--- a/components/api/Api.js
+++ b/components/api/Api.js
@@ -4,4 +4,4 @@ import FilterService from './FilterService';
 import PrimeIcons from './PrimeIcons';
 import ToastSeverity from './ToastSeverity';
 
-export {FilterMatchMode,FilterOperator,FilterService,PrimeIcons,ToastSeverity};
\ No newline at end of file
+export { FilterMatchMode, FilterOperator, FilterService, PrimeIcons, ToastSeverity };
diff --git a/components/api/FilterMatchMode.js b/components/api/FilterMatchMode.js
index 4ff43bcde..93f55195d 100644
--- a/components/api/FilterMatchMode.js
+++ b/components/api/FilterMatchMode.js
@@ -1,20 +1,20 @@
 const FilterMatchMode = {
-    STARTS_WITH : 'startsWith',
-    CONTAINS : 'contains',
-    NOT_CONTAINS : 'notContains',
-    ENDS_WITH : 'endsWith',
-    EQUALS : 'equals',
-    NOT_EQUALS : 'notEquals',
-    IN : 'in',
-    LESS_THAN : 'lt',
-    LESS_THAN_OR_EQUAL_TO : 'lte',
-    GREATER_THAN : 'gt',
-    GREATER_THAN_OR_EQUAL_TO : 'gte',
-    BETWEEN : 'between',
-    DATE_IS : 'dateIs',
-    DATE_IS_NOT : 'dateIsNot',
-    DATE_BEFORE : 'dateBefore',
-    DATE_AFTER : 'dateAfter'
-}
+    STARTS_WITH: 'startsWith',
+    CONTAINS: 'contains',
+    NOT_CONTAINS: 'notContains',
+    ENDS_WITH: 'endsWith',
+    EQUALS: 'equals',
+    NOT_EQUALS: 'notEquals',
+    IN: 'in',
+    LESS_THAN: 'lt',
+    LESS_THAN_OR_EQUAL_TO: 'lte',
+    GREATER_THAN: 'gt',
+    GREATER_THAN_OR_EQUAL_TO: 'gte',
+    BETWEEN: 'between',
+    DATE_IS: 'dateIs',
+    DATE_IS_NOT: 'dateIsNot',
+    DATE_BEFORE: 'dateBefore',
+    DATE_AFTER: 'dateAfter'
+};
 
-export default FilterMatchMode;
\ No newline at end of file
+export default FilterMatchMode;
diff --git a/components/api/FilterOperator.js b/components/api/FilterOperator.js
index 76adf7d64..d0abe2106 100644
--- a/components/api/FilterOperator.js
+++ b/components/api/FilterOperator.js
@@ -1,6 +1,6 @@
 const FilterOperator = {
     AND: 'and',
     OR: 'or'
-}
+};
 
-export default FilterOperator;
\ No newline at end of file
+export default FilterOperator;
diff --git a/components/api/FilterService.js b/components/api/FilterService.js
index 39c8d149e..8185a41f4 100644
--- a/components/api/FilterService.js
+++ b/components/api/FilterService.js
@@ -1,4 +1,4 @@
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 const FilterService = {
     filter(value, fields, filterValue, filterMatchMode, filterLocale) {
@@ -20,178 +20,164 @@ const FilterService = {
         return filteredItems;
     },
     filters: {
-        startsWith(value, filter, filterLocale)  {
+        startsWith(value, filter, filterLocale) {
             if (filter === undefined || filter === null || filter.trim() === '') {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
+
             let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
             let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-    
+
             return stringValue.slice(0, filterValue.length) === filterValue;
         },
         contains(value, filter, filterLocale) {
             if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
+
             let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
             let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-    
+
             return stringValue.indexOf(filterValue) !== -1;
         },
         notContains(value, filter, filterLocale) {
             if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
+
             let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
             let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-    
+
             return stringValue.indexOf(filterValue) === -1;
         },
         endsWith(value, filter, filterLocale) {
             if (filter === undefined || filter === null || filter.trim() === '') {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
+
             let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
             let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-    
+
             return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
         },
         equals(value, filter, filterLocale) {
             if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() === filter.getTime();
-            else
-                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+
+            if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();
+            else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
         },
         notEquals(value, filter, filterLocale) {
             if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
                 return false;
             }
-    
+
             if (value === undefined || value === null) {
                 return true;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() !== filter.getTime();
-            else
-                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+
+            if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();
+            else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
         },
         in(value, filter) {
             if (filter === undefined || filter === null || filter.length === 0) {
                 return true;
             }
-    
+
             for (let i = 0; i < filter.length; i++) {
                 if (ObjectUtils.equals(value, filter[i])) {
                     return true;
                 }
             }
-    
+
             return false;
         },
         between(value, filter) {
             if (filter == null || filter[0] == null || filter[1] == null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime)
-            return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
-            else
-                return filter[0] <= value && value <= filter[1];
+
+            if (value.getTime) return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
+            else return filter[0] <= value && value <= filter[1];
         },
         lt(value, filter) {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() < filter.getTime();
-            else
-                return value < filter;
+
+            if (value.getTime && filter.getTime) return value.getTime() < filter.getTime();
+            else return value < filter;
         },
         lte(value, filter) {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() <= filter.getTime();
-            else
-                return value <= filter;
+
+            if (value.getTime && filter.getTime) return value.getTime() <= filter.getTime();
+            else return value <= filter;
         },
         gt(value, filter) {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() > filter.getTime();
-            else
-                return value > filter;
+
+            if (value.getTime && filter.getTime) return value.getTime() > filter.getTime();
+            else return value > filter;
         },
         gte(value, filter) {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
-    
-            if (value.getTime && filter.getTime)
-                return value.getTime() >= filter.getTime();
-            else
-                return value >= filter;
+
+            if (value.getTime && filter.getTime) return value.getTime() >= filter.getTime();
+            else return value >= filter;
         },
         dateIs(value, filter) {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
@@ -202,7 +188,7 @@ const FilterService = {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
@@ -213,7 +199,7 @@ const FilterService = {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
@@ -224,7 +210,7 @@ const FilterService = {
             if (filter === undefined || filter === null) {
                 return true;
             }
-    
+
             if (value === undefined || value === null) {
                 return false;
             }
@@ -235,6 +221,6 @@ const FilterService = {
     register(rule, fn) {
         this.filters[rule] = fn;
     }
-}
+};
 
-export default FilterService;
\ No newline at end of file
+export default FilterService;
diff --git a/components/api/PrimeIcons.js b/components/api/PrimeIcons.js
index 81e9af626..c469fac98 100644
--- a/components/api/PrimeIcons.js
+++ b/components/api/PrimeIcons.js
@@ -1,240 +1,240 @@
 const PrimeIcons = {
-    ALIGN_CENTER:'pi pi-align-center',
-    ALIGN_JUSTIFY:'pi pi-align-justify',
-    ALIGN_LEFT:'pi pi-align-left',
-    ALIGN_RIGHT:'pi pi-align-right',
-    AMAZON:'pi pi-amazon',
-    ANDROID:'pi pi-android',
-    ANGLE_DOUBLE_DOWN:'pi pi-angle-double-down',
-    ANGLE_DOUBLE_LEFT:'pi pi-angle-double-left',
-    ANGLE_DOUBLE_RIGHT:'pi pi-angle-double-right',
-    ANGLE_DOUBLE_UP:'pi pi-angle-double-up',
-    ANGLE_DOWN:'pi pi-angle-down',
-    ANGLE_LEFT:'pi pi-angle-left',
-    ANGLE_RIGHT:'pi pi-angle-right',
-    ANGLE_UP:'pi pi-angle-up',
-    APPLE:'pi pi-apple',
-    ARROW_CIRCLE_DOWN:'pi pi-arrow-circle-down',
-    ARROW_CIRCLE_LEFT:'pi pi-arrow-circle-left',
-    ARROW_CIRCLE_RIGHT:'pi pi-arrow-circle-right',
-    ARROW_CIRCLE_UP:'pi pi-arrow-circle-up',
-    ARROW_DOWN:'pi pi-arrow-down',
-    ARROW_DOWN_LEFT:'pi pi-arrow-down-left',
-    ARROW_DOWN_RIGHT:'pi pi-arrow-down-right',
-    ARROW_LEFT:'pi pi-arrow-left',
-    ARROW_RIGHT:'pi pi-arrow-right',
-    ARROW_UP:'pi pi-arrow-up',
-    ARROW_UP_LEFT:'pi pi-arrow-up-left',
-    ARROW_UP_RIGHT:'pi pi-arrow-up-right',
-    ARROW_H:'pi pi-arrow-h',
-    ARROW_V:'pi pi-arrow-v',
-    AT:'pi pi-at',
-    BACKWARD:'pi pi-backward',
-    BAN:'pi pi-ban',
-    BARS:'pi pi-bars',
-    BELL:'pi pi-bell',
-    BOLT:'pi pi-bolt',
-    BOOK:'pi pi-book',
-    BOOKMARK:'pi pi-bookmark',
-    BOOKMARK_FILL:'pi pi-bookmark-fill',
-    BOX:'pi pi-box',
-    BRIEFCASE:'pi pi-briefcase',
-    BUILDING:'pi pi-building',
-    CALENDAR:'pi pi-calendar',
-    CALENDAR_MINUS:'pi pi-calendar-minus',
-    CALENDAR_PLUS:'pi pi-calendar-plus',
-    CALENDAR_TIMES:'pi pi-calendar-times',
-    CAMERA:'pi pi-camera',
-    CAR:'pi pi-car',
-    CARET_DOWN:'pi pi-caret-down',
-    CARET_LEFT:'pi pi-caret-left',
-    CARET_RIGHT:'pi pi-caret-right',
-    CARET_UP:'pi pi-caret-up',
-    CHART_BAR:'pi pi-chart-bar',
-    CHART_LINE:'pi pi-chart-line',
-    CHART_PIE:'pi pi-chart-pie',
-    CHECK:'pi pi-check',
-    CHECK_CIRCLE:'pi pi-check-circle',
-    CHECK_SQUARE:'pi pi-check-square',
-    CHEVRON_CIRCLE_DOWN:'pi pi-chevron-circle-down',
-    CHEVRON_CIRCLE_LEFT:'pi pi-chevron-circle-left',
-    CHEVRON_CIRCLE_RIGHT:'pi pi-chevron-circle-right',
-    CHEVRON_CIRCLE_UP:'pi pi-chevron-circle-up',
-    CHEVRON_DOWN:'pi pi-chevron-down',
-    CHEVRON_LEFT:'pi pi-chevron-left',
-    CHEVRON_RIGHT:'pi pi-chevron-right',
-    CHEVRON_UP:'pi pi-chevron-up',
-    CIRCLE:'pi pi-circle',
-    CIRCLE_FILL:'pi pi-circle-fill',
-    CLOCK:'pi pi-clock',
-    CLONE:'pi pi-clone',
-    CLOUD:'pi pi-cloud',
-    CLOUD_DOWNLOAD:'pi pi-cloud-download',
-    CLOUD_UPLOAD:'pi pi-cloud-upload',
-    CODE:'pi pi-code',
-    COG:'pi pi-cog',
-    COMMENT:'pi pi-comment',
-    COMMENTS:'pi pi-comments',
-    COMPASS:'pi pi-compass',
-    COPY:'pi pi-copy',
-    CREDIT_CARD:'pi pi-credit-card',
-    DATABASE:'pi pi-database',
-    DESKTOP:'pi pi-desktop',
-    DIRECTIONS:'pi pi-directions',
-    DIRECTIONS_ALT:'pi pi-directions-alt',
-    DISCORD:'pi pi-discord',
-    DOLLAR:'pi pi-dollar',
-    DOWNLOAD:'pi pi-download',
-    EJECT:'pi pi-eject',
-    ELLIPSIS_H:'pi pi-ellipsis-h',
-    ELLIPSIS_V:'pi pi-ellipsis-v',
-    ENVELOPE:'pi pi-envelope',
-    EURO:'pi pi-euro',
-    EXCLAMATION_CIRCLE:'pi pi-exclamation-circle',
-    EXCLAMATION_TRIANGLE :'pi pi-exclamation-triangle',
-    EXTERNAL_LINK:'pi pi-external-link',
-    EYE:'pi pi-eye',
-    EYE_SLASH:'pi pi-eye-slash',
-    FACEBOOK:'pi pi-facebook',
-    FAST_BACKWARD:'pi pi-fast-backward',
-    FAST_FORWARD:'pi pi-fast-forward',
-    FILE:'pi pi-file',
-    FILE_EXCEL:'pi pi-file-excel',
-    FILE_PDF:'pi pi-file-pdf',
-    FILTER:'pi pi-filter',
-    FILTER_FILL:'pi pi-filter-fill',
-    FILTER_SLASH:'pi pi-filter-slash',
-    FLAG:'pi pi-flag',
-    FLAG_FILL:'pi pi-flag-fill',
-    FOLDER:'pi pi-folder',
-    FOLDER_OPEN:'pi pi-folder-open',
-    FORWARD:'pi pi-forward',
-    GITHUB:'pi pi-github',
-    GLOBE:'pi pi-globe',
-    GOOGLE:'pi pi-google',
-    HASHTAG:'pi pi-hashtag',
-    HEART:'pi pi-heart',
-    HEART_FILL:'pi pi-heart-fill',
-    HISTORY:'pi pi-history',
-    HOME:'pi pi-home',
-    ID_CARD:'pi pi-id-card',
-    IMAGE:'pi pi-image',
-    IMAGES:'pi pi-images',
-    INBOX:'pi pi-inbox',
-    INFO:'pi pi-info',
-    INFO_CIRCLE:'pi pi-info-circle',
-    INSTAGRAM:'pi pi-instagram',
-    KEY:'pi pi-key',
-    LINK:'pi pi-link',
-    LINKEDIN:'pi pi-linkedin',
-    LIST:'pi pi-list',
-    LOCK:'pi pi-lock',
-    LOCK_OPEN:'pi pi-lock-open',
-    MAP:'pi pi-map',
-    MAP_MARKER:'pi pi-map-marker',
-    MICROSOFT:'pi pi-microsoft',
-    MINUS:'pi pi-minus',
-    MINUS_CIRCLE:'pi pi-minus-circle',
-    MOBILE:'pi pi-mobile',
-    MONEY_BILL:'pi pi-money-bill',
-    MOON:'pi pi-moon',
-    PALETTE:'pi pi-palette',
-    PAPERCLIP:'pi pi-paperclip',
-    PAUSE:'pi pi-pause',
-    PAYPAL:'pi pi-paypal',
-    PENCIL:'pi pi-pencil',
-    PERCENTAGE:'pi pi-percentage',
-    PHONE:'pi pi-phone',
-    PLAY:'pi pi-play',
-    PLUS:'pi pi-plus',
-    PLUS_CIRCLE:'pi pi-plus-circle',
-    POUND:'pi pi-pound',
-    POWER_OFF:'pi pi-power-off',
-    PRIME:'pi pi-prime',
-    PRINT:'pi pi-print',
-    QRCODE:'pi pi-qrcode',
-    QUESTION:'pi pi-question',
-    QUESTION_CIRCLE:'pi pi-question-circle',
-    REDDIT:'pi pi-reddit',
-    REFRESH:'pi pi-refresh',
-    REPLAY:'pi pi-replay',
-    REPLY:'pi pi-reply',
-    SAVE:'pi pi-save',
-    SEARCH:'pi pi-search',
-    SEARCH_MINUS:'pi pi-search-minus',
-    SEARCH_PLUS:'pi pi-search-plus',
-    SEND:'pi pi-send',
-    SERVER:'pi pi-server',
-    SHARE_ALT:'pi pi-share-alt',
-    SHIELD:'pi pi-shield',
-    SHOPPING_BAG:'pi pi-shopping-bag',
-    SHOPPING_CART:'pi pi-shopping-cart',
-    SIGN_IN:'pi pi-sign-in',
-    SIGN_OUT:'pi pi-sign-out',
-    SITEMAP:'pi pi-sitemap',
-    SLACK:'pi pi-slack',
-    SLIDERS_H:'pi pi-sliders-h',
-    SLIDERS_V:'pi pi-sliders-v',
-    SORT:'pi pi-sort',
-    SORT_ALPHA_DOWN:'pi pi-sort-alpha-down',
-    SORT_ALPHA_ALT_DOWN:'pi pi-sort-alpha-alt-down',
-    SORT_ALPHA_UP:'pi pi-sort-alpha-up',
-    SORT_ALPHA_ALT_UP:'pi pi-sort-alpha-alt-up',
-    SORT_ALT:'pi pi-sort-alt',
-    SORT_ALT_SLASH:'pi pi-sort-slash',
-    SORT_AMOUNT_DOWN:'pi pi-sort-amount-down',
-    SORT_AMOUNT_DOWN_ALT:'pi pi-sort-amount-down-alt',
-    SORT_AMOUNT_UP:'pi pi-sort-amount-up',
-    SORT_AMOUNT_UP_ALT:'pi pi-sort-amount-up-alt',
-    SORT_DOWN:'pi pi-sort-down',
-    SORT_NUMERIC_DOWN:'pi pi-sort-numeric-down',
-    SORT_NUMERIC_ALT_DOWN:'pi pi-sort-numeric-alt-down',
-    SORT_NUMERIC_UP:'pi pi-sort-numeric-up',
-    SORT_NUMERIC_ALT_UP:'pi pi-sort-numeric-alt-up',
-    SORT_UP:'pi pi-sort-up',
-    SPINNER:'pi pi-spinner',
-    STAR:'pi pi-star',
-    STAR_FILL:'pi pi-star-fill',
-    STEP_BACKWARD:'pi pi-step-backward',
-    STEP_BACKWARD_ALT:'pi pi-step-backward-alt',
-    STEP_FORWARD:'pi pi-step-forward',
-    STEP_FORWARD_ALT:'pi pi-step-forward-alt',
-    STOP:'pi pi-stop',
-    STOP_CIRCLE:'pi pi-stop-circle',
-    SUN:'pi pi-sun',
-    SYNC:'pi pi-sync',
-    TABLE:'pi pi-table',
-    TABLET:'pi pi-tablet',
-    TAG:'pi pi-tag',
-    TAGS:'pi pi-tags',
-    TELEGRAM:'pi pi-telegram',
-    TH_LARGE:'pi pi-th-large',
-    THUMBS_DOWN:'pi pi-thumbs-down',
-    THUMBS_UP:'pi pi-thumbs-up',
-    TICKET:'pi pi-ticket',
-    TIMES:'pi pi-times',
-    TIMES_CIRCLE:'pi pi-times-circle',
-    TRASH:'pi pi-trash',
-    TWITTER:'pi pi-twitter',
-    UNDO:'pi pi-undo',
-    UNLOCK:'pi pi-unlock',
-    UPLOAD:'pi pi-upload',
-    USER:'pi pi-user',
-    USER_EDIT:'pi pi-user-edit',
-    USER_MINUS:'pi pi-user-minus',
-    USER_PLUS:'pi pi-user-plus',
-    USERS:'pi pi-users',
-    VIDEO:'pi pi-video',
-    VIMEO:'pi pi-vimeo',
-    VOLUME_DOWN:'pi pi-volume-down',
-    VOLUME_OFF:'pi pi-volume-off',
-    VOLUME_UP:'pi pi-volume-up',
-    WALLET:'pi pi-wallet',
-    WHATSAPP:'pi pi-whatsapp',
-    WIFI:'pi pi-wifi',
-    WINDOW_MAXIMIZE:'pi pi-window-maximize',
-    WINDOW_MINIMIZE:'pi pi-window-minimize',
-    YOUTUBE:'pi pi-youtube'
-}
+    ALIGN_CENTER: 'pi pi-align-center',
+    ALIGN_JUSTIFY: 'pi pi-align-justify',
+    ALIGN_LEFT: 'pi pi-align-left',
+    ALIGN_RIGHT: 'pi pi-align-right',
+    AMAZON: 'pi pi-amazon',
+    ANDROID: 'pi pi-android',
+    ANGLE_DOUBLE_DOWN: 'pi pi-angle-double-down',
+    ANGLE_DOUBLE_LEFT: 'pi pi-angle-double-left',
+    ANGLE_DOUBLE_RIGHT: 'pi pi-angle-double-right',
+    ANGLE_DOUBLE_UP: 'pi pi-angle-double-up',
+    ANGLE_DOWN: 'pi pi-angle-down',
+    ANGLE_LEFT: 'pi pi-angle-left',
+    ANGLE_RIGHT: 'pi pi-angle-right',
+    ANGLE_UP: 'pi pi-angle-up',
+    APPLE: 'pi pi-apple',
+    ARROW_CIRCLE_DOWN: 'pi pi-arrow-circle-down',
+    ARROW_CIRCLE_LEFT: 'pi pi-arrow-circle-left',
+    ARROW_CIRCLE_RIGHT: 'pi pi-arrow-circle-right',
+    ARROW_CIRCLE_UP: 'pi pi-arrow-circle-up',
+    ARROW_DOWN: 'pi pi-arrow-down',
+    ARROW_DOWN_LEFT: 'pi pi-arrow-down-left',
+    ARROW_DOWN_RIGHT: 'pi pi-arrow-down-right',
+    ARROW_LEFT: 'pi pi-arrow-left',
+    ARROW_RIGHT: 'pi pi-arrow-right',
+    ARROW_UP: 'pi pi-arrow-up',
+    ARROW_UP_LEFT: 'pi pi-arrow-up-left',
+    ARROW_UP_RIGHT: 'pi pi-arrow-up-right',
+    ARROW_H: 'pi pi-arrow-h',
+    ARROW_V: 'pi pi-arrow-v',
+    AT: 'pi pi-at',
+    BACKWARD: 'pi pi-backward',
+    BAN: 'pi pi-ban',
+    BARS: 'pi pi-bars',
+    BELL: 'pi pi-bell',
+    BOLT: 'pi pi-bolt',
+    BOOK: 'pi pi-book',
+    BOOKMARK: 'pi pi-bookmark',
+    BOOKMARK_FILL: 'pi pi-bookmark-fill',
+    BOX: 'pi pi-box',
+    BRIEFCASE: 'pi pi-briefcase',
+    BUILDING: 'pi pi-building',
+    CALENDAR: 'pi pi-calendar',
+    CALENDAR_MINUS: 'pi pi-calendar-minus',
+    CALENDAR_PLUS: 'pi pi-calendar-plus',
+    CALENDAR_TIMES: 'pi pi-calendar-times',
+    CAMERA: 'pi pi-camera',
+    CAR: 'pi pi-car',
+    CARET_DOWN: 'pi pi-caret-down',
+    CARET_LEFT: 'pi pi-caret-left',
+    CARET_RIGHT: 'pi pi-caret-right',
+    CARET_UP: 'pi pi-caret-up',
+    CHART_BAR: 'pi pi-chart-bar',
+    CHART_LINE: 'pi pi-chart-line',
+    CHART_PIE: 'pi pi-chart-pie',
+    CHECK: 'pi pi-check',
+    CHECK_CIRCLE: 'pi pi-check-circle',
+    CHECK_SQUARE: 'pi pi-check-square',
+    CHEVRON_CIRCLE_DOWN: 'pi pi-chevron-circle-down',
+    CHEVRON_CIRCLE_LEFT: 'pi pi-chevron-circle-left',
+    CHEVRON_CIRCLE_RIGHT: 'pi pi-chevron-circle-right',
+    CHEVRON_CIRCLE_UP: 'pi pi-chevron-circle-up',
+    CHEVRON_DOWN: 'pi pi-chevron-down',
+    CHEVRON_LEFT: 'pi pi-chevron-left',
+    CHEVRON_RIGHT: 'pi pi-chevron-right',
+    CHEVRON_UP: 'pi pi-chevron-up',
+    CIRCLE: 'pi pi-circle',
+    CIRCLE_FILL: 'pi pi-circle-fill',
+    CLOCK: 'pi pi-clock',
+    CLONE: 'pi pi-clone',
+    CLOUD: 'pi pi-cloud',
+    CLOUD_DOWNLOAD: 'pi pi-cloud-download',
+    CLOUD_UPLOAD: 'pi pi-cloud-upload',
+    CODE: 'pi pi-code',
+    COG: 'pi pi-cog',
+    COMMENT: 'pi pi-comment',
+    COMMENTS: 'pi pi-comments',
+    COMPASS: 'pi pi-compass',
+    COPY: 'pi pi-copy',
+    CREDIT_CARD: 'pi pi-credit-card',
+    DATABASE: 'pi pi-database',
+    DESKTOP: 'pi pi-desktop',
+    DIRECTIONS: 'pi pi-directions',
+    DIRECTIONS_ALT: 'pi pi-directions-alt',
+    DISCORD: 'pi pi-discord',
+    DOLLAR: 'pi pi-dollar',
+    DOWNLOAD: 'pi pi-download',
+    EJECT: 'pi pi-eject',
+    ELLIPSIS_H: 'pi pi-ellipsis-h',
+    ELLIPSIS_V: 'pi pi-ellipsis-v',
+    ENVELOPE: 'pi pi-envelope',
+    EURO: 'pi pi-euro',
+    EXCLAMATION_CIRCLE: 'pi pi-exclamation-circle',
+    EXCLAMATION_TRIANGLE: 'pi pi-exclamation-triangle',
+    EXTERNAL_LINK: 'pi pi-external-link',
+    EYE: 'pi pi-eye',
+    EYE_SLASH: 'pi pi-eye-slash',
+    FACEBOOK: 'pi pi-facebook',
+    FAST_BACKWARD: 'pi pi-fast-backward',
+    FAST_FORWARD: 'pi pi-fast-forward',
+    FILE: 'pi pi-file',
+    FILE_EXCEL: 'pi pi-file-excel',
+    FILE_PDF: 'pi pi-file-pdf',
+    FILTER: 'pi pi-filter',
+    FILTER_FILL: 'pi pi-filter-fill',
+    FILTER_SLASH: 'pi pi-filter-slash',
+    FLAG: 'pi pi-flag',
+    FLAG_FILL: 'pi pi-flag-fill',
+    FOLDER: 'pi pi-folder',
+    FOLDER_OPEN: 'pi pi-folder-open',
+    FORWARD: 'pi pi-forward',
+    GITHUB: 'pi pi-github',
+    GLOBE: 'pi pi-globe',
+    GOOGLE: 'pi pi-google',
+    HASHTAG: 'pi pi-hashtag',
+    HEART: 'pi pi-heart',
+    HEART_FILL: 'pi pi-heart-fill',
+    HISTORY: 'pi pi-history',
+    HOME: 'pi pi-home',
+    ID_CARD: 'pi pi-id-card',
+    IMAGE: 'pi pi-image',
+    IMAGES: 'pi pi-images',
+    INBOX: 'pi pi-inbox',
+    INFO: 'pi pi-info',
+    INFO_CIRCLE: 'pi pi-info-circle',
+    INSTAGRAM: 'pi pi-instagram',
+    KEY: 'pi pi-key',
+    LINK: 'pi pi-link',
+    LINKEDIN: 'pi pi-linkedin',
+    LIST: 'pi pi-list',
+    LOCK: 'pi pi-lock',
+    LOCK_OPEN: 'pi pi-lock-open',
+    MAP: 'pi pi-map',
+    MAP_MARKER: 'pi pi-map-marker',
+    MICROSOFT: 'pi pi-microsoft',
+    MINUS: 'pi pi-minus',
+    MINUS_CIRCLE: 'pi pi-minus-circle',
+    MOBILE: 'pi pi-mobile',
+    MONEY_BILL: 'pi pi-money-bill',
+    MOON: 'pi pi-moon',
+    PALETTE: 'pi pi-palette',
+    PAPERCLIP: 'pi pi-paperclip',
+    PAUSE: 'pi pi-pause',
+    PAYPAL: 'pi pi-paypal',
+    PENCIL: 'pi pi-pencil',
+    PERCENTAGE: 'pi pi-percentage',
+    PHONE: 'pi pi-phone',
+    PLAY: 'pi pi-play',
+    PLUS: 'pi pi-plus',
+    PLUS_CIRCLE: 'pi pi-plus-circle',
+    POUND: 'pi pi-pound',
+    POWER_OFF: 'pi pi-power-off',
+    PRIME: 'pi pi-prime',
+    PRINT: 'pi pi-print',
+    QRCODE: 'pi pi-qrcode',
+    QUESTION: 'pi pi-question',
+    QUESTION_CIRCLE: 'pi pi-question-circle',
+    REDDIT: 'pi pi-reddit',
+    REFRESH: 'pi pi-refresh',
+    REPLAY: 'pi pi-replay',
+    REPLY: 'pi pi-reply',
+    SAVE: 'pi pi-save',
+    SEARCH: 'pi pi-search',
+    SEARCH_MINUS: 'pi pi-search-minus',
+    SEARCH_PLUS: 'pi pi-search-plus',
+    SEND: 'pi pi-send',
+    SERVER: 'pi pi-server',
+    SHARE_ALT: 'pi pi-share-alt',
+    SHIELD: 'pi pi-shield',
+    SHOPPING_BAG: 'pi pi-shopping-bag',
+    SHOPPING_CART: 'pi pi-shopping-cart',
+    SIGN_IN: 'pi pi-sign-in',
+    SIGN_OUT: 'pi pi-sign-out',
+    SITEMAP: 'pi pi-sitemap',
+    SLACK: 'pi pi-slack',
+    SLIDERS_H: 'pi pi-sliders-h',
+    SLIDERS_V: 'pi pi-sliders-v',
+    SORT: 'pi pi-sort',
+    SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
+    SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-alt-down',
+    SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
+    SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-alt-up',
+    SORT_ALT: 'pi pi-sort-alt',
+    SORT_ALT_SLASH: 'pi pi-sort-slash',
+    SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
+    SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
+    SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
+    SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
+    SORT_DOWN: 'pi pi-sort-down',
+    SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
+    SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-alt-down',
+    SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
+    SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-alt-up',
+    SORT_UP: 'pi pi-sort-up',
+    SPINNER: 'pi pi-spinner',
+    STAR: 'pi pi-star',
+    STAR_FILL: 'pi pi-star-fill',
+    STEP_BACKWARD: 'pi pi-step-backward',
+    STEP_BACKWARD_ALT: 'pi pi-step-backward-alt',
+    STEP_FORWARD: 'pi pi-step-forward',
+    STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
+    STOP: 'pi pi-stop',
+    STOP_CIRCLE: 'pi pi-stop-circle',
+    SUN: 'pi pi-sun',
+    SYNC: 'pi pi-sync',
+    TABLE: 'pi pi-table',
+    TABLET: 'pi pi-tablet',
+    TAG: 'pi pi-tag',
+    TAGS: 'pi pi-tags',
+    TELEGRAM: 'pi pi-telegram',
+    TH_LARGE: 'pi pi-th-large',
+    THUMBS_DOWN: 'pi pi-thumbs-down',
+    THUMBS_UP: 'pi pi-thumbs-up',
+    TICKET: 'pi pi-ticket',
+    TIMES: 'pi pi-times',
+    TIMES_CIRCLE: 'pi pi-times-circle',
+    TRASH: 'pi pi-trash',
+    TWITTER: 'pi pi-twitter',
+    UNDO: 'pi pi-undo',
+    UNLOCK: 'pi pi-unlock',
+    UPLOAD: 'pi pi-upload',
+    USER: 'pi pi-user',
+    USER_EDIT: 'pi pi-user-edit',
+    USER_MINUS: 'pi pi-user-minus',
+    USER_PLUS: 'pi pi-user-plus',
+    USERS: 'pi pi-users',
+    VIDEO: 'pi pi-video',
+    VIMEO: 'pi pi-vimeo',
+    VOLUME_DOWN: 'pi pi-volume-down',
+    VOLUME_OFF: 'pi pi-volume-off',
+    VOLUME_UP: 'pi pi-volume-up',
+    WALLET: 'pi pi-wallet',
+    WHATSAPP: 'pi pi-whatsapp',
+    WIFI: 'pi pi-wifi',
+    WINDOW_MAXIMIZE: 'pi pi-window-maximize',
+    WINDOW_MINIMIZE: 'pi pi-window-minimize',
+    YOUTUBE: 'pi pi-youtube'
+};
 
-export default PrimeIcons;
\ No newline at end of file
+export default PrimeIcons;
diff --git a/components/api/ToastSeverity.js b/components/api/ToastSeverity.js
index 3fb8e93bc..96992d5c1 100644
--- a/components/api/ToastSeverity.js
+++ b/components/api/ToastSeverity.js
@@ -5,4 +5,4 @@ const ToastSeverities = {
     SUCCESS: 'success'
 };
 
-export default ToastSeverities;
\ No newline at end of file
+export default ToastSeverities;
diff --git a/components/autocomplete/AutoComplete.d.ts b/components/autocomplete/AutoComplete.d.ts
index 3d28711dd..e918148ba 100755
--- a/components/autocomplete/AutoComplete.d.ts
+++ b/components/autocomplete/AutoComplete.d.ts
@@ -39,7 +39,7 @@ export interface AutoCompleteItemSelectEvent {
 /**
  * @extends AutoCompleteItemSelectEvent
  */
-export interface AutoCompleteItemUnselectEvent extends AutoCompleteItemSelectEvent { }
+export interface AutoCompleteItemUnselectEvent extends AutoCompleteItemSelectEvent {}
 
 export interface AutoCompleteDropdownClickEvent {
     /**
@@ -202,6 +202,11 @@ export interface AutoCompleteProps {
      * Default value is true.
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focused option is selected.
+     * Default value is false.
+     */
+    selectOnFocus?: boolean | undefined;
     /**
      * Locale to use in searching. The default locale is the host environment's current locale.
      */
@@ -233,11 +238,11 @@ export interface AutoCompleteProps {
     /**
      * Defines a string value that labels an interactive element.
      */
-    "aria-label"?: string | undefined;
+    'aria-label'?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface AutoCompleteSlots {
@@ -374,17 +379,17 @@ export declare type AutoCompleteEmits = {
      * Callback to invoke on value change.
      * @param {AutoCompleteChangeEvent} event - Custom change event.
      */
-    'change': (event: AutoCompleteChangeEvent) => void;
+    change: (event: AutoCompleteChangeEvent) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke when a suggestion is selected.
      * @param {AutoCompleteItemSelectEvent} event - Custom item select event.
@@ -403,12 +408,12 @@ export declare type AutoCompleteEmits = {
     /**
      * Callback to invoke when input is cleared by the user.
      */
-    'clear': () => void;
+    clear: () => void;
     /**
      * Callback to invoke to search for suggestions.
      * @param {AutoCompleteCompleteEvent} event - Custom complete event.
      */
-    'complete': (event: AutoCompleteCompleteEvent) => void;
+    complete: (event: AutoCompleteCompleteEvent) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -420,18 +425,18 @@ export declare type AutoCompleteEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
-declare class AutoComplete extends ClassComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits> { }
+declare class AutoComplete extends ClassComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        AutoComplete: GlobalComponentConstructor<AutoComplete>
+        AutoComplete: GlobalComponentConstructor<AutoComplete>;
     }
 }
 
@@ -441,7 +446,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [AutoComplete](https://www.primefaces.org/primevue/showcase/#/autocomplete)
+ * - [AutoComplete](https://www.primefaces.org/primevue/autocomplete)
  *
  */
 export default AutoComplete;
diff --git a/components/autocomplete/AutoComplete.spec.js b/components/autocomplete/AutoComplete.spec.js
index 093b91942..fcbaafa22 100644
--- a/components/autocomplete/AutoComplete.spec.js
+++ b/components/autocomplete/AutoComplete.spec.js
@@ -20,12 +20,12 @@ describe('AutoComplete.vue', () => {
             data() {
                 return {
                     countries: [
-                        {"name": "Afghanistan", "code": "AF"},
-                        {"name": "Bahrain", "code": "BH"},
-                        {"name": "Chile", "code": "CL"},
-                        {"name": "Denmark", "code": "DK"}
+                        { name: 'Afghanistan', code: 'AF' },
+                        { name: 'Bahrain', code: 'BH' },
+                        { name: 'Chile', code: 'CL' },
+                        { name: 'Denmark', code: 'DK' }
                     ]
-                }
+                };
             }
         });
 
@@ -38,21 +38,19 @@ describe('AutoComplete.vue', () => {
     });
 
     it('search copmlete', async () => {
-        const event = {'target': { 'value': 'b' }};
+        const event = { target: { value: 'b' } };
 
         wrapper.vm.onInput(event);
         await wrapper.vm.$nextTick();
 
-        wrapper.vm.search(event , event.target.value, 'input');
+        wrapper.vm.search(event, event.target.value, 'input');
         await wrapper.vm.$nextTick();
 
         await wrapper.setProps({
-            suggestions: [
-                {"name": "Bahrain", "code": "BH"}
-            ]
+            suggestions: [{ name: 'Bahrain', code: 'BH' }]
         });
 
         expect(wrapper.find('.p-autocomplete-items').exists()).toBe(true);
         expect(wrapper.findAll('.p-autocomplete-item').length).toBe(1);
     });
-});
\ No newline at end of file
+});
diff --git a/components/autocomplete/AutoComplete.vue b/components/autocomplete/AutoComplete.vue
index 1162a6a78..585e750e0 100755
--- a/components/autocomplete/AutoComplete.vue
+++ b/components/autocomplete/AutoComplete.vue
@@ -1,50 +1,127 @@
 <template>
     <div ref="container" :class="containerClass" @click="onContainerClick">
-        <input v-if="!multiple" ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputStyleClass" :value="inputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
-            role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
-            @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
-        <ul v-if="multiple" ref="multiContainer" :class="multiContainerClass" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
-            @focus="onMultipleContainerFocus" @blur="onMultipleContainerBlur" @keydown="onMultipleContainerKeyDown">
-            <li v-for="(option, i) of modelValue" :key="i" :id="id + '_multiple_option_' + i" :class="['p-autocomplete-token', {'p-focus': focusedMultipleOptionIndex === i}]"
-                role="option" :aria-label="getOptionLabel(option)" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
+        <input
+            v-if="!multiple"
+            ref="focusInput"
+            :id="inputId"
+            type="text"
+            :style="inputStyle"
+            :class="inputStyleClass"
+            :value="inputValue"
+            :placeholder="placeholder"
+            :tabindex="!disabled ? tabindex : -1"
+            :disabled="disabled"
+            autocomplete="off"
+            role="combobox"
+            :aria-label="ariaLabel"
+            :aria-labelledby="ariaLabelledby"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            :aria-expanded="overlayVisible"
+            :aria-controls="id + '_list'"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeyDown"
+            @input="onInput"
+            @change="onChange"
+            v-bind="inputProps"
+        />
+        <ul
+            v-if="multiple"
+            ref="multiContainer"
+            :class="multiContainerClass"
+            tabindex="-1"
+            role="listbox"
+            aria-orientation="horizontal"
+            :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
+            @focus="onMultipleContainerFocus"
+            @blur="onMultipleContainerBlur"
+            @keydown="onMultipleContainerKeyDown"
+        >
+            <li
+                v-for="(option, i) of modelValue"
+                :key="i"
+                :id="id + '_multiple_option_' + i"
+                :class="['p-autocomplete-token', { 'p-focus': focusedMultipleOptionIndex === i }]"
+                role="option"
+                :aria-label="getOptionLabel(option)"
+                :aria-selected="true"
+                :aria-setsize="modelValue.length"
+                :aria-posinset="i + 1"
+            >
                 <slot name="chip" :value="option">
-                    <span class="p-autocomplete-token-label">{{getOptionLabel(option)}}</span>
+                    <span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
                 </slot>
                 <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeOption($event, i)" aria-hidden="true"></span>
             </li>
             <li class="p-autocomplete-input-token" role="option">
-                <input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
-                    role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
-                    @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
+                <input
+                    ref="focusInput"
+                    :id="inputId"
+                    type="text"
+                    :style="inputStyle"
+                    :class="inputClass"
+                    :placeholder="placeholder"
+                    :tabindex="!disabled ? tabindex : -1"
+                    :disabled="disabled"
+                    autocomplete="off"
+                    role="combobox"
+                    :aria-label="ariaLabel"
+                    :aria-labelledby="ariaLabelledby"
+                    aria-haspopup="listbox"
+                    aria-autocomplete="list"
+                    :aria-expanded="overlayVisible"
+                    :aria-controls="id + '_list'"
+                    :aria-activedescendant="focused ? focusedOptionId : undefined"
+                    @focus="onFocus"
+                    @blur="onBlur"
+                    @keydown="onKeyDown"
+                    @input="onInput"
+                    @change="onChange"
+                    v-bind="inputProps"
+                />
             </li>
         </ul>
         <i v-if="searching" :class="loadingIconClass" aria-hidden="true"></i>
         <Button v-if="dropdown" ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" tabindex="-1" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" />
         <span role="status" aria-live="polite" class="p-hidden-accessible">
-            {{searchResultMessageText}}
+            {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : ''}" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                             <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-autocomplete-item-group" role="option">
-                                        <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-autocomplete-item-group" role="option">
+                                        <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                     </li>
-                                    <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
-                                        :class="['p-autocomplete-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
-                                        role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
-                                        @click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
-                                        <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
-                                        <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot> <!--TODO: Deprecated since v3.16.0-->
+                                    <li
+                                        v-else
+                                        :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                        v-ripple
+                                        :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                        :class="['p-autocomplete-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
+                                        role="option"
+                                        :aria-label="getOptionLabel(option)"
+                                        :aria-selected="isSelected(option)"
+                                        :aria-disabled="isOptionDisabled(option)"
+                                        :aria-setsize="ariaSetSize"
+                                        :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                        @click="onOptionSelect($event, option)"
+                                        @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                    >
+                                        <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
+                                        <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
+                                        <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
                             </ul>
                             <span role="status" aria-live="polite" class="p-hidden-accessible">
-                                {{selectedMessageText}}
+                                {{ selectedMessageText }}
                             </span>
                         </template>
                         <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -59,7 +136,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,UniqueComponentId,ObjectUtils,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, UniqueComponentId, ObjectUtils, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
@@ -75,8 +152,9 @@ export default {
             type: Array,
             default: null
         },
-        field: { // TODO: Deprecated since v3.16.0
-            type: [String,Function],
+        field: {
+            // TODO: Deprecated since v3.16.0
+            type: [String, Function],
             default: null
         },
         optionLabel: null,
@@ -95,7 +173,8 @@ export default {
             type: String,
             default: 'blank'
         },
-        autoHighlight: { // TODO: Deprecated since v3.16.0
+        autoHighlight: {
+            // TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
             type: Boolean,
             default: false
         },
@@ -135,13 +214,34 @@ export default {
             type: Boolean,
             default: false
         },
-        inputId: String,
-        inputStyle: null,
-        inputClass: null,
-        inputProps: null,
-        panelStyle: null,
-        panelClass: null,
-        panelProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
         loadingIcon: {
             type: String,
             default: 'pi pi-spinner'
@@ -154,6 +254,10 @@ export default {
             type: Boolean,
             default: true
         },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
         searchLocale: {
             type: String,
             default: undefined
@@ -193,18 +297,16 @@ export default {
     overlay: null,
     virtualScroller: null,
     searchTimeout: null,
-    selectOnFocus: false,
     focusOnHover: false,
     dirty: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             focusedMultipleOptionIndex: -1,
             overlayVisible: false,
             searching: false
-        }
+        };
     },
     watch: {
         suggestions() {
@@ -218,8 +320,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     updated() {
@@ -243,7 +343,7 @@ export default {
     },
     methods: {
         getOptionIndex(index, fn) {
-            return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
         },
         getOptionLabel(option) {
             return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
@@ -267,15 +367,15 @@ export default {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
         getAriaPosInset(index) {
-            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
         },
         show(isFocus) {
             this.$emit('before-show');
             this.dirty = true;
             this.overlayVisible = true;
-            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -284,10 +384,12 @@ export default {
                 this.overlayVisible = false;
                 this.focusedOptionIndex = -1;
 
-                isFocus && this.$refs.focusInput.focus();
-            }
+                isFocus && DomHandler.focus(this.$refs.focusInput);
+            };
 
-            setTimeout(() => { _hide() }, 0); // For ScreenReaders
+            setTimeout(() => {
+                _hide();
+            }, 0); // For ScreenReaders
         },
         onFocus(event) {
             if (!this.dirty && this.completeOnFocus) {
@@ -371,6 +473,7 @@ export default {
             }
 
             let query = event.target.value;
+
             if (!this.multiple) {
                 this.updateModel(event, query);
             }
@@ -378,16 +481,14 @@ export default {
             if (query.length === 0) {
                 this.hide();
                 this.$emit('clear');
-            }
-            else {
+            } else {
                 if (query.length >= this.minLength) {
                     this.focusedOptionIndex = -1;
 
                     this.searchTimeout = setTimeout(() => {
                         this.search(event, query, 'input');
                     }, this.delay);
-                }
-                else {
+                } else {
                     this.hide();
                 }
             }
@@ -396,8 +497,8 @@ export default {
             if (this.forceSelection) {
                 let valid = false;
 
-                if (this.visibleOptions)  {
-                    const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
+                if (this.visibleOptions) {
+                    const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, event.target.value));
 
                     if (matchedValue !== undefined) {
                         valid = true;
@@ -443,7 +544,7 @@ export default {
             }
 
             if (!this.overlay || !this.overlay.contains(event.target)) {
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onDropdownClick(event) {
@@ -451,20 +552,17 @@ export default {
 
             if (this.overlayVisible) {
                 this.hide(true);
-            }
-            else {
-                this.$refs.focusInput.focus();
+            } else {
+                DomHandler.focus(this.$refs.focusInput);
                 query = this.$refs.focusInput.value;
 
-                if (this.dropdownMode === 'blank')
-                    this.search(event, '', 'dropdown');
-                else if (this.dropdownMode === 'current')
-                    this.search(event, query, 'dropdown');
+                if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
+                else if (this.dropdownMode === 'current') this.search(event, query, 'dropdown');
             }
 
             this.$emit('dropdown-click', { originalEvent: event, query });
         },
-        onOptionSelect(event, option) {
+        onOptionSelect(event, option, isHide = true) {
             const value = this.getOptionValue(option);
 
             if (this.multiple) {
@@ -473,14 +571,13 @@ export default {
                 if (!this.isSelected(option)) {
                     this.updateModel(event, [...(this.modelValue || []), value]);
                 }
-            }
-            else {
+            } else {
                 this.updateModel(event, value);
             }
 
             this.$emit('item-select', { originalEvent: event, value: option });
 
-            this.hide(true);
+            isHide && this.hide(true);
         },
         onOptionMouseMove(event, index) {
             if (this.focusOnHover) {
@@ -526,8 +623,7 @@ export default {
 
                 this.overlayVisible && this.hide();
                 event.preventDefault();
-            }
-            else {
+            } else {
                 const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
@@ -537,14 +633,14 @@ export default {
         },
         onArrowLeftKey(event) {
             const target = event.currentTarget;
+
             this.focusedOptionIndex = -1;
 
             if (this.multiple) {
                 if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
-                    this.$refs.multiContainer.focus();
+                    DomHandler.focus(this.$refs.multiContainer);
                     this.focusedMultipleOptionIndex = this.modelValue.length;
-                }
-                else {
+                } else {
                     event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
                 }
             }
@@ -563,6 +659,7 @@ export default {
         onEndKey(event) {
             const target = event.currentTarget;
             const len = target.value.length;
+
             target.setSelectionRange(len, len);
             this.focusedOptionIndex = -1;
 
@@ -579,8 +676,7 @@ export default {
         onEnterKey(event) {
             if (!this.overlayVisible) {
                 this.onArrowDownKey(event);
-            }
-            else {
+            } else {
                 if (this.focusedOptionIndex !== -1) {
                     this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
@@ -620,9 +716,9 @@ export default {
         onArrowRightKeyOnMultiple() {
             this.focusedMultipleOptionIndex++;
 
-            if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+            if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
                 this.focusedMultipleOptionIndex = -1;
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onBackspaceKeyOnMultiple(event) {
@@ -654,10 +750,10 @@ export default {
         },
         alignOverlay() {
             let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
+
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
                 DomHandler.absolutePosition(this.overlay, target);
             }
@@ -669,6 +765,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -701,6 +798,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -714,13 +812,11 @@ export default {
             return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
         },
         isInputClicked(event) {
-            if (this.multiple)
-                return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
-            else
-                return event.target === this.$refs.focusInput;
+            if (this.multiple) return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
+            else return event.target === this.$refs.focusInput;
         },
         isDropdownClicked(event) {
-            return this.$refs.dropdownButton ? (event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target)) : false;
+            return this.$refs.dropdownButton ? event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target) : false;
         },
         isOptionMatched(option, value) {
             return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
@@ -735,28 +831,32 @@ export default {
             return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
         findFirstOptionIndex() {
-            return this.visibleOptions.findIndex(option => this.isValidOption(option));
+            return this.visibleOptions.findIndex((option) => this.isValidOption(option));
         },
         findLastOptionIndex() {
-            return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+            return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
         },
         findNextOptionIndex(index) {
-            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
         findPrevOptionIndex(index) {
-            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         search(event, query, source) {
@@ -775,12 +875,12 @@ export default {
         },
         removeOption(event, index) {
             const removedOption = this.modelValue[index];
-            const value = this.modelValue.filter((_, i) => i !== index).map(option => this.getOptionValue(option));
+            const value = this.modelValue.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));
 
             this.updateModel(event, value);
             this.$emit('item-unselect', { originalEvent: event, value: removedOption });
             this.dirty = true;
-            this.$refs.focusInput.focus();
+            DomHandler.focus(this.$refs.focusInput);
         },
         changeFocusedOptionIndex(event, index) {
             if (this.focusedOptionIndex !== index) {
@@ -788,17 +888,17 @@ export default {
                 this.scrollInView();
 
                 if (this.selectOnFocus || this.autoHighlight) {
-                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                    this.onOptionSelect(event, this.visibleOptions[index], false);
                 }
             }
         },
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
             const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-            }
-            else if (!this.virtualScrollerDisabled) {
+            } else if (!this.virtualScrollerDisabled) {
                 setTimeout(() => {
                     this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
                 }, 0);
@@ -807,8 +907,7 @@ export default {
         autoUpdateModel() {
             if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
-                this.updateModel(null, this.multiple ? [value] : value);
+                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
             }
         },
         updateModel(event, value) {
@@ -820,7 +919,8 @@ export default {
                 result.push({ optionGroup: option, group: true, index });
 
                 const optionGroupChildren = this.getOptionGroupChildren(option);
-                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
 
                 return result;
             }, []);
@@ -838,47 +938,57 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-autocomplete p-component p-inputwrapper', {
-                'p-disabled': this.disabled,
-                'p-focus': this.focused,
-                'p-autocomplete-dd': this.dropdown,
-                'p-autocomplete-multiple': this.multiple,
-                'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
-                'p-inputwrapper-focus': this.focused,
-                'p-overlay-open': this.overlayVisible
-            }];
+            return [
+                'p-autocomplete p-component p-inputwrapper',
+                {
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused,
+                    'p-autocomplete-dd': this.dropdown,
+                    'p-autocomplete-multiple': this.multiple,
+                    'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
+                    'p-inputwrapper-focus': this.focused,
+                    'p-overlay-open': this.overlayVisible
+                }
+            ];
         },
         inputStyleClass() {
-            return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
-                'p-autocomplete-dd-input': this.dropdown
-            }];
+            return [
+                'p-autocomplete-input p-inputtext p-component',
+                this.inputClass,
+                {
+                    'p-autocomplete-dd-input': this.dropdown
+                }
+            ];
         },
         multiContainerClass() {
             return ['p-autocomplete-multiple-container p-component p-inputtext'];
         },
         panelStyleClass() {
-            return ['p-autocomplete-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-autocomplete-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         loadingIconClass() {
             return ['p-autocomplete-loader pi-spin', this.loadingIcon];
         },
         visibleOptions() {
-            return this.optionGroupLabel ? this.flatOptions(this.suggestions) : (this.suggestions || []);
+            return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
         },
         inputValue() {
             if (this.modelValue) {
                 if (typeof this.modelValue === 'object') {
                     const label = this.getOptionLabel(this.modelValue);
+
                     return label != null ? label : this.modelValue;
-                }
-                else {
+                } else {
                     return this.modelValue;
                 }
-            }
-            else {
+            } else {
                 return '';
             }
         },
@@ -906,6 +1016,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
@@ -913,21 +1026,21 @@ export default {
             return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
         },
         ariaSetSize() {
-            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+            return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         }
     },
     components: {
-        'Button': Button,
-        'VirtualScroller': VirtualScroller,
-        'Portal': Portal
+        Button: Button,
+        VirtualScroller: VirtualScroller,
+        Portal: Portal
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -939,7 +1052,7 @@ export default {
 .p-autocomplete-loader {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-autocomplete-dd .p-autocomplete-input {
@@ -949,13 +1062,13 @@ export default {
 
 .p-autocomplete-dd .p-autocomplete-input,
 .p-autocomplete-dd .p-autocomplete-multiple-container {
-     border-top-right-radius: 0;
-     border-bottom-right-radius: 0;
- }
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
 
 .p-autocomplete-dd .p-autocomplete-dropdown {
-     border-top-left-radius: 0;
-     border-bottom-left-radius: 0px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0px;
 }
 
 .p-autocomplete .p-autocomplete-panel {
diff --git a/components/avatar/Avatar.d.ts b/components/avatar/Avatar.d.ts
index f900efec4..ae5926cfe 100644
--- a/components/avatar/Avatar.d.ts
+++ b/components/avatar/Avatar.d.ts
@@ -44,13 +44,13 @@ export declare type AvatarEmits = {
      * Triggered when an error occurs while loading an image file.
      */
     error: () => void;
-}
+};
 
-declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> { }
+declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Avatar: GlobalComponentConstructor<Avatar>
+        Avatar: GlobalComponentConstructor<Avatar>;
     }
 }
 
@@ -60,7 +60,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Avatar](https://www.primefaces.org/primevue/showcase/#/avatar)
+ * - [Avatar](https://www.primefaces.org/primevue/avatar)
  *
  */
 export default Avatar;
diff --git a/components/avatar/Avatar.spec.js b/components/avatar/Avatar.spec.js
index 896df5da5..ef67af6ad 100644
--- a/components/avatar/Avatar.spec.js
+++ b/components/avatar/Avatar.spec.js
@@ -17,4 +17,4 @@ describe('Avatar.vue', () => {
         expect(wrapper.find('.p-avatar-text').exists()).toBe(true);
         expect(wrapper.find('.p-avatar-text').text()).toBe('T');
     });
-});
\ No newline at end of file
+});
diff --git a/components/avatar/Avatar.vue b/components/avatar/Avatar.vue
index 6e9b0d2a6..f8c5ffacd 100644
--- a/components/avatar/Avatar.vue
+++ b/components/avatar/Avatar.vue
@@ -1,9 +1,9 @@
 <template>
     <div :class="containerClass">
         <slot>
-            <span class="p-avatar-text" v-if="label">{{label}}</span>
-            <span :class="iconClass" v-else-if="icon"></span>
-            <img :src="image" v-else-if="image" @error="onError">
+            <span v-if="label" class="p-avatar-text">{{ label }}</span>
+            <span v-else-if="icon" :class="iconClass"></span>
+            <img v-else-if="image" :src="image" @error="onError" />
         </slot>
     </div>
 </template>
@@ -11,6 +11,7 @@
 <script>
 export default {
     name: 'Avatar',
+    emits: ['error'],
     props: {
         label: {
             type: String,
@@ -30,7 +31,7 @@ export default {
         },
         shape: {
             type: String,
-            default: "square"
+            default: 'square'
         }
     },
     methods: {
@@ -40,18 +41,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-avatar p-component', {
-                'p-avatar-image': this.image != null,
-                'p-avatar-circle': this.shape === 'circle',
-                'p-avatar-lg': this.size === 'large',
-                'p-avatar-xl': this.size === 'xlarge'
-            }];
+            return [
+                'p-avatar p-component',
+                {
+                    'p-avatar-image': this.image != null,
+                    'p-avatar-circle': this.shape === 'circle',
+                    'p-avatar-lg': this.size === 'large',
+                    'p-avatar-xl': this.size === 'xlarge'
+                }
+            ];
         },
         iconClass() {
             return ['p-avatar-icon', this.icon];
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/avatargroup/AvatarGroup.d.ts b/components/avatargroup/AvatarGroup.d.ts
index 858ebee34..9ebb18492 100644
--- a/components/avatargroup/AvatarGroup.d.ts
+++ b/components/avatargroup/AvatarGroup.d.ts
@@ -1,19 +1,16 @@
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface AvatarGroupProps {
-}
+export interface AvatarGroupProps {}
 
-export interface AvatarGroupSlots {
-}
+export interface AvatarGroupSlots {}
 
-export declare type AvatarGroupEmits = {
-}
+export declare type AvatarGroupEmits = {};
 
-declare class AvatarGroup extends ClassComponent<AvatarGroupProps, AvatarGroupSlots, AvatarGroupEmits> { }
+declare class AvatarGroup extends ClassComponent<AvatarGroupProps, AvatarGroupSlots, AvatarGroupEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        AvatarGroup: GlobalComponentConstructor<AvatarGroup>
+        AvatarGroup: GlobalComponentConstructor<AvatarGroup>;
     }
 }
 
@@ -27,7 +24,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [AvatarGroup](https://www.primefaces.org/primevue/showcase/#/avatar)
+ * - [AvatarGroup](https://www.primefaces.org/primevue/avatar)
  *
  */
 export default AvatarGroup;
diff --git a/components/avatargroup/AvatarGroup.spec.js b/components/avatargroup/AvatarGroup.spec.js
index 4f0e69de0..eeb2822de 100644
--- a/components/avatargroup/AvatarGroup.spec.js
+++ b/components/avatargroup/AvatarGroup.spec.js
@@ -18,4 +18,4 @@ describe('AvatarGroup.vue', () => {
         expect(wrapper.find('.p-avatar-group.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-avatar.p-component').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/avatargroup/AvatarGroup.vue b/components/avatargroup/AvatarGroup.vue
index e0871a443..2a3311455 100644
--- a/components/avatargroup/AvatarGroup.vue
+++ b/components/avatargroup/AvatarGroup.vue
@@ -7,7 +7,7 @@
 <script>
 export default {
     name: 'AvatarGroup'
-}
+};
 </script>
 
 <style>
diff --git a/components/badge/Badge.d.ts b/components/badge/Badge.d.ts
index 2d55781d5..ba97b2830 100644
--- a/components/badge/Badge.d.ts
+++ b/components/badge/Badge.d.ts
@@ -29,14 +29,13 @@ export interface BadgeSlots {
     default: () => VNode[];
 }
 
-export declare type BadgeEmits = {
-}
+export declare type BadgeEmits = {};
 
-declare class Badge extends ClassComponent<BadgeProps, BadgeSlots, BadgeEmits> { }
+declare class Badge extends ClassComponent<BadgeProps, BadgeSlots, BadgeEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Badge: GlobalComponentConstructor<Badge>
+        Badge: GlobalComponentConstructor<Badge>;
     }
 }
 
@@ -46,7 +45,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Badge](https://www.primefaces.org/primevue/showcase/#/badge)
+ * - [Badge](https://www.primefaces.org/primevue/badge)
  *
  */
 export default Badge;
diff --git a/components/badge/Badge.spec.js b/components/badge/Badge.spec.js
index 1e0e3aa1c..e16023a62 100644
--- a/components/badge/Badge.spec.js
+++ b/components/badge/Badge.spec.js
@@ -30,4 +30,4 @@ describe('Badge.vue', () => {
         expect(wrapper.find('.p-badge-danger').exists()).toBe(true);
         expect(wrapper.find('.p-badge-no-gutter').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/badge/Badge.vue b/components/badge/Badge.vue
index d2081c622..05a905b19 100644
--- a/components/badge/Badge.vue
+++ b/components/badge/Badge.vue
@@ -1,6 +1,6 @@
 <template>
     <span :class="badgeClass">
-        <slot>{{value}}</slot>
+        <slot>{{ value }}</slot>
     </span>
 </template>
 
@@ -14,20 +14,23 @@ export default {
     },
     computed: {
         containerClass() {
-            return this.$slots.default ? 'p-overlay-badge': this.badgeClass;
+            return this.$slots.default ? 'p-overlay-badge' : this.badgeClass;
         },
         badgeClass() {
-            return ['p-badge p-component', {
-                'p-badge-no-gutter': this.value && String(this.value).length === 1,
-                'p-badge-dot': !this.value && !this.$slots.default,
-                'p-badge-lg': this.size === 'large',
-                'p-badge-xl': this.size === 'xlarge',
-                'p-badge-info': this.severity === 'info',
-                'p-badge-success': this.severity === 'success',
-                'p-badge-warning': this.severity === 'warning',
-                'p-badge-danger': this.severity === 'danger'
-            }];
+            return [
+                'p-badge p-component',
+                {
+                    'p-badge-no-gutter': this.value && String(this.value).length === 1,
+                    'p-badge-dot': !this.value && !this.$slots.default,
+                    'p-badge-lg': this.size === 'large',
+                    'p-badge-xl': this.size === 'xlarge',
+                    'p-badge-info': this.severity === 'info',
+                    'p-badge-success': this.severity === 'success',
+                    'p-badge-warning': this.severity === 'warning',
+                    'p-badge-danger': this.severity === 'danger'
+                }
+            ];
         }
     }
-}
+};
 </script>
diff --git a/components/badgedirective/BadgeDirective.js b/components/badgedirective/BadgeDirective.js
index 6807af503..aea2a65de 100644
--- a/components/badgedirective/BadgeDirective.js
+++ b/components/badgedirective/BadgeDirective.js
@@ -1,27 +1,28 @@
-import {DomHandler} from 'primevue/utils';
-import {UniqueComponentId} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 const BadgeDirective = {
     beforeMount(el, options) {
         const id = UniqueComponentId() + '_badge';
+
         el.$_pbadgeId = id;
 
         let badge = document.createElement('span');
+
         badge.id = id;
         badge.className = 'p-badge p-component';
 
         for (let modifier in options.modifiers) {
             DomHandler.addClass(badge, 'p-badge-' + modifier);
         }
-        
+
         if (options.value != null) {
             badge.appendChild(document.createTextNode(options.value));
-            
+
             if (String(options.value).length === 1) {
                 DomHandler.addClass(badge, 'p-badge-no-gutter');
             }
-        }
-        else {
+        } else {
             DomHandler.addClass(badge, 'p-badge-dot');
         }
 
@@ -39,12 +40,9 @@ const BadgeDirective = {
                     DomHandler.removeClass(badge, 'p-badge-dot');
                 }
 
-                if (String(options.value).length === 1)
-                    DomHandler.addClass(badge, 'p-badge-no-gutter');
-                else
-                    DomHandler.removeClass(badge, 'p-badge-no-gutter');
-            }
-            else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
+                if (String(options.value).length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
+                else DomHandler.removeClass(badge, 'p-badge-no-gutter');
+            } else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
                 DomHandler.addClass(badge, 'p-badge-dot');
             }
 
diff --git a/components/badgedirective/BadgeDirective.spec.js b/components/badgedirective/BadgeDirective.spec.js
index 9d9cb6f96..c5211a0db 100644
--- a/components/badgedirective/BadgeDirective.spec.js
+++ b/components/badgedirective/BadgeDirective.spec.js
@@ -6,7 +6,7 @@ describe('directive badge should exist', () => {
         const wrapper = mount({
             template: '<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>',
             directives: {
-                'badge': BadgeDirective
+                badge: BadgeDirective
             }
         });
 
@@ -14,4 +14,4 @@ describe('directive badge should exist', () => {
         expect(wrapper.find('.p-badge.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-badge.p-component').text()).toBe('2');
     });
-});
\ No newline at end of file
+});
diff --git a/components/blockui/BlockUI.d.ts b/components/blockui/BlockUI.d.ts
index fec8512e6..a548442bd 100755
--- a/components/blockui/BlockUI.d.ts
+++ b/components/blockui/BlockUI.d.ts
@@ -33,18 +33,18 @@ export declare type BlockUIEmits = {
     /**
      * Fired when the element gets blocked.
      */
-    'block': () => void;
+    block: () => void;
     /**
      * Fired when the element gets unblocked.
      */
-    'unblock': () => void;
-}
+    unblock: () => void;
+};
 
-declare class BlockUI extends ClassComponent<BlockUIProps, BlockUISlots, BlockUIEmits> { }
+declare class BlockUI extends ClassComponent<BlockUIProps, BlockUISlots, BlockUIEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        BlockUI: GlobalComponentConstructor<BlockUI>
+        BlockUI: GlobalComponentConstructor<BlockUI>;
     }
 }
 
@@ -54,7 +54,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [BlockUI](https://www.primefaces.org/primevue/showcase/#/blockui)
+ * - [BlockUI](https://www.primefaces.org/primevue/blockui)
  *
  */
 export default BlockUI;
diff --git a/components/blockui/BlockUI.spec.js b/components/blockui/BlockUI.spec.js
index 0717de401..1696b6e6a 100644
--- a/components/blockui/BlockUI.spec.js
+++ b/components/blockui/BlockUI.spec.js
@@ -11,7 +11,7 @@ config.global.mocks = {
             }
         }
     }
-}
+};
 
 describe('BlockUI.vue', () => {
     it('should blocked and unblocked the panel', async () => {
@@ -34,7 +34,7 @@ describe('BlockUI.vue', () => {
             data() {
                 return {
                     blockedPanel: false
-                }
+                };
             },
             methods: {
                 blockPanel() {
diff --git a/components/blockui/BlockUI.vue b/components/blockui/BlockUI.vue
index 7d2a387d1..642957071 100755
--- a/components/blockui/BlockUI.vue
+++ b/components/blockui/BlockUI.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'BlockUI',
@@ -29,22 +29,21 @@ export default {
         }
     },
     mask: null,
+    watch: {
+        blocked(newValue) {
+            if (newValue === true) this.block();
+            else this.unblock();
+        }
+    },
     mounted() {
         if (this.blocked) {
             this.block();
         }
     },
-    watch: {
-        blocked(newValue) {
-            if (newValue === true)
-                this.block();
-            else
-                this.unblock();
-        }
-    },
     methods: {
         block() {
             let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
+
             if (this.fullScreen) {
                 styleClass += ' p-blockui-document';
                 this.mask = document.createElement('div');
@@ -52,8 +51,7 @@ export default {
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
-            }
-            else {
+            } else {
                 this.mask = document.createElement('div');
                 this.mask.setAttribute('class', styleClass);
                 this.$refs.container.appendChild(this.mask);
@@ -73,18 +71,18 @@ export default {
         },
         removeMask() {
             ZIndexUtils.clear(this.mask);
-             if (this.fullScreen) {
+
+            if (this.fullScreen) {
                 document.body.removeChild(this.mask);
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            }
-            else {
+            } else {
                 this.$refs.container.removeChild(this.mask);
             }
 
             this.$emit('unblock');
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/breadcrumb/Breadcrumb.d.ts b/components/breadcrumb/Breadcrumb.d.ts
index 7c526cf44..2c725a327 100755
--- a/components/breadcrumb/Breadcrumb.d.ts
+++ b/components/breadcrumb/Breadcrumb.d.ts
@@ -31,14 +31,13 @@ export interface BreadcrumbSlots {
     }) => VNode[];
 }
 
-export declare type BreadcrumbEmits = {
-}
+export declare type BreadcrumbEmits = {};
 
-declare class Breadcrumb extends ClassComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits> { }
+declare class Breadcrumb extends ClassComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Breadcrumb: GlobalComponentConstructor<Breadcrumb>
+        Breadcrumb: GlobalComponentConstructor<Breadcrumb>;
     }
 }
 
@@ -48,11 +47,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Breadcrumb](https://www.primefaces.org/primevue/showcase/#/breadcrumb)
+ * - [Breadcrumb](https://www.primefaces.org/primevue/breadcrumb)
  *
  */
 export default Breadcrumb;
diff --git a/components/breadcrumb/Breadcrumb.spec.js b/components/breadcrumb/Breadcrumb.spec.js
index 60a2edb7e..17675fce2 100644
--- a/components/breadcrumb/Breadcrumb.spec.js
+++ b/components/breadcrumb/Breadcrumb.spec.js
@@ -8,19 +8,13 @@ describe('Breadcrumb', () => {
                 stubs: ['router-link']
             },
             props: {
-                home: {icon: 'pi pi-home', to: '/'},
-                model: [
-                    {label: 'Computer'},
-                    {label: 'Notebook'},
-                    {label: 'Accessories'},
-                    {label: 'Backpacks'},
-                    {label: 'Item'}
-                ]
+                home: { icon: 'pi pi-home', to: '/' },
+                model: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]
             }
         });
-        
+
         expect(wrapper.find('.p-breadcrumb.p-component').exists()).toBe(true);
         expect(wrapper.findAll('.p-breadcrumb-chevron').length).toBe(5);
         expect(wrapper.findAll('.p-menuitem-text').length).toBe(5);
     });
-});
\ No newline at end of file
+});
diff --git a/components/breadcrumb/Breadcrumb.vue b/components/breadcrumb/Breadcrumb.vue
index b979a4843..17fd18152 100755
--- a/components/breadcrumb/Breadcrumb.vue
+++ b/components/breadcrumb/Breadcrumb.vue
@@ -30,9 +30,9 @@ export default {
         }
     },
     components: {
-        'BreadcrumbItem': BreadcrumbItem
+        BreadcrumbItem: BreadcrumbItem
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/breadcrumb/BreadcrumbItem.vue b/components/breadcrumb/BreadcrumbItem.vue
index 2083a30a9..11761adaa 100755
--- a/components/breadcrumb/BreadcrumbItem.vue
+++ b/components/breadcrumb/BreadcrumbItem.vue
@@ -1,15 +1,15 @@
 <template>
-    <li :class="containerClass(item)" v-if="visible()">
+    <li v-if="visible()" :class="containerClass(item)">
         <template v-if="!template">
-            <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onClick($event, navigate)">
+            <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                <a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onClick($event, navigate)">
                     <span v-if="item.icon" :class="iconClass"></span>
-                    <span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
+                    <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url||'#'" :class="linkClass()" @click="onClick" :target="item.target">
+            <a v-else :href="item.url || '#'" :class="linkClass()" @click="onClick" :target="item.target">
                 <span v-if="item.icon" :class="iconClass"></span>
-                <span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
+                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="template" :item="item"></component>
@@ -38,22 +38,25 @@ export default {
             }
         },
         containerClass(item) {
-            return [{'p-disabled': this.disabled(item)}, this.item.class];
+            return [{ 'p-disabled': this.disabled(item) }, this.item.class];
         },
         linkClass(routerProps) {
-            return ['p-menuitem-link', {
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         visible() {
-            return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label() {
-            return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
+            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
     computed: {
@@ -61,5 +64,5 @@ export default {
             return ['p-menuitem-icon', this.item.icon];
         }
     }
-}
+};
 </script>
diff --git a/components/button/Button.d.ts b/components/button/Button.d.ts
index 992b4c166..00d3b5254 100755
--- a/components/button/Button.d.ts
+++ b/components/button/Button.d.ts
@@ -9,8 +9,8 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      */
     style?: any;
     /**
-      * Style class of the button.
-      */
+     * Style class of the button.
+     */
     class?: any;
     /**
      * Text of the button.
@@ -25,6 +25,10 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Default value is 'left'.
      */
     iconPos?: ButtonIconPosType;
+    /**
+     * Style class of the icon.
+     */
+    iconClass?: string | undefined;
     /**
      * Value of the badge.
      */
@@ -51,14 +55,13 @@ export interface ButtonSlots {
     default: () => VNode[];
 }
 
-export declare type ButtonEmits = {
-}
+export declare type ButtonEmits = {};
 
-declare class Button extends ClassComponent<ButtonProps, ButtonSlots, ButtonEmits> { }
+declare class Button extends ClassComponent<ButtonProps, ButtonSlots, ButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Button: GlobalComponentConstructor<Button>
+        Button: GlobalComponentConstructor<Button>;
     }
 }
 
@@ -68,7 +71,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Button](https://www.primefaces.org/primevue/showcase/#/button)
+ * - [Button](https://www.primefaces.org/primevue/button)
  *
  */
 export default Button;
diff --git a/components/button/Button.spec.js b/components/button/Button.spec.js
index 51f014191..38c0d659d 100644
--- a/components/button/Button.spec.js
+++ b/components/button/Button.spec.js
@@ -3,16 +3,16 @@ import { mount } from '@vue/test-utils';
 import Button from '@/components/button/Button.vue';
 
 describe('Button.vue', () => {
-	it('is Button element exist', () => {
-		const wrapper = mount(Button);
+    it('is Button element exist', () => {
+        const wrapper = mount(Button);
 
-		expect(wrapper.find('.p-button.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-button.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-button-label').exists()).toBe(true);
-	})
+    });
 });
 
 describe('Button.vue', () => {
-	it('is icon exist and right position', () => {
+    it('is icon exist and right position', () => {
         const icon = 'pi pi-discord';
         const iconPos = 'right';
         const label = 'Save';
@@ -23,28 +23,27 @@ describe('Button.vue', () => {
             props
         });
 
-		expect(wrapper.find('.p-button-icon-only').exists()).toBe(true);
+        expect(wrapper.find('.p-button-icon-only').exists()).toBe(true);
 
         wrapper = mount(Button, {
             props: { ...props, label }
         });
 
         expect(wrapper.find('.p-button-icon.p-button-icon-' + iconPos).exists()).toBe(true);
-	})
+    });
 });
 
 describe('Button.vue', () => {
     it('is badge working', () => {
         const badge = '5';
-        const badgeClass= 'p-badge-danger';
+        const badgeClass = 'p-badge-danger';
         const wrapper = mount(Button, {
             props: { badge, badgeClass }
         });
 
-
         expect(wrapper.find('.p-badge').text()).toEqual(badge);
         expect(wrapper.find('.' + badgeClass).exists()).toBe(true);
-    })
+    });
 });
 
 describe('Button.vue', () => {
@@ -56,12 +55,12 @@ describe('Button.vue', () => {
                 loadingIcon
             }
         });
-        
+
         expect(wrapper.find('.p-disabled').exists()).toBe(false);
 
-        await wrapper.setProps({ loading: true })
+        await wrapper.setProps({ loading: true });
         const array = loadingIcon.split(' ');
-		const lastIcon = '.' + array.join('.');
+        const lastIcon = '.' + array.join('.');
 
         expect(wrapper.find('.p-button-loading').exists()).toBe(true);
         expect(wrapper.find('.p-button-loading-icon' + lastIcon).exists()).toBe(true);
@@ -69,17 +68,17 @@ describe('Button.vue', () => {
         await wrapper.setProps({ loading: false });
 
         expect(wrapper.find('.p-button-loading').exists()).toBe(false);
-    })
+    });
 });
 
 describe('Button.vue', () => {
     it('should render default slot', () => {
         const wrapper = mount(Button, {
             slots: {
-                default: h('span', {class: 'ml-2 font-bold'}, 'Default PrimeVue Button')
+                default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button')
             }
         });
 
         expect(wrapper.html()).toBe('<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>');
-    })
-});
\ No newline at end of file
+    });
+});
diff --git a/components/button/Button.vue b/components/button/Button.vue
index cfa39fe8a..2e7a46ee6 100755
--- a/components/button/Button.vue
+++ b/components/button/Button.vue
@@ -1,10 +1,10 @@
 <template>
-    <button :class="buttonClass" type="button" :aria-label="defaultAriaLabel" v-ripple :disabled="disabled">
+    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
         <slot>
-            <span v-if="loading && !icon" :class="iconClass"></span>
-            <span v-if="icon" :class="iconClass"></span>
-            <span class="p-button-label">{{label||'&nbsp;'}}</span>
-            <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
+            <span v-if="loading && !icon" :class="iconStyleClass"></span>
+            <span v-if="icon" :class="iconStyleClass"></span>
+            <span class="p-button-label">{{ label || '&nbsp;' }}</span>
+            <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
         </slot>
     </button>
 </template>
@@ -25,6 +25,10 @@ export default {
             type: String,
             default: 'left'
         },
+        iconClass: {
+            type: String,
+            default: null
+        },
         badge: {
             type: String
         },
@@ -50,35 +54,39 @@ export default {
                 'p-disabled': this.$attrs.disabled || this.loading,
                 'p-button-loading': this.loading,
                 'p-button-loading-label-only': this.loading && !this.icon && this.label
-            }
+            };
         },
-        iconClass() {
+        iconStyleClass() {
             return [
                 this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
+                this.iconClass,
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
                     'p-button-icon-right': this.iconPos === 'right' && this.label,
                     'p-button-icon-top': this.iconPos === 'top' && this.label,
                     'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
                 }
-            ]
+            ];
         },
         badgeStyleClass() {
             return [
-                'p-badge p-component', this.badgeClass, {
-                'p-badge-no-gutter': this.badge && String(this.badge).length === 1
-            }]
+                'p-badge p-component',
+                this.badgeClass,
+                {
+                    'p-badge-no-gutter': this.badge && String(this.badge).length === 1
+                }
+            ];
         },
         disabled() {
             return this.$attrs.disabled || this.loading;
         },
         defaultAriaLabel() {
-            return (this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label']);
+            return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/calendar/Calendar.d.ts b/components/calendar/Calendar.d.ts
index 28b812226..c489e9869 100755
--- a/components/calendar/Calendar.d.ts
+++ b/components/calendar/Calendar.d.ts
@@ -3,7 +3,7 @@ import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type CalendarValueType = Date | Date[] | undefined;
 
-type CalendarSlotDateType = { day: number; month: number; year: number; today: boolean; selectable: boolean }
+type CalendarSlotDateType = { day: number; month: number; year: number; today: boolean; selectable: boolean };
 
 type CalendarSelectionModeType = 'single' | 'multiple' | 'range' | undefined;
 
@@ -330,7 +330,7 @@ export declare type CalendarEmits = {
      * Callback to invoke when input field is being typed.
      * @param {Event} event - Browser event
      */
-    'input': (event: Event) => void;
+    input: (event: Event) => void;
     /**
      * Callback to invoke when a date is selected.
      * @param {Date} value - Selected value.
@@ -339,11 +339,11 @@ export declare type CalendarEmits = {
     /**
      * Callback to invoke when datepicker panel is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when datepicker panel is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke when today button is clicked.
      * @param {Date} date - Today as a date instance.
@@ -368,23 +368,23 @@ export declare type CalendarEmits = {
      * Callback to invoke on focus of input field.
      * @param {Event} event - Focus event
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke on blur of input field.
      * @param {CalendarBlurEvent} event - Blur event
      */
-    'blur': (event: CalendarBlurEvent) => void;
+    blur: (event: CalendarBlurEvent) => void;
     /**
      * Callback to invoke when a key is pressed.
      */
-    'keydown': (event: Event) => void;
-}
+    keydown: (event: Event) => void;
+};
 
-declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> { }
+declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Calendar: GlobalComponentConstructor<Calendar>
+        Calendar: GlobalComponentConstructor<Calendar>;
     }
 }
 
@@ -394,7 +394,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Calendar](https://www.primefaces.org/primevue/showcase/#/calendar)
+ * - [Calendar](https://www.primefaces.org/primevue/calendar)
  *
  */
 export default Calendar;
diff --git a/components/calendar/Calendar.spec.js b/components/calendar/Calendar.spec.js
index 85470bb6d..6787b4d7f 100644
--- a/components/calendar/Calendar.spec.js
+++ b/components/calendar/Calendar.spec.js
@@ -18,7 +18,7 @@ describe('Calendar.vue', () => {
             }
         });
     });
-    it('should exist', async() => {
+    it('should exist', async () => {
         expect(wrapper.find('.p-calendar.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-inputtext').exists()).toBe(true);
 
@@ -35,19 +35,20 @@ describe('Calendar.vue', () => {
     it('should select a date', async () => {
         await wrapper.setProps({ inline: true });
 
-        const event = {day: 8, month: 2, year: 2022, today: false, selectable: true};
+        const event = { day: 8, month: 2, year: 2022, today: false, selectable: true };
 
         const onDateSelect = jest.spyOn(wrapper.vm, 'onDateSelect');
 
-        await wrapper.vm.onDateSelect({currentTarget: {focus: () => {}}}, event);
-        expect(onDateSelect).toHaveBeenCalled()
+        await wrapper.vm.onDateSelect({ currentTarget: { focus: () => {} } }, event);
+        expect(onDateSelect).toHaveBeenCalled();
     });
     it('should calculate the correct view date when in range mode', async () => {
         const dateOne = new Date();
         const dateTwo = new Date();
-        dateTwo.setFullYear(dateOne.getFullYear(), dateOne.getMonth(), dateOne.getDate() + 1)
-        await wrapper.setProps({ selectionMode: 'range',  showTime: true, modelValue: [dateOne, dateTwo]  });
 
-        expect(wrapper.vm.viewDate).toEqual(dateTwo)
+        dateTwo.setFullYear(dateOne.getFullYear(), dateOne.getMonth(), dateOne.getDate() + 1);
+        await wrapper.setProps({ selectionMode: 'range', showTime: true, modelValue: [dateOne, dateTwo] });
+
+        expect(wrapper.vm.viewDate).toEqual(dateTwo);
     });
 });
diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 36ddf47c8..a40c09180 100755
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -1,66 +1,148 @@
 <template>
     <span ref="container" :id="id" :class="containerClass">
-        <input :ref="inputRef" v-if="!inline" type="text" role="combobox" :id="inputId" :class="['p-inputtext p-component', inputClass]" :style="inputStyle" :placeholder="placeholder"
-            aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" inputmode="none" 
-            @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" :tabindex="0" v-bind="inputProps">
-        <CalendarButton v-if="showIcon" :icon="icon" class="p-datepicker-trigger" :disabled="disabled" @click="onButtonClick" type="button" :aria-label="$primevue.config.locale.chooseDate" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId"/>
+        <input
+            v-if="!inline"
+            :ref="inputRef"
+            :id="inputId"
+            type="text"
+            role="combobox"
+            :class="['p-inputtext p-component', inputClass]"
+            :style="inputStyle"
+            :placeholder="placeholder"
+            aria-autocomplete="none"
+            aria-haspopup="dialog"
+            :aria-expanded="overlayVisible"
+            :aria-controls="panelId"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            inputmode="none"
+            :disabled="disabled"
+            :readonly="!manualInput"
+            :tabindex="0"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeyDown"
+            v-bind="inputProps"
+        />
+        <CalendarButton
+            v-if="showIcon"
+            :icon="icon"
+            class="p-datepicker-trigger"
+            :disabled="disabled"
+            @click="onButtonClick"
+            type="button"
+            :aria-label="$primevue.config.locale.chooseDate"
+            aria-haspopup="dialog"
+            :aria-expanded="overlayVisible"
+            :aria-controls="panelId"
+        />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
-                <div :ref="overlayRef" :id="panelId" :class="panelStyleClass" :style=panelStyle v-if="inline || overlayVisible" :role="inline ? null : 'dialog'" :aria-modal="inline ? null : 'true'" :aria-label="$primevue.config.locale.chooseDate"
-                    @click="onOverlayClick" @keydown="onOverlayKeyDown" @mouseup="onOverlayMouseUp" v-bind="panelProps">
+                <div
+                    v-if="inline || overlayVisible"
+                    :ref="overlayRef"
+                    :id="panelId"
+                    :class="panelStyleClass"
+                    :style="panelStyle"
+                    :role="inline ? null : 'dialog'"
+                    :aria-modal="inline ? null : 'true'"
+                    :aria-label="$primevue.config.locale.chooseDate"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    @mouseup="onOverlayMouseUp"
+                    v-bind="panelProps"
+                >
                     <template v-if="!timeOnly">
                         <div class="p-datepicker-group-container">
-                            <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
+                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" class="p-datepicker-group">
                                 <div class="p-datepicker-header">
                                     <slot name="header"></slot>
-                                    <button class="p-datepicker-prev p-link" v-show="showOtherMonths ? groupIndex === 0 : false" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="disabled" :aria-label=" currentView === 'year' ? $primevue.config.locale.prevDecade: currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth">
+                                    <button
+                                        v-show="showOtherMonths ? groupIndex === 0 : false"
+                                        v-ripple
+                                        class="p-datepicker-prev p-link"
+                                        @click="onPrevButtonClick"
+                                        type="button"
+                                        @keydown="onContainerButtonKeydown"
+                                        :disabled="disabled"
+                                        :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
+                                    >
                                         <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                     </button>
                                     <div class="p-datepicker-title">
-                                        <button type="button" @click="switchToMonthView" @keydown="onContainerButtonKeydown" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="switchViewButtonDisabled" :aria-label="$primevue.config.locale.chooseMonth">
-                                            {{getMonthName(month.month)}}
+                                        <button
+                                            v-if="currentView === 'date'"
+                                            type="button"
+                                            @click="switchToMonthView"
+                                            @keydown="onContainerButtonKeydown"
+                                            class="p-datepicker-month p-link"
+                                            :disabled="switchViewButtonDisabled"
+                                            :aria-label="$primevue.config.locale.chooseMonth"
+                                        >
+                                            {{ getMonthName(month.month) }}
                                         </button>
-                                        <button type="button" @click="switchToYearView" @keydown="onContainerButtonKeydown" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="switchViewButtonDisabled" :aria-label="$primevue.config.locale.chooseYear">
-                                            {{getYear(month)}}
+                                        <button
+                                            v-if="currentView !== 'year'"
+                                            type="button"
+                                            @click="switchToYearView"
+                                            @keydown="onContainerButtonKeydown"
+                                            class="p-datepicker-year p-link"
+                                            :disabled="switchViewButtonDisabled"
+                                            :aria-label="$primevue.config.locale.chooseYear"
+                                        >
+                                            {{ getYear(month) }}
                                         </button>
-                                        <span class="p-datepicker-decade" v-if="currentView === 'year'">
-                                            <slot name="decade" :years="yearPickerValues">
-                                                {{yearPickerValues[0]}} - {{yearPickerValues[yearPickerValues.length - 1]}}
-                                            </slot>
+                                        <span v-if="currentView === 'year'" class="p-datepicker-decade">
+                                            <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0] }} - {{ yearPickerValues[yearPickerValues.length - 1] }} </slot>
                                         </span>
                                     </div>
-                                    <button class="p-datepicker-next p-link" v-show="showOtherMonths ? numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1) : false"
-                                        @click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="disabled" :aria-label=" currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth">
+                                    <button
+                                        v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
+                                        v-ripple
+                                        class="p-datepicker-next p-link"
+                                        @click="onNextButtonClick"
+                                        type="button"
+                                        @keydown="onContainerButtonKeydown"
+                                        :disabled="disabled"
+                                        :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
+                                    >
                                         <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                     </button>
                                 </div>
-                                <div class="p-datepicker-calendar-container" v-if="currentView ==='date'">
+                                <div v-if="currentView === 'date'" class="p-datepicker-calendar-container">
                                     <table class="p-datepicker-calendar" role="grid">
                                         <thead>
                                             <tr>
-                                                <th scope="col" v-if="showWeek" class="p-datepicker-weekheader p-disabled">
-                                                    <span>{{weekHeaderLabel}}</span>
+                                                <th v-if="showWeek" scope="col" class="p-datepicker-weekheader p-disabled">
+                                                    <span>{{ weekHeaderLabel }}</span>
                                                 </th>
-                                                <th scope="col" v-for="weekDay of weekDays" :key="weekDay" :abbr="weekDay">
-                                                    <span>{{weekDay}}</span>
+                                                <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay">
+                                                    <span>{{ weekDay }}</span>
                                                 </th>
                                             </tr>
                                         </thead>
                                         <tbody>
-                                            <tr v-for="(week,i) of month.dates" :key="week[0].day + '' + week[0].month">
+                                            <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month">
                                                 <td v-if="showWeek" class="p-datepicker-weeknumber">
                                                     <span class="p-disabled">
-                                                        <span style="visibility:hidden" v-if="month.weekNumbers[i] < 10">0</span>
-                                                        {{month.weekNumbers[i]}}
+                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden">0</span>
+                                                        {{ month.weekNumbers[i] }}
                                                     </span>
                                                 </td>
-                                                <td v-for="date of week" :aria-label="date.day" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
-                                                    <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" @click="onDateSelect($event, date)"
-                                                        draggable="false" @keydown="onDateCellKeydown($event,date,groupIndex)" v-ripple :aria-selected="isSelected(date)">
-                                                        <slot name="date" :date="date">{{date.day}}</slot>
+                                                <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
+                                                    <span
+                                                        v-ripple
+                                                        :class="{ 'p-highlight': isSelected(date), 'p-disabled': !date.selectable }"
+                                                        @click="onDateSelect($event, date)"
+                                                        draggable="false"
+                                                        @keydown="onDateCellKeydown($event, date, groupIndex)"
+                                                        :aria-selected="isSelected(date)"
+                                                    >
+                                                        <slot name="date" :date="date">{{ date.day }}</slot>
                                                     </span>
                                                     <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
-                                                        {{date.day}}
+                                                        {{ date.day }}
                                                     </div>
                                                 </td>
                                             </tr>
@@ -69,81 +151,155 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="p-monthpicker" v-if="currentView === 'month'">
-                            <span v-for="(m,i) of monthPickerValues" :key="m" @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event,i)"
-                                    class="p-monthpicker-month" :class="{'p-highlight': isMonthSelected(i)}" v-ripple>
-                                {{m}}
+                        <div v-if="currentView === 'month'" class="p-monthpicker">
+                            <span v-for="(m, i) of monthPickerValues" :key="m" v-ripple @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event, i)" class="p-monthpicker-month" :class="{ 'p-highlight': isMonthSelected(i) }">
+                                {{ m }}
                                 <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
-                                    {{m}}
+                                    {{ m }}
                                 </div>
                             </span>
                         </div>
-                        <div class="p-yearpicker" v-if="currentView === 'year'">
-                            <span v-for="y of yearPickerValues" :key="y" @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event,y)"
-                                    class="p-yearpicker-year" :class="{'p-highlight': isYearSelected(y)}" v-ripple>
-                                {{y}}
+                        <div v-if="currentView === 'year'" class="p-yearpicker">
+                            <span v-for="y of yearPickerValues" :key="y" v-ripple @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event, y)" class="p-yearpicker-year" :class="{ 'p-highlight': isYearSelected(y) }">
+                                {{ y }}
                                 <div v-if="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
-                                    {{y}}
+                                    {{ y }}
                                 </div>
                             </span>
                         </div>
                     </template>
-                    <div class="p-timepicker" v-if="(showTime||timeOnly) && currentView === 'date'">
+                    <div v-if="(showTime || timeOnly) && currentView === 'date'" class="p-timepicker">
                         <div class="p-hour-picker">
-                            <button class="p-link" :aria-label="$primevue.config.locale.nextHour" @mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)" @keydown.space="onTimePickerElementMouseDown($event, 0, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.nextHour"
+                                @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 0, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-up"></span>
                             </button>
-                            <span>{{formattedCurrentHour}}</span>
-                            <button class="p-link" :aria-label="$primevue.config.locale.prevHour" @mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 0, -1)" @keydown.space="onTimePickerElementMouseDown($event, 0, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                            <span>{{ formattedCurrentHour }}</span>
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.prevHour"
+                                @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 0, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 0, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-down"></span>
                             </button>
                         </div>
                         <div class="p-separator">
-                            <span>{{timeSeparator}}</span>
+                            <span>{{ timeSeparator }}</span>
                         </div>
                         <div class="p-minute-picker">
-                            <button class="p-link" :aria-label="$primevue.config.locale.nextMinute" @mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple :disabled="disabled"
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"  @keydown.space="onTimePickerElementMouseDown($event, 1, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.nextMinute"
+                                @mousedown="onTimePickerElementMouseDown($event, 1, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                :disabled="disabled"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 1, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-up"></span>
                             </button>
-                        <span>{{formattedCurrentMinute}}</span>
-                            <button class="p-link" :aria-label="$primevue.config.locale.prevMinute" @mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple :disabled="disabled"
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)" @keydown.space="onTimePickerElementMouseDown($event, 1, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                            <span>{{ formattedCurrentMinute }}</span>
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.prevMinute"
+                                @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                :disabled="disabled"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 1, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-down"></span>
                             </button>
                         </div>
-                        <div class="p-separator" v-if="showSeconds">
-                            <span>{{timeSeparator}}</span>
+                        <div v-if="showSeconds" class="p-separator">
+                            <span>{{ timeSeparator }}</span>
                         </div>
-                        <div class="p-second-picker" v-if="showSeconds">
-                            <button class="p-link" :aria-label="$primevue.config.locale.nextSecond" @mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple  :disabled="disabled"
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)" @keydown.space="onTimePickerElementMouseDown($event, 2, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                        <div v-if="showSeconds" class="p-second-picker">
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.nextSecond"
+                                @mousedown="onTimePickerElementMouseDown($event, 2, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                :disabled="disabled"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 2, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-up"></span>
                             </button>
-                            <span>{{formattedCurrentSecond}}</span>
-                            <button class="p-link" :aria-label="$primevue.config.locale.prevSecond" @mousedown="onTimePickerElementMouseDown($event, 2, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple  :disabled="disabled"
-                                @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)" @keydown.space="onTimePickerElementMouseDown($event, 2, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
+                            <span>{{ formattedCurrentSecond }}</span>
+                            <button
+                                v-ripple
+                                class="p-link"
+                                :aria-label="$primevue.config.locale.prevSecond"
+                                @mousedown="onTimePickerElementMouseDown($event, 2, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                :disabled="disabled"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 2, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                type="button"
+                            >
                                 <span class="pi pi-chevron-down"></span>
                             </button>
                         </div>
-                        <div class="p-separator" v-if="hourFormat=='12'">
-                            <span>{{timeSeparator}}</span>
+                        <div v-if="hourFormat == '12'" class="p-separator">
+                            <span>{{ timeSeparator }}</span>
                         </div>
-                        <div class="p-ampm-picker" v-if="hourFormat=='12'">
-                            <button class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" v-ripple :disabled="disabled">
+                        <div v-if="hourFormat == '12'" class="p-ampm-picker">
+                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
                                 <span class="pi pi-chevron-up"></span>
                             </button>
-                            <span>{{pm ? 'PM' : 'AM'}}</span>
-                            <button class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" v-ripple :disabled="disabled">
+                            <span>{{ pm ? 'PM' : 'AM' }}</span>
+                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
                                 <span class="pi pi-chevron-down"></span>
                             </button>
                         </div>
                     </div>
-                    <div class="p-datepicker-buttonbar" v-if="showButtonBar">
-                        <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
-                        <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
+                    <div v-if="showButtonBar" class="p-datepicker-buttonbar">
+                        <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
+                        <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
                     </div>
                     <slot name="footer"></slot>
                 </div>
@@ -153,7 +309,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
@@ -321,17 +477,41 @@ export default {
             type: String,
             default: null
         },
-        id: null,
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
-        panelClass: null,
-        panelStyle: null,
-        panelProps: null,
+        id: {
+            type: String,
+            default: null
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -350,6 +530,55 @@ export default {
     timePickerTimer: null,
     preventFocus: false,
     typeUpdate: false,
+    data() {
+        return {
+            currentMonth: null,
+            currentYear: null,
+            currentHour: null,
+            currentMinute: null,
+            currentSecond: null,
+            pm: null,
+            focused: false,
+            overlayVisible: false,
+            currentView: this.view
+        };
+    },
+    watch: {
+        modelValue(newValue) {
+            this.updateCurrentMetaData();
+
+            if (!this.typeUpdate && !this.inline && this.input) {
+                this.input.value = this.formatValue(newValue);
+            }
+
+            this.typeUpdate = false;
+        },
+        showTime() {
+            this.updateCurrentMetaData();
+        },
+        months() {
+            if (this.overlay) {
+                if (!this.focused) {
+                    if (this.inline) {
+                        this.preventFocus = true;
+                    }
+
+                    setTimeout(this.updateFocus, 0);
+                }
+            }
+        },
+        numberOfMonths() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        },
+        responsiveOptions() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        },
+        currentView() {
+            Promise.resolve(null).then(() => this.alignOverlay());
+        }
+    },
     created() {
         this.updateCurrentMetaData();
     },
@@ -367,8 +596,7 @@ export default {
                     this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
                 }
             }
-        }
-        else {
+        } else {
             this.input.value = this.formatValue(this.modelValue);
         }
     },
@@ -393,6 +621,7 @@ export default {
         if (this.mask) {
             this.destroyMask();
         }
+
         this.destroyResponsiveStyleElement();
 
         this.unbindOutsideClickListener();
@@ -406,51 +635,9 @@ export default {
         if (this.overlay && this.autoZIndex) {
             ZIndexUtils.clear(this.overlay);
         }
+
         this.overlay = null;
     },
-    data() {
-        return {
-            currentMonth: null,
-            currentYear: null,
-            currentHour: null,
-            currentMinute: null,
-            currentSecond: null,
-            pm: null,
-			focused: false,
-            overlayVisible: false,
-            currentView: this.view
-        }
-    },
-    watch: {
-        modelValue(newValue) {
-            this.updateCurrentMetaData();
-            if (!this.typeUpdate && !this.inline && this.input) {
-                this.input.value = this.formatValue(newValue);
-            }
-            this.typeUpdate = false;
-        },
-        showTime() {
-            this.updateCurrentMetaData();
-        },
-        months() {
-            if (this.overlay) {
-                if (!this.focused) {
-                    setTimeout(this.updateFocus, 0);
-                }
-            }
-        },
-        numberOfMonths() {
-            this.destroyResponsiveStyleElement();
-            this.createResponsiveStyle();
-        },
-        responsiveOptions() {
-            this.destroyResponsiveStyleElement();
-            this.createResponsiveStyle();
-        },
-        currentView() {
-            Promise.resolve(null).then(() => this.alignOverlay());
-        }
-    },
     methods: {
         isComparable() {
             return this.modelValue != null && typeof this.modelValue !== 'string';
@@ -463,25 +650,23 @@ export default {
             if (this.modelValue) {
                 if (this.isSingleSelection()) {
                     return this.isDateEquals(this.modelValue, dateMeta);
-                }
-                else if (this.isMultipleSelection()) {
+                } else if (this.isMultipleSelection()) {
                     let selected = false;
+
                     for (let date of this.modelValue) {
                         selected = this.isDateEquals(date, dateMeta);
+
                         if (selected) {
                             break;
                         }
                     }
 
                     return selected;
-                }
-                else if (this.isRangeSelection()) {
-                    if (this.modelValue[1])
-                        return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
+                } else if (this.isRangeSelection()) {
+                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
                     else {
                         return this.isDateEquals(this.modelValue[0], dateMeta);
                     }
-
                 }
             }
 
@@ -491,7 +676,7 @@ export default {
             if (this.isComparable()) {
                 let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
 
-                return !this.isMultipleSelection() ? (value.getMonth() === month && value.getFullYear() === this.currentYear) : false;
+                return !this.isMultipleSelection() ? value.getMonth() === month && value.getFullYear() === this.currentYear : false;
             }
 
             return false;
@@ -500,21 +685,21 @@ export default {
             if (this.isComparable()) {
                 let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
 
-                return !this.isMultipleSelection() && this.isComparable() ? (value.getFullYear() === year) : false;
+                return !this.isMultipleSelection() && this.isComparable() ? value.getFullYear() === year : false;
             }
 
             return false;
         },
         isDateEquals(value, dateMeta) {
-            if (value)
-                return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
-            else
-                return false;
+            if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+            else return false;
         },
         isDateBetween(start, end, dateMeta) {
             let between = false;
+
             if (start && end) {
                 let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
                 return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
             }
 
@@ -522,11 +707,13 @@ export default {
         },
         getFirstDayOfMonthIndex(month, year) {
             let day = new Date();
+
             day.setDate(1);
             day.setMonth(month);
             day.setFullYear(year);
 
             let dayIndex = day.getDay() + this.sundayIndex;
+
             return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
         },
         getDaysCountInMonth(month, year) {
@@ -534,6 +721,7 @@ export default {
         },
         getDaysCountInPrevMonth(month, year) {
             let prev = this.getPreviousMonthAndYear(month, year);
+
             return this.getDaysCountInMonth(prev.month, prev.year);
         },
         getPreviousMonthAndYear(month, year) {
@@ -542,13 +730,12 @@ export default {
             if (month === 0) {
                 m = 11;
                 y = year - 1;
-            }
-            else {
+            } else {
                 m = month - 1;
                 y = year;
             }
 
-            return {'month':m, 'year': y};
+            return { month: m, year: y };
         },
         getNextMonthAndYear(month, year) {
             let m, y;
@@ -556,13 +743,12 @@ export default {
             if (month === 11) {
                 m = 0;
                 y = year + 1;
-            }
-            else {
+            } else {
                 m = month + 1;
                 y = year;
             }
 
-            return {'month':m,'year':y};
+            return { month: m, year: y };
         },
         daylightSavingAdjust(date) {
             if (!date) {
@@ -589,12 +775,10 @@ export default {
             if (this.minDate) {
                 if (this.minDate.getFullYear() > year) {
                     validMin = false;
-                }
-                else if (this.minDate.getFullYear() === year) {
+                } else if (this.minDate.getFullYear() === year) {
                     if (this.minDate.getMonth() > month) {
                         validMin = false;
-                    }
-                    else if (this.minDate.getMonth() === month) {
+                    } else if (this.minDate.getMonth() === month) {
                         if (this.minDate.getDate() > day) {
                             validMin = false;
                         }
@@ -605,12 +789,10 @@ export default {
             if (this.maxDate) {
                 if (this.maxDate.getFullYear() < year) {
                     validMax = false;
-                }
-                else if (this.maxDate.getFullYear() === year) {
+                } else if (this.maxDate.getFullYear() === year) {
                     if (this.maxDate.getMonth() < month) {
                         validMax = false;
-                    }
-                    else if (this.maxDate.getMonth() === month) {
+                    } else if (this.maxDate.getMonth() === month) {
                         if (this.maxDate.getDate() < day) {
                             validMax = false;
                         }
@@ -619,11 +801,11 @@ export default {
             }
 
             if (this.disabledDates) {
-                validDate = !this.isDateDisabled(day,month,year);
+                validDate = !this.isDateDisabled(day, month, year);
             }
 
             if (this.disabledDays) {
-                validDay = !this.isDayDisabled(day,month,year)
+                validDay = !this.isDayDisabled(day, month, year);
             }
 
             return validMin && validMax && validDate && validDay;
@@ -632,10 +814,8 @@ export default {
             el.setAttribute(this.attributeSelector, '');
 
             if (this.autoZIndex) {
-                if (this.touchUI)
-                    ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
-                else
-                    ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
+                if (this.touchUI) ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
             }
 
             this.alignOverlay();
@@ -665,14 +845,14 @@ export default {
             this.overlay = null;
         },
         onPrevButtonClick(event) {
-            if(this.showOtherMonths) {
-                this.navigationState = {backward: true, button: true};
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: true, button: true };
                 this.navBackward(event);
             }
         },
         onNextButtonClick(event) {
-            if(this.showOtherMonths) {
-                this.navigationState = {backward: false, button: true};
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: false, button: true };
                 this.navForward(event);
             }
         },
@@ -685,24 +865,20 @@ export default {
 
             if (this.currentView === 'month') {
                 this.decrementYear();
-            }
-            else if (this.currentView === 'year') {
+            } else if (this.currentView === 'year') {
                 this.decrementDecade();
-            }
-            else {
+            } else {
                 if (event.shiftKey) {
                     this.decrementYear();
-                }
-                else {
+                } else {
                     if (this.currentMonth === 0) {
                         this.currentMonth = 11;
                         this.decrementYear();
-                    }
-                    else {
+                    } else {
                         this.currentMonth--;
                     }
 
-                    this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
                 }
             }
         },
@@ -715,24 +891,20 @@ export default {
 
             if (this.currentView === 'month') {
                 this.incrementYear();
-            }
-            else if (this.currentView === 'year') {
+            } else if (this.currentView === 'year') {
                 this.incrementDecade();
-            }
-            else {
+            } else {
                 if (event.shiftKey) {
                     this.incrementYear();
-                }
-                else {
+                } else {
                     if (this.currentMonth === 11) {
                         this.currentMonth = 0;
                         this.incrementYear();
-                    }
-                    else {
+                    } else {
                         this.currentMonth++;
                     }
 
-                    this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
                 }
             }
         },
@@ -767,10 +939,8 @@ export default {
             if (this.hourFormat === '12') {
                 this.pm = currentHour > 11;
 
-                if (currentHour >= 12)
-                    currentHour = (currentHour == 12) ? 12 : currentHour - 12;
-                else
-                    currentHour = (currentHour == 0) ? 12 : currentHour;
+                if (currentHour >= 12) currentHour = currentHour == 12 ? 12 : currentHour - 12;
+                else currentHour = currentHour == 0 ? 12 : currentHour;
             }
 
             this.currentHour = Math.floor(currentHour / this.stepHour) * this.stepHour;
@@ -784,6 +954,7 @@ export default {
                         this.overlayVisible = false;
                     }
                 };
+
                 document.addEventListener('mousedown', this.outsideClickListener);
             }
         },
@@ -816,6 +987,7 @@ export default {
                         this.overlayVisible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -826,27 +998,27 @@ export default {
             }
         },
         isOutsideClicked(event) {
-            return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
-                    this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+            return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         },
         isNavIconClicked(event) {
-            return (DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon')
-                    || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
+            return (
+                DomHandler.hasClass(event.target, 'p-datepicker-prev') ||
+                DomHandler.hasClass(event.target, 'p-datepicker-prev-icon') ||
+                DomHandler.hasClass(event.target, 'p-datepicker-next') ||
+                DomHandler.hasClass(event.target, 'p-datepicker-next-icon')
+            );
         },
         alignOverlay() {
             if (this.touchUI) {
                 this.enableModality();
-            }
-            else if (this.overlay) {
+            } else if (this.overlay) {
                 if (this.appendTo === 'self' || this.inline) {
                     DomHandler.relativePosition(this.overlay, this.$el);
-                }
-                else {
+                } else {
                     if (this.view === 'date') {
                         this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
                         this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
-                    }
-                    else {
+                    } else {
                         this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
                     }
 
@@ -859,8 +1031,7 @@ export default {
                 if (!this.overlayVisible) {
                     this.input.focus();
                     this.overlayVisible = true;
-                }
-                else {
+                } else {
                     this.overlayVisible = false;
                 }
             }
@@ -880,41 +1051,42 @@ export default {
             if (this.disabledDays) {
                 let weekday = new Date(year, month, day);
                 let weekdayNumber = weekday.getDay();
+
                 return this.disabledDays.indexOf(weekdayNumber) !== -1;
             }
+
             return false;
         },
         onMonthDropdownChange(value) {
             this.currentMonth = parseInt(value);
-            this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+            this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
         },
         onYearDropdownChange(value) {
             this.currentYear = parseInt(value);
-            this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
+            this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
         },
         onDateSelect(event, dateMeta) {
             if (this.disabled || !dateMeta.selectable) {
                 return;
             }
 
-            DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(cell => cell.tabIndex = -1);
+            DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)').forEach((cell) => (cell.tabIndex = -1));
 
             if (event) {
                 event.currentTarget.focus();
             }
 
             if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-                let newValue = this.modelValue.filter(date => !this.isDateEquals(date, dateMeta));
+                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
+
                 this.updateModel(newValue);
-            }
-            else {
+            } else {
                 if (this.shouldSelectDate(dateMeta)) {
                     if (dateMeta.otherMonth) {
                         this.currentMonth = dateMeta.month;
                         this.currentYear = dateMeta.year;
                         this.selectDate(dateMeta);
-                    }
-                    else {
+                    } else {
                         this.selectDate(dateMeta);
                     }
                 }
@@ -931,10 +1103,8 @@ export default {
             let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
 
             if (this.showTime) {
-                if (this.hourFormat === '12' && this.pm && this.currentHour != 12)
-                    date.setHours(this.currentHour + 12);
-                else
-                    date.setHours(this.currentHour);
+                if (this.hourFormat === '12' && this.pm && this.currentHour != 12) date.setHours(this.currentHour + 12);
+                else date.setHours(this.currentHour);
 
                 date.setMinutes(this.currentMinute);
                 date.setSeconds(this.currentSecond);
@@ -958,25 +1128,22 @@ export default {
 
             if (this.isSingleSelection()) {
                 modelVal = date;
-            }
-            else if (this.isMultipleSelection()) {
+            } else if (this.isMultipleSelection()) {
                 modelVal = this.modelValue ? [...this.modelValue, date] : [date];
-            }
-            else if (this.isRangeSelection()) {
+            } else if (this.isRangeSelection()) {
                 if (this.modelValue && this.modelValue.length) {
                     let startDate = this.modelValue[0];
                     let endDate = this.modelValue[1];
 
                     if (!endDate && date.getTime() >= startDate.getTime()) {
                         endDate = date;
-                    }
-                    else {
+                    } else {
                         startDate = date;
                         endDate = null;
                     }
+
                     modelVal = [startDate, endDate];
-                }
-                else {
+                } else {
                     modelVal = [date, null];
                 }
             }
@@ -990,16 +1157,15 @@ export default {
                     this.overlayVisible = false;
                 }, 150);
             }
+
             this.$emit('date-select', date);
         },
         updateModel(value) {
             this.$emit('update:modelValue', value);
         },
         shouldSelectDate() {
-            if (this.isMultipleSelection())
-                return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
-            else
-                return true;
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
+            else return true;
         },
         isSingleSelection() {
             return this.selectionMode === 'single';
@@ -1016,33 +1182,34 @@ export default {
             }
 
             let formattedValue = '';
+
             if (value) {
                 try {
                     if (this.isSingleSelection()) {
                         formattedValue = this.formatDateTime(value);
-                    }
-                    else if (this.isMultipleSelection()) {
-                        for(let i = 0; i < value.length; i++) {
+                    } else if (this.isMultipleSelection()) {
+                        for (let i = 0; i < value.length; i++) {
                             let dateAsString = this.formatDateTime(value[i]);
+
                             formattedValue += dateAsString;
-                            if(i !== (value.length - 1)) {
+
+                            if (i !== value.length - 1) {
                                 formattedValue += ', ';
                             }
                         }
-                    }
-                    else if (this.isRangeSelection()) {
+                    } else if (this.isRangeSelection()) {
                         if (value && value.length) {
                             let startDate = value[0];
                             let endDate = value[1];
 
                             formattedValue = this.formatDateTime(startDate);
+
                             if (endDate) {
                                 formattedValue += ' - ' + this.formatDateTime(endDate);
                             }
                         }
                     }
-                }
-                catch(err) {
+                } catch (err) {
                     formattedValue = value;
                 }
             }
@@ -1051,13 +1218,14 @@ export default {
         },
         formatDateTime(date) {
             let formattedValue = null;
+
             if (date) {
-                if(this.timeOnly) {
+                if (this.timeOnly) {
                     formattedValue = this.formatTime(date);
-                }
-                else {
+                } else {
                     formattedValue = this.formatDate(date, this.datePattern);
-                    if(this.showTime) {
+
+                    if (this.showTime) {
                         formattedValue += ' ' + this.formatTime(date);
                     }
                 }
@@ -1071,32 +1239,38 @@ export default {
             }
 
             let iFormat;
+
             const lookAhead = (match) => {
-                const matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
-                if (matches) {
-                    iFormat++;
-                }
-                return matches;
-            },
+                    const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                    if (matches) {
+                        iFormat++;
+                    }
+
+                    return matches;
+                },
                 formatNumber = (match, value, len) => {
                     let num = '' + value;
+
                     if (lookAhead(match)) {
                         while (num.length < len) {
                             num = '0' + num;
                         }
                     }
+
                     return num;
                 },
                 formatName = (match, value, shortNames, longNames) => {
-                    return (lookAhead(match) ? longNames[value] : shortNames[value]);
+                    return lookAhead(match) ? longNames[value] : shortNames[value];
                 };
+
             let output = '';
             let literal = false;
 
             if (date) {
                 for (iFormat = 0; iFormat < format.length; iFormat++) {
                     if (literal) {
-                        if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
+                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
                             literal = false;
                         } else {
                             output += format.charAt(iFormat);
@@ -1110,16 +1284,13 @@ export default {
                                 output += formatName('D', date.getDay(), this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
                                 break;
                             case 'o':
-                                output += formatNumber('o',
-                                Math.round((
-                                    new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() -
-                                    new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                                output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
                                 break;
                             case 'm':
                                 output += formatNumber('m', date.getMonth() + 1, 2);
                                 break;
                             case 'M':
-                                output += formatName('M',date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                                output += formatName('M', date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
                                 break;
                             case 'y':
                                 output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
@@ -1130,12 +1301,13 @@ export default {
                             case '!':
                                 output += date.getTime() * 10000 + this.ticksTo1970;
                                 break;
-                            case '\'':
-                                if (lookAhead('\'')) {
-                                    output += '\'';
+                            case "'":
+                                if (lookAhead("'")) {
+                                    output += "'";
                                 } else {
                                     literal = true;
                                 }
+
                                 break;
                             default:
                                 output += format.charAt(iFormat);
@@ -1143,6 +1315,7 @@ export default {
                     }
                 }
             }
+
             return output;
         },
         formatTime(date) {
@@ -1160,17 +1333,17 @@ export default {
             }
 
             if (this.hourFormat === '12') {
-                output += hours === 0 ? 12 : (hours < 10) ? '0' + hours : hours;
-            }
-            else {
-                output += (hours < 10) ? '0' + hours : hours;
+                output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
+            } else {
+                output += hours < 10 ? '0' + hours : hours;
             }
+
             output += ':';
-            output += (minutes < 10) ? '0' + minutes : minutes;
+            output += minutes < 10 ? '0' + minutes : minutes;
 
             if (this.showSeconds) {
                 output += ':';
-                output += (seconds < 10) ? '0' + seconds : seconds;
+                output += seconds < 10 ? '0' + seconds : seconds;
             }
 
             if (this.hourFormat === '12') {
@@ -1217,44 +1390,39 @@ export default {
             this.clearTimePickerTimer();
         },
         repeat(event, interval, type, direction) {
-            let i = interval||500;
+            let i = interval || 500;
 
             this.clearTimePickerTimer();
             this.timePickerTimer = setTimeout(() => {
                 this.repeat(event, 100, type, direction);
             }, i);
 
-            switch(type) {
+            switch (type) {
                 case 0:
-                    if (direction === 1)
-                        this.incrementHour(event);
-                    else
-                        this.decrementHour(event);
-                break;
+                    if (direction === 1) this.incrementHour(event);
+                    else this.decrementHour(event);
+                    break;
 
                 case 1:
-                    if (direction === 1)
-                        this.incrementMinute(event);
-                    else
-                        this.decrementMinute(event);
-                break;
+                    if (direction === 1) this.incrementMinute(event);
+                    else this.decrementMinute(event);
+                    break;
 
                 case 2:
-                    if (direction === 1)
-                        this.incrementSecond(event);
-                    else
-                        this.decrementSecond(event);
-                break;
+                    if (direction === 1) this.incrementSecond(event);
+                    else this.decrementSecond(event);
+                    break;
             }
         },
         convertTo24Hour(hours, pm) {
             if (this.hourFormat == '12') {
                 if (hours === 12) {
-                    return (pm ? 12 : 0);
+                    return pm ? 12 : 0;
                 } else {
-                    return (pm ? hours + 12 : hours);
+                    return pm ? hours + 12 : hours;
                 }
             }
+
             return hours;
         },
         validateTime(hour, minute, second, pm) {
@@ -1264,18 +1432,23 @@ export default {
             if (this.isRangeSelection()) {
                 value = this.modelValue[1] || this.modelValue[0];
             }
+
             if (this.isMultipleSelection()) {
                 value = this.modelValue[this.modelValue.length - 1];
             }
+
             const valueDateString = value ? value.toDateString() : null;
+
             if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
                 if (this.minDate.getHours() > convertedHour) {
                     return false;
                 }
+
                 if (this.minDate.getHours() === convertedHour) {
                     if (this.minDate.getMinutes() > minute) {
                         return false;
                     }
+
                     if (this.minDate.getMinutes() === minute) {
                         if (this.minDate.getSeconds() > second) {
                             return false;
@@ -1288,10 +1461,12 @@ export default {
                 if (this.maxDate.getHours() < convertedHour) {
                     return false;
                 }
+
                 if (this.maxDate.getHours() === convertedHour) {
                     if (this.maxDate.getMinutes() < minute) {
                         return false;
                     }
+
                     if (this.maxDate.getMinutes() === minute) {
                         if (this.maxDate.getSeconds() < second) {
                             return false;
@@ -1299,6 +1474,7 @@ export default {
                     }
                 }
             }
+
             return true;
         },
         incrementHour(event) {
@@ -1306,51 +1482,58 @@ export default {
             let newHour = this.currentHour + this.stepHour;
             let newPM = this.pm;
 
-            if (this.hourFormat == '24')
-                newHour = (newHour >= 24) ? (newHour - 24) : newHour;
+            if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
             else if (this.hourFormat == '12') {
                 // Before the AM/PM break, now after
                 if (prevHour < 12 && newHour > 11) {
-                    newPM= !this.pm;
+                    newPM = !this.pm;
                 }
-                newHour = (newHour >= 13) ? (newHour - 12) : newHour;
+
+                newHour = newHour >= 13 ? newHour - 12 : newHour;
             }
 
             if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
                 this.currentHour = newHour;
                 this.pm = newPM;
             }
+
             event.preventDefault();
         },
         decrementHour(event) {
             let newHour = this.currentHour - this.stepHour;
             let newPM = this.pm;
 
-            if (this.hourFormat == '24')
-                newHour = (newHour < 0) ? (24 + newHour) : newHour;
+            if (this.hourFormat == '24') newHour = newHour < 0 ? 24 + newHour : newHour;
             else if (this.hourFormat == '12') {
                 // If we were at noon/midnight, then switch
                 if (this.currentHour === 12) {
                     newPM = !this.pm;
                 }
-                newHour = (newHour <= 0) ? (12 + newHour) : newHour;
+
+                newHour = newHour <= 0 ? 12 + newHour : newHour;
             }
+
             if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
                 this.currentHour = newHour;
                 this.pm = newPM;
             }
+
             event.preventDefault();
         },
         incrementMinute(event) {
             let newMinute = this.currentMinute + this.stepMinute;
+
             if (this.validateTime(this.currentHour, newMinute, this.currentSecond, true)) {
-                this.currentMinute = (newMinute > 59) ? newMinute - 60 : newMinute;
+                this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
             }
+
             event.preventDefault();
         },
         decrementMinute(event) {
             let newMinute = this.currentMinute - this.stepMinute;
-            newMinute = (newMinute < 0) ? 60 + newMinute : newMinute;
+
+            newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
+
             if (this.validateTime(this.currentHour, newMinute, this.currentSecond, true)) {
                 this.currentMinute = newMinute;
             }
@@ -1359,15 +1542,18 @@ export default {
         },
         incrementSecond(event) {
             let newSecond = this.currentSecond + this.stepSecond;
+
             if (this.validateTime(this.currentHour, this.currentMinute, newSecond, true)) {
-                this.currentSecond = (newSecond > 59) ? newSecond - 60 : newSecond;
+                this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
             }
 
             event.preventDefault();
         },
         decrementSecond(event) {
             let newSecond = this.currentSecond - this.stepSecond;
-            newSecond = (newSecond < 0) ? 60 + newSecond : newSecond;
+
+            newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
+
             if (this.validateTime(this.currentHour, this.currentMinute, newSecond, true)) {
                 this.currentSecond = newSecond;
             }
@@ -1381,18 +1567,17 @@ export default {
             if (this.isRangeSelection()) {
                 value = this.modelValue[1] || this.modelValue[0];
             }
+
             if (this.isMultipleSelection()) {
                 value = this.modelValue[this.modelValue.length - 1];
             }
+
             value = value ? new Date(value.getTime()) : new Date();
 
             if (this.hourFormat == '12') {
-                if (this.currentHour === 12)
-                    value.setHours(this.pm ? 12 : 0);
-                else
-                    value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
-            }
-            else {
+                if (this.currentHour === 12) value.setHours(this.pm ? 12 : 0);
+                else value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
+            } else {
                 value.setHours(this.currentHour);
             }
 
@@ -1400,19 +1585,17 @@ export default {
             value.setSeconds(this.currentSecond);
 
             if (this.isRangeSelection()) {
-                if (this.modelValue[1])
-                    value = [this.modelValue[0], value];
-                else
-                    value = [value, null];
+                if (this.modelValue[1]) value = [this.modelValue[0], value];
+                else value = [value, null];
             }
 
-            if (this.isMultipleSelection()){
+            if (this.isMultipleSelection()) {
                 value = [...this.modelValue.slice(0, -1), value];
             }
 
             this.updateModel(value);
             this.$emit('date-select', value);
-            setTimeout(() => this.timePickerChange = false, 0);
+            setTimeout(() => (this.timePickerChange = false), 0);
         },
         toggleAMPM(event) {
             this.pm = !this.pm;
@@ -1426,24 +1609,22 @@ export default {
         },
         onMonthSelect(event, index) {
             if (this.view === 'month') {
-                this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true});
-            }
-            else {
+                this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
+            } else {
                 this.currentMonth = index;
                 this.currentView = 'date';
-                this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+                this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
             }
 
             setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
             if (this.view === 'year') {
-                this.onDateSelect(event, {year: year, month: 0, day: 1, selectable: true});
-            }
-            else {
+                this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+            } else {
                 this.currentYear = year;
                 this.currentView = 'month';
-                this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
+                this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
             }
 
             setTimeout(this.updateFocus, 0);
@@ -1457,6 +1638,7 @@ export default {
                 this.maskClickListener = () => {
                     this.overlayVisible = false;
                 };
+
                 this.mask.addEventListener('click', this.maskClickListener);
 
                 document.body.appendChild(this.mask);
@@ -1479,9 +1661,11 @@ export default {
 
             let bodyChildren = document.body.children;
             let hasBlockerMasks;
+
             for (let i = 0; i < bodyChildren.length; i++) {
                 let bodyChild = bodyChildren[i];
-                if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+
+                if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
                     hasBlockerMasks = true;
                     break;
                 }
@@ -1493,6 +1677,7 @@ export default {
         },
         updateCurrentMetaData() {
             const viewDate = this.viewDate;
+
             this.currentMonth = viewDate.getMonth();
             this.currentYear = viewDate.getFullYear();
 
@@ -1506,15 +1691,17 @@ export default {
             }
 
             let isValid = true;
+
             if (this.isSingleSelection()) {
                 if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
                     isValid = false;
                 }
-            } else if (value.every(v => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
+            } else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
                 if (this.isRangeSelection()) {
                     isValid = value.length > 1 && value[1] > value[0] ? true : false;
                 }
             }
+
             return isValid;
         },
         parseValue(text) {
@@ -1526,17 +1713,19 @@ export default {
 
             if (this.isSingleSelection()) {
                 value = this.parseDateTime(text);
-            }
-            else if (this.isMultipleSelection()) {
+            } else if (this.isMultipleSelection()) {
                 let tokens = text.split(',');
+
                 value = [];
+
                 for (let token of tokens) {
                     value.push(this.parseDateTime(token.trim()));
                 }
-            }
-            else if (this.isRangeSelection()) {
+            } else if (this.isRangeSelection()) {
                 let tokens = text.split(' - ');
+
                 value = [];
+
                 for (let i = 0; i < tokens.length; i++) {
                     value[i] = this.parseDateTime(tokens[i].trim());
                 }
@@ -1551,14 +1740,13 @@ export default {
             if (this.timeOnly) {
                 date = new Date();
                 this.populateTime(date, parts[0], parts[1]);
-            }
-            else {
+            } else {
                 const dateFormat = this.datePattern;
+
                 if (this.showTime) {
                     date = this.parseDate(parts[0], dateFormat);
                     this.populateTime(date, parts[1], parts[2]);
-                }
-                else {
+                } else {
                     date = this.parseDate(text, dateFormat);
                 }
             }
@@ -1570,8 +1758,9 @@ export default {
                 throw 'Invalid Time';
             }
 
-            this.pm = (ampm === 'PM' || ampm === 'pm');
+            this.pm = ampm === 'PM' || ampm === 'pm';
             let time = this.parseTime(timeString);
+
             value.setHours(time.hour);
             value.setMinutes(time.minute);
             value.setSeconds(time.second);
@@ -1579,10 +1768,10 @@ export default {
         parseTime(value) {
             let tokens = value.split(':');
             let validTokenLength = this.showSeconds ? 3 : 2;
-            let regex = (/^[0-9][0-9]$/);
+            let regex = /^[0-9][0-9]$/;
 
             if (tokens.length !== validTokenLength || !tokens[0].match(regex) || !tokens[1].match(regex) || (this.showSeconds && !tokens[2].match(regex))) {
-                throw "Invalid time";
+                throw 'Invalid time';
             }
 
             let h = parseInt(tokens[0]);
@@ -1590,88 +1779,97 @@ export default {
             let s = this.showSeconds ? parseInt(tokens[2]) : null;
 
             if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
-                throw "Invalid time";
-            }
-            else {
+                throw 'Invalid time';
+            } else {
                 if (this.hourFormat == '12' && h !== 12 && this.pm) {
-                    h+= 12;
+                    h += 12;
                 }
 
-                return {hour: h, minute: m, second: s};
+                return { hour: h, minute: m, second: s };
             }
         },
         parseDate(value, format) {
             if (format == null || value == null) {
-                throw "Invalid arguments";
+                throw 'Invalid arguments';
             }
 
-            value = (typeof value === "object" ? value.toString() : value + "");
-            if (value === "") {
+            value = typeof value === 'object' ? value.toString() : value + '';
+
+            if (value === '') {
                 return null;
             }
 
-            let iFormat, dim, extra,
-            iValue = 0,
-            shortYearCutoff = (typeof this.shortYearCutoff !== "string" ? this.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(this.shortYearCutoff, 10)),
-            year = -1,
-            month = -1,
-            day = -1,
-            doy = -1,
-            literal = false,
-            date,
-            lookAhead = (match) => {
-                let matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
-                if (matches) {
-                    iFormat++;
-                }
-                return matches;
-            },
-            getNumber = (match) => {
-                let isDoubled = lookAhead(match),
-                    size = (match === "@" ? 14 : (match === "!" ? 20 :
-                    (match === "y" && isDoubled ? 4 : (match === "o" ? 3 : 2)))),
-                    minSize = (match === "y" ? size : 1),
-                    digits = new RegExp("^\\d{" + minSize + "," + size + "}"),
-                    num = value.substring(iValue).match(digits);
-                if (!num) {
-                    throw "Missing number at position " + iValue;
-                }
-                iValue += num[ 0 ].length;
-                return parseInt(num[ 0 ], 10);
-            },
-            getName = (match, shortNames, longNames) => {
-                let index = -1;
-                let arr = lookAhead(match) ? longNames : shortNames;
-                let names = [];
+            let iFormat,
+                dim,
+                extra,
+                iValue = 0,
+                shortYearCutoff = typeof this.shortYearCutoff !== 'string' ? this.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(this.shortYearCutoff, 10),
+                year = -1,
+                month = -1,
+                day = -1,
+                doy = -1,
+                literal = false,
+                date,
+                lookAhead = (match) => {
+                    let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
 
-                for (let i = 0; i < arr.length; i++) {
-                    names.push([i,arr[i]]);
-                }
-                names.sort((a,b) => {
-                    return -(a[ 1 ].length - b[ 1 ].length);
-                });
-
-                for (let i = 0; i < names.length; i++) {
-                    let name = names[i][1];
-                    if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
-                        index = names[i][0];
-                        iValue += name.length;
-                        break;
+                    if (matches) {
+                        iFormat++;
                     }
-                }
 
-                if (index !== -1) {
-                    return index + 1;
-                } else {
-                    throw "Unknown name at position " + iValue;
-                }
-            },
-            checkLiteral = () => {
-                if (value.charAt(iValue) !== format.charAt(iFormat)) {
-                    throw "Unexpected literal at position " + iValue;
-                }
-                iValue++;
-            };
+                    return matches;
+                },
+                getNumber = (match) => {
+                    let isDoubled = lookAhead(match),
+                        size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
+                        minSize = match === 'y' ? size : 1,
+                        digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
+                        num = value.substring(iValue).match(digits);
+
+                    if (!num) {
+                        throw 'Missing number at position ' + iValue;
+                    }
+
+                    iValue += num[0].length;
+
+                    return parseInt(num[0], 10);
+                },
+                getName = (match, shortNames, longNames) => {
+                    let index = -1;
+                    let arr = lookAhead(match) ? longNames : shortNames;
+                    let names = [];
+
+                    for (let i = 0; i < arr.length; i++) {
+                        names.push([i, arr[i]]);
+                    }
+
+                    names.sort((a, b) => {
+                        return -(a[1].length - b[1].length);
+                    });
+
+                    for (let i = 0; i < names.length; i++) {
+                        let name = names[i][1];
+
+                        if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                            index = names[i][0];
+                            iValue += name.length;
+                            break;
+                        }
+                    }
+
+                    if (index !== -1) {
+                        return index + 1;
+                    } else {
+                        throw 'Unknown name at position ' + iValue;
+                    }
+                },
+                checkLiteral = () => {
+                    if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                        throw 'Unexpected literal at position ' + iValue;
+                    }
+
+                    iValue++;
+                };
 
             if (this.currentView === 'month') {
                 day = 1;
@@ -1686,32 +1884,32 @@ export default {
                     }
                 } else {
                     switch (format.charAt(iFormat)) {
-                        case "d":
-                            day = getNumber("d");
+                        case 'd':
+                            day = getNumber('d');
                             break;
-                        case "D":
-                            getName("D", this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
+                        case 'D':
+                            getName('D', this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
                             break;
-                        case "o":
-                            doy = getNumber("o");
+                        case 'o':
+                            doy = getNumber('o');
                             break;
-                        case "m":
-                            month = getNumber("m");
+                        case 'm':
+                            month = getNumber('m');
                             break;
-                        case "M":
-                            month = getName("M", this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                        case 'M':
+                            month = getName('M', this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
                             break;
-                        case "y":
-                            year = getNumber("y");
+                        case 'y':
+                            year = getNumber('y');
                             break;
-                        case "@":
-                            date = new Date(getNumber("@"));
+                        case '@':
+                            date = new Date(getNumber('@'));
                             year = date.getFullYear();
                             month = date.getMonth() + 1;
                             day = date.getDate();
                             break;
-                        case "!":
-                            date = new Date((getNumber("!") - this.ticksTo1970) / 10000);
+                        case '!':
+                            date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
                             year = date.getFullYear();
                             month = date.getMonth() + 1;
                             day = date.getDate();
@@ -1722,6 +1920,7 @@ export default {
                             } else {
                                 literal = true;
                             }
+
                             break;
                         default:
                             checkLiteral();
@@ -1731,47 +1930,53 @@ export default {
 
             if (iValue < value.length) {
                 extra = value.substr(iValue);
+
                 if (!/^\s+/.test(extra)) {
-                    throw "Extra/unparsed characters found in date: " + extra;
+                    throw 'Extra/unparsed characters found in date: ' + extra;
                 }
             }
 
             if (year === -1) {
                 year = new Date().getFullYear();
             } else if (year < 100) {
-                year += new Date().getFullYear() - new Date().getFullYear() % 100 +
-                    (year <= shortYearCutoff ? 0 : -100);
+                year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
             }
 
             if (doy > -1) {
                 month = 1;
                 day = doy;
+
                 do {
                     dim = this.getDaysCountInMonth(year, month - 1);
+
                     if (day <= dim) {
                         break;
                     }
+
                     month++;
                     day -= dim;
-                // eslint-disable-next-line
+                    // eslint-disable-next-line
                 } while (true);
             }
 
             date = this.daylightSavingAdjust(new Date(year, month - 1, day));
 
             if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
-                throw "Invalid date"; // E.g. 31/02/00
+                throw 'Invalid date'; // E.g. 31/02/00
             }
 
             return date;
         },
         getWeekNumber(date) {
             let checkDate = new Date(date.getTime());
-            checkDate.setDate(checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ));
+
+            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
             let time = checkDate.getTime();
-            checkDate.setMonth( 0 );
-            checkDate.setDate( 1 );
-            return Math.floor( Math.round((time - checkDate.getTime()) / 86400000 ) / 7 ) + 1;
+
+            checkDate.setMonth(0);
+            checkDate.setDate(1);
+
+            return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
         },
         onDateCellKeydown(event, date, groupIndex) {
             const cellContent = event.currentTarget;
@@ -1782,21 +1987,22 @@ export default {
                     cellContent.tabIndex = '-1';
                     let cellIndex = DomHandler.index(cell);
                     let nextRow = cell.parentElement.nextElementSibling;
+
                     if (nextRow) {
                         let focusCell = nextRow.children[cellIndex].children[0];
+
                         if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigationState = {backward: false};
+                            this.navigationState = { backward: false };
                             this.navForward(event);
-                        }
-                        else {
+                        } else {
                             nextRow.children[cellIndex].children[0].tabIndex = '0';
                             nextRow.children[cellIndex].children[0].focus();
                         }
-                    }
-                    else {
-                        this.navigationState = {backward: false};
+                    } else {
+                        this.navigationState = { backward: false };
                         this.navForward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -1805,21 +2011,22 @@ export default {
                     cellContent.tabIndex = '-1';
                     let cellIndex = DomHandler.index(cell);
                     let prevRow = cell.parentElement.previousElementSibling;
+
                     if (prevRow) {
                         let focusCell = prevRow.children[cellIndex].children[0];
+
                         if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigationState = {backward: true};
+                            this.navigationState = { backward: true };
                             this.navBackward(event);
-                        }
-                        else {
+                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
                         }
-                    }
-                    else {
-                        this.navigationState = {backward: true};
+                    } else {
+                        this.navigationState = { backward: true };
                         this.navBackward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -1827,19 +2034,20 @@ export default {
                 case 'ArrowLeft': {
                     cellContent.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
+
                     if (prevCell) {
                         let focusCell = prevCell.children[0];
+
                         if (DomHandler.hasClass(focusCell, 'p-disabled')) {
                             this.navigateToMonth(event, true, groupIndex);
-                        }
-                        else {
+                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
                         }
-                    }
-                    else {
+                    } else {
                         this.navigateToMonth(event, true, groupIndex);
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -1847,24 +2055,26 @@ export default {
                 case 'ArrowRight': {
                     cellContent.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
+
                     if (nextCell) {
                         let focusCell = nextCell.children[0];
+
                         if (DomHandler.hasClass(focusCell, 'p-disabled')) {
                             this.navigateToMonth(event, false, groupIndex);
-                        }
-                        else {
+                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
                         }
-                    }
-                    else {
+                    } else {
                         this.navigateToMonth(event, false, groupIndex);
                     }
+
                     event.preventDefault();
                     break;
                 }
 
                 case 'Enter':
+
                 case 'Space': {
                     this.onDateSelect(event, date);
                     event.preventDefault();
@@ -1881,6 +2091,7 @@ export default {
                     if (!this.inline) {
                         this.trapFocus(event);
                     }
+
                     break;
                 }
 
@@ -1888,10 +2099,10 @@ export default {
                     cellContent.tabIndex = '-1';
                     let currentRow = cell.parentElement;
                     let focusCell = currentRow.children[0].children[0];
+
                     if (DomHandler.hasClass(focusCell, 'p-disabled')) {
                         this.navigateToMonth(event, true, groupIndex);
-                    }
-                    else {
+                    } else {
                         focusCell.tabIndex = '0';
                         focusCell.focus();
                     }
@@ -1903,11 +2114,11 @@ export default {
                 case 'End': {
                     cellContent.tabIndex = '-1';
                     let currentRow = cell.parentElement;
-                    let focusCell = currentRow.children[currentRow.children.length -1].children[0];
+                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+
                     if (DomHandler.hasClass(focusCell, 'p-disabled')) {
                         this.navigateToMonth(event, false, groupIndex);
-                    }
-                    else {
+                    } else {
                         focusCell.tabIndex = '0';
                         focusCell.focus();
                     }
@@ -1919,10 +2130,9 @@ export default {
                 case 'PageUp': {
                     cellContent.tabIndex = '-1';
                     if (event.shiftKey) {
-                        this.navigationState = {backward: true};
+                        this.navigationState = { backward: true };
                         this.navBackward(event);
-                    }
-                    else this.navigateToMonth(event, true, groupIndex);
+                    } else this.navigateToMonth(event, true, groupIndex);
 
                     event.preventDefault();
                     break;
@@ -1931,10 +2141,9 @@ export default {
                 case 'PageDown': {
                     cellContent.tabIndex = '-1';
                     if (event.shiftKey) {
-                        this.navigationState = {backward: false};
+                        this.navigationState = { backward: false };
                         this.navForward(event);
-                    }
-                    else this.navigateToMonth(event, false, groupIndex);
+                    } else this.navigateToMonth(event, false, groupIndex);
 
                     event.preventDefault();
                     break;
@@ -1942,31 +2151,30 @@ export default {
 
                 default:
                     //no op
-                break;
+                    break;
             }
         },
         navigateToMonth(event, prev, groupIndex) {
             if (prev) {
-                if (this.numberOfMonths === 1 || (groupIndex === 0)) {
-                    this.navigationState = {backward: true};
+                if (this.numberOfMonths === 1 || groupIndex === 0) {
+                    this.navigationState = { backward: true };
                     this.navBackward(event);
-                }
-                else {
+                } else {
                     let prevMonthContainer = this.overlay.children[groupIndex - 1];
                     let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                     let focusCell = cells[cells.length - 1];
+
                     focusCell.tabIndex = '0';
                     focusCell.focus();
                 }
-            }
-            else {
-                if (this.numberOfMonths === 1 || (groupIndex === this.numberOfMonths - 1)) {
-                    this.navigationState = {backward: false};
+            } else {
+                if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
+                    this.navigationState = { backward: false };
                     this.navForward(event);
-                }
-                else {
+                } else {
                     let nextMonthContainer = this.overlay.children[groupIndex + 1];
                     let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+
                     focusCell.tabIndex = '0';
                     focusCell.focus();
                 }
@@ -1977,15 +2185,18 @@ export default {
 
             switch (event.code) {
                 case 'ArrowUp':
+
                 case 'ArrowDown': {
                     cell.tabIndex = '-1';
                     var cells = cell.parentElement.children;
                     var cellIndex = DomHandler.index(cell);
-                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex -3];
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
+
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -1993,14 +2204,15 @@ export default {
                 case 'ArrowLeft': {
                     cell.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
+
                     if (prevCell) {
                         prevCell.tabIndex = '0';
                         prevCell.focus();
-                    }
-                    else {
-                        this.navigationState = {backward: true};
+                    } else {
+                        this.navigationState = { backward: true };
                         this.navBackward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -2008,21 +2220,22 @@ export default {
                 case 'ArrowRight': {
                     cell.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
+
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
-                    }
-                    else {
-                        this.navigationState = {backward: false};
+                    } else {
+                        this.navigationState = { backward: false };
                         this.navForward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
 
                 case 'PageUp': {
                     if (event.shiftKey) return;
-                    this.navigationState = {backward: true};
+                    this.navigationState = { backward: true };
                     this.navBackward(event);
 
                     break;
@@ -2030,13 +2243,14 @@ export default {
 
                 case 'PageDown': {
                     if (event.shiftKey) return;
-                    this.navigationState = {backward: false};
+                    this.navigationState = { backward: false };
                     this.navForward(event);
 
                     break;
                 }
 
                 case 'Enter':
+
                 case 'Space': {
                     this.onMonthSelect(event, index);
                     event.preventDefault();
@@ -2056,7 +2270,7 @@ export default {
 
                 default:
                     //no op
-                break;
+                    break;
             }
         },
         onYearCellKeydown(event, index) {
@@ -2064,15 +2278,18 @@ export default {
 
             switch (event.code) {
                 case 'ArrowUp':
-                case 'ArrowDown':  {
+
+                case 'ArrowDown': {
                     cell.tabIndex = '-1';
                     var cells = cell.parentElement.children;
                     var cellIndex = DomHandler.index(cell);
                     let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -2080,14 +2297,15 @@ export default {
                 case 'ArrowLeft': {
                     cell.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
+
                     if (prevCell) {
                         prevCell.tabIndex = '0';
                         prevCell.focus();
-                    }
-                    else {
-                        this.navigationState = {backward: true};
+                    } else {
+                        this.navigationState = { backward: true };
                         this.navBackward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
@@ -2095,21 +2313,22 @@ export default {
                 case 'ArrowRight': {
                     cell.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
+
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
-                    }
-                    else {
-                        this.navigationState = {backward: false};
+                    } else {
+                        this.navigationState = { backward: false };
                         this.navForward(event);
                     }
+
                     event.preventDefault();
                     break;
                 }
 
                 case 'PageUp': {
                     if (event.shiftKey) return;
-                    this.navigationState = {backward: true};
+                    this.navigationState = { backward: true };
                     this.navBackward(event);
 
                     break;
@@ -2117,13 +2336,14 @@ export default {
 
                 case 'PageDown': {
                     if (event.shiftKey) return;
-                    this.navigationState = {backward: false};
+                    this.navigationState = { backward: false };
                     this.navForward(event);
 
                     break;
                 }
 
                 case 'Enter':
+
                 case 'Space': {
                     this.onYearSelect(event, index);
                     event.preventDefault();
@@ -2143,7 +2363,7 @@ export default {
 
                 default:
                     //no op
-                break;
+                    break;
             }
         },
         updateFocus() {
@@ -2153,37 +2373,29 @@ export default {
                 if (this.navigationState.button) {
                     this.initFocusableCell();
 
-                    if (this.navigationState.backward)
-                        DomHandler.findSingle(this.overlay, '.p-datepicker-prev').focus();
-                    else
-                        DomHandler.findSingle(this.overlay, '.p-datepicker-next').focus();
-                }
-                else {
+                    if (this.navigationState.backward) DomHandler.findSingle(this.overlay, '.p-datepicker-prev').focus();
+                    else DomHandler.findSingle(this.overlay, '.p-datepicker-next').focus();
+                } else {
                     if (this.navigationState.backward) {
                         let cells;
 
                         if (this.currentView === 'month') {
                             cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
-                        }
-                        else if (this.currentView === 'year') {
+                        } else if (this.currentView === 'year') {
                             cells = DomHandler.find(this.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
-                        }
-                        else {
+                        } else {
                             cells = DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                         }
 
                         if (cells && cells.length > 0) {
                             cell = cells[cells.length - 1];
                         }
-                    }
-                    else {
+                    } else {
                         if (this.currentView === 'month') {
                             cell = DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
-                        }
-                        else if (this.currentView === 'year') {
+                        } else if (this.currentView === 'year') {
                             cell = DomHandler.findSingle(this.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
-                        }
-                        else {
+                        } else {
                             cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                         }
                     }
@@ -2195,8 +2407,7 @@ export default {
                 }
 
                 this.navigationState = null;
-            }
-            else {
+            } else {
                 this.initFocusableCell();
             }
         },
@@ -2205,24 +2416,24 @@ export default {
 
             if (this.currentView === 'month') {
                 let cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month');
-                let selectedCell= DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
-                cells.forEach(cell => cell.tabIndex = -1);
+                let selectedCell = DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
                 cell = selectedCell || cells[0];
-            }
-            else if (this.currentView === 'year') {
+            } else if (this.currentView === 'year') {
                 let cells = DomHandler.find(this.overlay, '.p-yearpicker .p-yearpicker-year');
-                let selectedCell= DomHandler.findSingle(this.overlay, '.p-yearpicker .p-yearpicker-year.p-highlight');
-                cells.forEach(cell => cell.tabIndex = -1);
+                let selectedCell = DomHandler.findSingle(this.overlay, '.p-yearpicker .p-yearpicker-year.p-highlight');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
                 cell = selectedCell || cells[0];
-            }
-            else {
+            } else {
                 cell = DomHandler.findSingle(this.overlay, 'span.p-highlight');
+
                 if (!cell) {
                     let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink');
-                    if (todayCell)
-                        cell = todayCell;
-                    else
-                        cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink');
+
+                    if (todayCell) cell = todayCell;
+                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink');
                 }
             }
 
@@ -2243,34 +2454,27 @@ export default {
             if (focusableElements && focusableElements.length > 0) {
                 if (!document.activeElement) {
                     focusableElements[0].focus();
-                }
-                else {
+                } else {
                     let focusedIndex = focusableElements.indexOf(document.activeElement);
 
                     if (event.shiftKey) {
-                        if (focusedIndex === -1 || focusedIndex === 0)
-                            focusableElements[focusableElements.length - 1].focus();
-                        else
-                            focusableElements[focusedIndex - 1].focus();
-                    }
-                    else {
+                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
+                        else focusableElements[focusedIndex - 1].focus();
+                    } else {
                         if (focusedIndex === -1) {
                             if (this.timeOnly) {
                                 focusableElements[0].focus();
-                            }
-                            else {
+                            } else {
                                 let spanIndex = null;
-                                for (let i = 0; i < focusableElements.length; i++){
-                                    if (focusableElements[i].tagName === 'SPAN')
-                                        spanIndex = i;
+
+                                for (let i = 0; i < focusableElements.length; i++) {
+                                    if (focusableElements[i].tagName === 'SPAN') spanIndex = i;
                                 }
+
                                 focusableElements[spanIndex].focus();
                             }
-                        }
-                        else if (focusedIndex === (focusableElements.length - 1))
-                            focusableElements[0].focus();
-                        else
-                            focusableElements[focusedIndex + 1].focus();
+                        } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
+                        else focusableElements[focusedIndex + 1].focus();
                     }
                 }
             }
@@ -2279,16 +2483,16 @@ export default {
             switch (event.code) {
                 case 'Tab':
                     this.trapFocus(event);
-                break;
+                    break;
 
                 case 'Escape':
                     this.overlayVisible = false;
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
                     //Noop
-                break;
+                    break;
             }
 
             this.$emit('keydown', event);
@@ -2299,12 +2503,12 @@ export default {
                 this.selectionEnd = this.input.selectionEnd;
 
                 let value = this.parseValue(event.target.value);
+
                 if (this.isValidSelection(value)) {
                     this.typeUpdate = true;
                     this.updateModel(value);
                 }
-            }
-            catch(err) {
+            } catch (err) {
                 /* NoOp */
             }
 
@@ -2314,11 +2518,12 @@ export default {
             if (this.showOnFocus && this.isEnabled()) {
                 this.overlayVisible = true;
             }
+
             this.focused = true;
             this.$emit('focus', event);
         },
         onBlur(event) {
-            this.$emit('blur', {originalEvent: event, value: event.target.value});
+            this.$emit('blur', { originalEvent: event, value: event.target.value });
 
             this.focused = false;
             event.target.value = this.formatValue(this.modelValue);
@@ -2326,19 +2531,16 @@ export default {
         onKeyDown(event) {
             if (event.code === 'ArrowDown' && this.overlay) {
                 this.trapFocus(event);
-            }
-            else if (event.code === 'ArrowDown' && !this.overlay) {
+            } else if (event.code === 'ArrowDown' && !this.overlay) {
                 this.overlayVisible = true;
-            }
-            else if (event.code === 'Escape') {
+            } else if (event.code === 'Escape') {
                 if (this.overlayVisible) {
                     this.overlayVisible = false;
                     event.preventDefault();
                 }
-            }
-            else if (event.code === 'Tab') {
+            } else if (event.code === 'Tab') {
                 if (this.overlay) {
-                    DomHandler.getFocusableElements(this.overlay).forEach(el => el.tabIndex = '-1');
+                    DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
                 }
 
                 if (this.overlayVisible) {
@@ -2389,10 +2591,9 @@ export default {
                 }
 
                 let innerHTML = '';
+
                 if (this.responsiveOptions) {
-                    let responsiveOptions = [...this.responsiveOptions]
-                        .filter(o => !!(o.breakpoint && o.numMonths))
-                        .sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
 
                     for (let i = 0; i < responsiveOptions.length; i++) {
                         let { breakpoint, numMonths } = responsiveOptions[i];
@@ -2407,20 +2608,20 @@ export default {
                                 .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
                                     display: none !important;
                                 }
-                            `
+                            `;
                         }
 
                         innerHTML += `
                             @media screen and (max-width: ${breakpoint}) {
                                 ${styles}
                             }
-                        `
+                        `;
                     }
                 }
 
                 this.responsiveStyleElement.innerHTML = innerHTML;
             }
-		},
+        },
         destroyResponsiveStyleElement() {
             if (this.responsiveStyleElement) {
                 this.responsiveStyleElement.remove();
@@ -2431,19 +2632,18 @@ export default {
     computed: {
         viewDate() {
             let propValue = this.modelValue;
+
             if (propValue && Array.isArray(propValue)) {
                 if (this.isRangeSelection()) {
                     propValue = propValue[1] || propValue[0];
-                }
-                else if (this.isMultipleSelection()) {
+                } else if (this.isMultipleSelection()) {
                     propValue = propValue[propValue.length - 1];
                 }
             }
 
             if (propValue && typeof propValue !== 'string') {
                 return propValue;
-            }
-            else {
+            } else {
                 let today = new Date();
 
                 if (this.maxDate && this.maxDate < today) {
@@ -2473,25 +2673,31 @@ export default {
             ];
         },
         panelStyleClass() {
-            return ['p-datepicker p-component', this.panelClass, {
-                'p-datepicker-inline': this.inline,
-                'p-disabled': this.disabled,
-                'p-datepicker-timeonly': this.timeOnly,
-                'p-datepicker-multiple-month': this.numberOfMonths > 1,
-                'p-datepicker-monthpicker': (this.currentView === 'month'),
-                'p-datepicker-yearpicker': (this.currentView === 'year'),
-                'p-datepicker-touch-ui': this.touchUI,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-datepicker p-component',
+                this.panelClass,
+                {
+                    'p-datepicker-inline': this.inline,
+                    'p-disabled': this.disabled,
+                    'p-datepicker-timeonly': this.timeOnly,
+                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                    'p-datepicker-monthpicker': this.currentView === 'month',
+                    'p-datepicker-yearpicker': this.currentView === 'year',
+                    'p-datepicker-touch-ui': this.touchUI,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         months() {
             let months = [];
-            for (let i = 0 ; i < this.numberOfMonths; i++) {
+
+            for (let i = 0; i < this.numberOfMonths; i++) {
                 let month = this.currentMonth + i;
                 let year = this.currentYear;
+
                 if (month > 11) {
-                    month = month % 11 - 1;
+                    month = (month % 11) - 1;
                     year = year + 1;
                 }
 
@@ -2508,30 +2714,33 @@ export default {
                     let week = [];
 
                     if (i == 0) {
-                        for (let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
+                        for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
                             let prev = this.getPreviousMonthAndYear(month, year);
-                            week.push({day: j, month: prev.month, year: prev.year, otherMonth: true,
-                                    today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true)});
+
+                            week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
                         }
 
                         let remainingDaysLength = 7 - week.length;
+
                         for (let j = 0; j < remainingDaysLength; j++) {
-                            week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                                    selectable: this.isSelectable(dayNo, month, year, false)});
+                            week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
                             dayNo++;
                         }
-                    }
-                    else {
+                    } else {
                         for (let j = 0; j < 7; j++) {
                             if (dayNo > daysLength) {
                                 let next = this.getNextMonthAndYear(month, year);
-                                week.push({day: dayNo - daysLength, month: next.month, year: next.year, otherMonth: true,
-                                            today: this.isToday(today, dayNo - daysLength, next.month, next.year),
-                                            selectable: this.isSelectable((dayNo - daysLength), next.month, next.year, true)});
-                            }
-                            else {
-                                week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                                    selectable: this.isSelectable(dayNo, month, year, false)});
+
+                                week.push({
+                                    day: dayNo - daysLength,
+                                    month: next.month,
+                                    year: next.year,
+                                    otherMonth: true,
+                                    today: this.isToday(today, dayNo - daysLength, next.month, next.year),
+                                    selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
+                                });
+                            } else {
+                                week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
                             }
 
                             dayNo++;
@@ -2558,15 +2767,16 @@ export default {
         weekDays() {
             let weekDays = [];
             let dayIndex = this.$primevue.config.locale.firstDayOfWeek;
+
             for (let i = 0; i < 7; i++) {
                 weekDays.push(this.$primevue.config.locale.dayNamesMin[dayIndex]);
-                dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
+                dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
             }
 
             return weekDays;
         },
         ticksTo1970() {
-            return (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000);
+            return ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
         },
         sundayIndex() {
             return this.$primevue.config.locale.firstDayOfWeek > 0 ? 7 - this.$primevue.config.locale.firstDayOfWeek : 0;
@@ -2584,8 +2794,7 @@ export default {
 
                 if (this.currentYear < yearStart) {
                     $vm.currentYear = yearEnd;
-                }
-                else if (this.currentYear > yearEnd) {
+                } else if (this.currentYear > yearEnd) {
                     $vm.currentYear = yearStart;
                 }
 
@@ -2594,13 +2803,13 @@ export default {
                 }
 
                 return yearOptions;
-            }
-            else {
+            } else {
                 return null;
             }
         },
         monthPickerValues() {
             let monthPickerValues = [];
+
             for (let i = 0; i <= 11; i++) {
                 monthPickerValues.push(this.$primevue.config.locale.monthNamesShort[i]);
             }
@@ -2609,7 +2818,8 @@ export default {
         },
         yearPickerValues() {
             let yearPickerValues = [];
-            let base = this.currentYear -  (this.currentYear % 10);
+            let base = this.currentYear - (this.currentYear % 10);
+
             for (let i = 0; i < 10; i++) {
                 yearPickerValues.push(base + i);
             }
@@ -2648,13 +2858,13 @@ export default {
         }
     },
     components: {
-        'CalendarButton': Button,
-        'Portal': Portal
+        CalendarButton: Button,
+        Portal: Portal
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -2694,7 +2904,7 @@ export default {
 }
 
 .p-datepicker {
-	width: auto;
+    width: auto;
     position: absolute;
     top: 0;
     left: 0;
@@ -2738,8 +2948,8 @@ export default {
 
 /* DatePicker Table */
 .p-datepicker table {
-	width: 100%;
-	border-collapse: collapse;
+    width: 100%;
+    border-collapse: collapse;
 }
 
 .p-datepicker td > span {
diff --git a/components/card/Card.d.ts b/components/card/Card.d.ts
index eaa6f573a..3ab22c8b4 100755
--- a/components/card/Card.d.ts
+++ b/components/card/Card.d.ts
@@ -1,8 +1,7 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface CardProps {
-}
+export interface CardProps {}
 
 export interface CardSlots {
     /**
@@ -27,14 +26,13 @@ export interface CardSlots {
     footer: () => VNode[];
 }
 
-export declare type CardEmits = {
-}
+export declare type CardEmits = {};
 
-declare class Card extends ClassComponent<CardProps, CardSlots, CardEmits> { }
+declare class Card extends ClassComponent<CardProps, CardSlots, CardEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Card: GlobalComponentConstructor<Card>
+        Card: GlobalComponentConstructor<Card>;
     }
 }
 
@@ -44,7 +42,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Card](https://www.primefaces.org/primevue/showcase/#/card)
+ * - [Card](https://www.primefaces.org/primevue/card)
  *
  */
 export default Card;
diff --git a/components/card/Card.spec.js b/components/card/Card.spec.js
index 65870dace..5ac521ac3 100644
--- a/components/card/Card.spec.js
+++ b/components/card/Card.spec.js
@@ -20,4 +20,4 @@ describe('Card.vue', () => {
         expect(wrapper.find('.p-card-content').text()).toBe('Lorem ipsum dolor sit amet, consectetur adipisicing elit.');
         expect(wrapper.find('.p-card-footer').text()).toBe('Advanced Card Footer');
     });
-});
\ No newline at end of file
+});
diff --git a/components/card/Card.vue b/components/card/Card.vue
index 4fdc3e1c9..6ffd8a3ed 100755
--- a/components/card/Card.vue
+++ b/components/card/Card.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="p-card p-component">
-        <div class="p-card-header" v-if="$slots.header">
+        <div v-if="$slots.header" class="p-card-header">
             <slot name="header"></slot>
         </div>
         <div class="p-card-body">
-            <div class="p-card-title" v-if="$slots.title"><slot name="title"></slot></div>
-            <div class="p-card-subtitle" v-if="$slots.subtitle"><slot name="subtitle"></slot></div>
+            <div v-if="$slots.title" class="p-card-title"><slot name="title"></slot></div>
+            <div v-if="$slots.subtitle" class="p-card-subtitle"><slot name="subtitle"></slot></div>
             <div class="p-card-content">
                 <slot name="content"></slot>
             </div>
-            <div class="p-card-footer" v-if="$slots.footer">
+            <div v-if="$slots.footer" class="p-card-footer">
                 <slot name="footer"></slot>
             </div>
         </div>
@@ -19,7 +19,7 @@
 <script>
 export default {
     name: 'Card'
-}
+};
 </script>
 
 <style>
diff --git a/components/carousel/Carousel.d.ts b/components/carousel/Carousel.d.ts
index a0803e60f..00ac731fc 100755
--- a/components/carousel/Carousel.d.ts
+++ b/components/carousel/Carousel.d.ts
@@ -27,54 +27,64 @@ export interface CarouselProps {
      * Index of the first item.
      * Default value is 0.
      */
-	page?: number | undefined;
+    page?: number | undefined;
     /**
      * Number of items per page.
      * Default value is 1.
      */
-	numVisible?: number | undefined;
+    numVisible?: number | undefined;
     /**
      * Number of items to scroll.
      * Default value is 1.
      */
-	numScroll?: number | undefined;
+    numScroll?: number | undefined;
     /**
      * An array of options for responsive design.
      * @see CarouselResponsiveOptions
      */
-	responsiveOptions?: CarouselResponsiveOptions[] | undefined;
+    responsiveOptions?: CarouselResponsiveOptions[] | undefined;
     /**
      * Specifies the layout of the component, valid values are 'horizontal' and 'vertical'.
      * @see CarouselOrientationType
      * Default value is 'horizontal'.
      */
-	orientation?: CarouselOrientationType;
+    orientation?: CarouselOrientationType;
     /**
      * Height of the viewport in vertical layout.
      * Default value is '300px'.
      */
-	verticalViewPortHeight?: string | undefined;
+    verticalViewPortHeight?: string | undefined;
     /**
      * Style class of the viewport container.
      */
-	containerClass?: any;
+    containerClass?: any;
     /**
      * Style class of main content.
      */
-	contentClass?: any;
+    contentClass?: any;
     /**
      * Style class of the indicator items.
      */
-	indicatorsContentClass?: any;
+    indicatorsContentClass?: any;
     /**
      * Defines if scrolling would be infinite.
      */
-	circular?: boolean | undefined;
+    circular?: boolean | undefined;
     /**
      * Time in milliseconds to scroll items automatically.
      * Default value is 0.
      */
-	autoplayInterval?: number | undefined;
+    autoplayInterval?: number | undefined;
+    /**
+     * Whether to display navigation buttons in container.
+     * Default value is true.
+     */
+    showNavigators?: boolean | undefined;
+    /**
+     * Whether to display indicator container.
+     * Default value is true.
+     */
+    showIndicators?: boolean | undefined;
 }
 
 export interface CarouselSlots {
@@ -92,13 +102,13 @@ export interface CarouselSlots {
          */
         index: number;
     }) => VNode[];
-	/**
+    /**
      * Custom header template.
      */
     header: () => VNode[];
-     /**
-      * Custom footer template.
-      */
+    /**
+     * Custom footer template.
+     */
     footer: () => VNode[];
 }
 
@@ -108,13 +118,13 @@ export declare type CarouselEmits = {
      * @param {number} value - New page value.
      */
     'update:page': (value: number) => void;
-}
+};
 
-declare class Carousel extends ClassComponent<CarouselProps, CarouselSlots, CarouselEmits> { }
+declare class Carousel extends ClassComponent<CarouselProps, CarouselSlots, CarouselEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Carousel: GlobalComponentConstructor<Carousel>
+        Carousel: GlobalComponentConstructor<Carousel>;
     }
 }
 
@@ -124,7 +134,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Carousel](https://www.primefaces.org/primevue/showcase/#/carousel)
+ * - [Carousel](https://www.primefaces.org/primevue/carousel)
  *
  */
 export default Carousel;
diff --git a/components/carousel/Carousel.spec.js b/components/carousel/Carousel.spec.js
index c324e2f72..0a720d856 100644
--- a/components/carousel/Carousel.spec.js
+++ b/components/carousel/Carousel.spec.js
@@ -7,52 +7,52 @@ describe('Carousel.vue', () => {
             props: {
                 value: [
                     {
-                        "id": "1000",
-                        "code": "vbb124btr",
-                        "name": "Game Controller",
-                        "description": "Product Description",
-                        "image": "game-controller.jpg",
-                        "price": 99,
-                        "category": "Electronics",
-                        "quantity": 2,
-                        "inventoryStatus": "LOWSTOCK",
-                        "rating": 4
+                        id: '1000',
+                        code: 'vbb124btr',
+                        name: 'Game Controller',
+                        description: 'Product Description',
+                        image: 'game-controller.jpg',
+                        price: 99,
+                        category: 'Electronics',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1001",
-                        "code": "nvklal433",
-                        "name": "Black Watch",
-                        "description": "Product Description",
-                        "image": "black-watch.jpg",
-                        "price": 72,
-                        "category": "Accessories",
-                        "quantity": 61,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 4
+                        id: '1001',
+                        code: 'nvklal433',
+                        name: 'Black Watch',
+                        description: 'Product Description',
+                        image: 'black-watch.jpg',
+                        price: 72,
+                        category: 'Accessories',
+                        quantity: 61,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1002",
-                        "code": "zz21cz3c1",
-                        "name": "Blue Band",
-                        "description": "Product Description",
-                        "image": "blue-band.jpg",
-                        "price": 79,
-                        "category": "Fitness",
-                        "quantity": 2,
-                        "inventoryStatus": "LOWSTOCK",
-                        "rating": 3
+                        id: '1002',
+                        code: 'zz21cz3c1',
+                        name: 'Blue Band',
+                        description: 'Product Description',
+                        image: 'blue-band.jpg',
+                        price: 79,
+                        category: 'Fitness',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 3
                     },
                     {
-                        "id": "1003",
-                        "code": "244wgerg2",
-                        "name": "Blue T-Shirt",
-                        "description": "Product Description",
-                        "image": "blue-t-shirt.jpg",
-                        "price": 29,
-                        "category": "Clothing",
-                        "quantity": 25,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 5
+                        id: '1003',
+                        code: '244wgerg2',
+                        name: 'Blue T-Shirt',
+                        description: 'Product Description',
+                        image: 'blue-t-shirt.jpg',
+                        price: 29,
+                        category: 'Clothing',
+                        quantity: 25,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 5
                     }
                 ]
             },
@@ -69,16 +69,18 @@ describe('Carousel.vue', () => {
                 </template>
                 `
             }
-        });        
-        
+        });
+
         expect(wrapper.findAll('.p-carousel-item').length).toBe(4);
 
         const firstItem = wrapper.findAll('.p-carousel-item')[0];
+
         expect(firstItem.classes()).toContain('p-carousel-item-active');
 
         const nextBtn = wrapper.find('.p-carousel-next');
+
         await nextBtn.trigger('click');
 
         expect(firstItem.classes()).not.toContain('p-carousel-item-active');
-    })
-});
\ No newline at end of file
+    });
+});
diff --git a/components/carousel/Carousel.vue b/components/carousel/Carousel.vue
index 2daf420a1..8eee060d4 100755
--- a/components/carousel/Carousel.vue
+++ b/components/carousel/Carousel.vue
@@ -1,547 +1,556 @@
 <template>
-	<div :id="id" :class="['p-carousel p-component', {'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical()}]">
-		<div class="p-carousel-header" v-if="$slots.header">
-			<slot name="header"></slot>
-		</div>
-		<div :class="contentClasses">
-			<div :class="containerClasses">
-				<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
-					<span :class="['p-carousel-prev-icon pi', {'pi-chevron-left': !isVertical(),'pi-chevron-up': isVertical()}]"></span>
-				</button>
+    <div :id="id" :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]">
+        <div v-if="$slots.header" class="p-carousel-header">
+            <slot name="header"></slot>
+        </div>
+        <div :class="contentClasses">
+            <div :class="containerClasses">
+                <button v-if="showNavigators" v-ripple :class="['p-carousel-prev p-link', { 'p-disabled': backwardIsDisabled }]" :disabled="backwardIsDisabled" @click="navBackward" type="button">
+                    <span :class="['p-carousel-prev-icon pi', { 'pi-chevron-left': !isVertical(), 'pi-chevron-up': isVertical() }]"></span>
+                </button>
 
-				<div class="p-carousel-items-content" :style="[{'height': isVertical() ? verticalViewPortHeight : 'auto'}]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
-					<div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd">
-						<template v-if="isCircular()">
-							<div v-for="(item, index) of value.slice(-1 * d_numVisible)" :key="index + '_scloned'" :class="['p-carousel-item p-carousel-item-cloned',
-								{'p-carousel-item-active': (totalShiftedItems * -1) === (value.length + d_numVisible),
-								'p-carousel-item-start': 0 === index,
-								'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index}]">
-								<slot name="item" :data="item" :index="index"></slot>
-							</div>
-						</template>
-						<div v-for="(item, index) of value" :key="index" :class="['p-carousel-item',
-							{'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index,
-							'p-carousel-item-start': firstIndex() === index,
-							'p-carousel-item-end': lastIndex() === index}]">
-							<slot name="item" :data="item" :index="index"></slot>
-						</div>
-						<template v-if="isCircular()">
-							<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="['p-carousel-item p-carousel-item-cloned',
-								{'p-carousel-item-active': totalShiftedItems === 0,
-								'p-carousel-item-start': 0 === index,
-								'p-carousel-item-end': value.slice(0, d_numVisible).length - 1 === index}]">
-								<slot name="item" :data="item" :index="index"></slot>
-							</div>
-						</template>
-					</div>
-				</div>
+                <div class="p-carousel-items-content" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
+                    <div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd">
+                        <template v-if="isCircular()">
+                            <div
+                                v-for="(item, index) of value.slice(-1 * d_numVisible)"
+                                :key="index + '_scloned'"
+                                :class="[
+                                    'p-carousel-item p-carousel-item-cloned',
+                                    { 'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index }
+                                ]"
+                            >
+                                <slot name="item" :data="item" :index="index"></slot>
+                            </div>
+                        </template>
+                        <div
+                            v-for="(item, index) of value"
+                            :key="index"
+                            :class="['p-carousel-item', { 'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index, 'p-carousel-item-start': firstIndex() === index, 'p-carousel-item-end': lastIndex() === index }]"
+                        >
+                            <slot name="item" :data="item" :index="index"></slot>
+                        </div>
+                        <template v-if="isCircular()">
+                            <div
+                                v-for="(item, index) of value.slice(0, d_numVisible)"
+                                :key="index + '_fcloned'"
+                                :class="['p-carousel-item p-carousel-item-cloned', { 'p-carousel-item-active': totalShiftedItems === 0, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(0, d_numVisible).length - 1 === index }]"
+                            >
+                                <slot name="item" :data="item" :index="index"></slot>
+                            </div>
+                        </template>
+                    </div>
+                </div>
 
-				<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
-					<span :class="['p-carousel-prev-icon pi', {'pi-chevron-right': !isVertical(),'pi-chevron-down': isVertical()}]"></span>
-				</button>
-			</div>
-			<ul v-if="totalIndicators >= 0" :class="indicatorsContentClasses">
-				<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', {'p-highlight': d_page === i}]">
-					<button class="p-link" @click="onIndicatorClick($event, i)" type="button" />
-				</li>
-			</ul>
-		</div>
-		<div class="p-carousel-footer" v-if="$slots.footer">
-			<slot name="footer"></slot>
-		</div>
-	</div>
+                <button v-if="showNavigators" v-ripple :class="['p-carousel-next p-link', { 'p-disabled': forwardIsDisabled }]" :disabled="forwardIsDisabled" @click="navForward" type="button">
+                    <span :class="['p-carousel-prev-icon pi', { 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical() }]"></span>
+                </button>
+            </div>
+            <ul v-if="totalIndicators >= 0 && showIndicators" :class="indicatorsContentClasses">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', { 'p-highlight': d_page === i }]">
+                    <button class="p-link" @click="onIndicatorClick($event, i)" type="button" />
+                </li>
+            </ul>
+        </div>
+        <div v-if="$slots.footer" class="p-carousel-footer">
+            <slot name="footer"></slot>
+        </div>
+    </div>
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Carousel',
-	emits: ['update:page'],
-	props: {
-		value: null,
-		page: {
-			type: Number,
-			default: 0
-		},
-		numVisible: {
-			type: Number,
-			default: 1
-		},
-		numScroll: {
-			type: Number,
-			default: 1
-		},
-		responsiveOptions: Array,
-		orientation: {
-			type: String,
-			default: 'horizontal'
-		},
-		verticalViewPortHeight: {
-			type: String,
-			default: '300px'
-		},
-		contentClass: String,
-		containerClass: String,
-		indicatorsContentClass: String,
-		circular: {
-			type: Boolean,
-			default: false
-		},
-		autoplayInterval: {
-			type: Number,
-			default:0
-		}
-	},
-	data() {
-		return {
-			id : UniqueComponentId(),
-			remainingItems: 0,
-			d_numVisible: this.numVisible,
-			d_numScroll: this.numScroll,
-			d_oldNumScroll: 0,
-			d_oldNumVisible: 0,
-			d_oldValue: null,
-			d_page: this.page,
-			totalShiftedItems: this.page * this.numScroll * -1,
-			allowAutoplay : !!this.autoplayInterval,
-			d_circular : this.circular || this.allowAutoplay,
-			swipeThreshold: 20
-		}
-	},
-	isRemainingItemsAdded: false,
-	watch: {
-		page(newValue) {
-			this.d_page = newValue;
-		},
-		circular(newValue) {
-			this.d_circular = newValue;
-		},
-		numVisible(newValue, oldValue) {
-			this.d_numVisible = newValue;
-			this.d_oldNumVisible = oldValue;
-		},
-		numScroll(newValue, oldValue) {
-			this.d_oldNumScroll = oldValue;
-			this.d_numScroll = newValue;
-		},
-		value(oldValue) {
-			this.d_oldValue =oldValue;
-		}
-	},
-	methods: {
-		step(dir, page) {
-			let totalShiftedItems = this.totalShiftedItems;
-			const isCircular = this.isCircular();
+    emits: ['update:page'],
+    props: {
+        value: null,
+        page: {
+            type: Number,
+            default: 0
+        },
+        numVisible: {
+            type: Number,
+            default: 1
+        },
+        numScroll: {
+            type: Number,
+            default: 1
+        },
+        responsiveOptions: Array,
+        orientation: {
+            type: String,
+            default: 'horizontal'
+        },
+        verticalViewPortHeight: {
+            type: String,
+            default: '300px'
+        },
+        contentClass: String,
+        containerClass: String,
+        indicatorsContentClass: String,
+        circular: {
+            type: Boolean,
+            default: false
+        },
+        autoplayInterval: {
+            type: Number,
+            default: 0
+        },
+        showNavigators: {
+            type: Boolean,
+            default: true
+        },
+        showIndicators: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            id: UniqueComponentId(),
+            remainingItems: 0,
+            d_numVisible: this.numVisible,
+            d_numScroll: this.numScroll,
+            d_oldNumScroll: 0,
+            d_oldNumVisible: 0,
+            d_oldValue: null,
+            d_page: this.page,
+            totalShiftedItems: this.page * this.numScroll * -1,
+            allowAutoplay: !!this.autoplayInterval,
+            d_circular: this.circular || this.allowAutoplay,
+            swipeThreshold: 20
+        };
+    },
+    isRemainingItemsAdded: false,
+    watch: {
+        page(newValue) {
+            this.d_page = newValue;
+        },
+        circular(newValue) {
+            this.d_circular = newValue;
+        },
+        numVisible(newValue, oldValue) {
+            this.d_numVisible = newValue;
+            this.d_oldNumVisible = oldValue;
+        },
+        numScroll(newValue, oldValue) {
+            this.d_oldNumScroll = oldValue;
+            this.d_numScroll = newValue;
+        },
+        value(oldValue) {
+            this.d_oldValue = oldValue;
+        }
+    },
+    mounted() {
+        let stateChanged = false;
 
-			if (page != null) {
-				totalShiftedItems = (this.d_numScroll * page) * -1;
+        this.createStyle();
+        this.calculatePosition();
 
-				if (isCircular) {
-					totalShiftedItems -= this.d_numVisible;
-				}
+        if (this.responsiveOptions) {
+            this.bindDocumentListeners();
+        }
 
-				this.isRemainingItemsAdded = false;
-			}
-			else {
-				totalShiftedItems += (this.d_numScroll * dir);
-				if (this.isRemainingItemsAdded) {
-					totalShiftedItems += this.remainingItems - (this.d_numScroll * dir);
-					this.isRemainingItemsAdded = false;
-				}
+        if (this.isCircular()) {
+            let totalShiftedItems = this.totalShiftedItems;
 
-				let originalShiftedItems = isCircular ? (totalShiftedItems + this.d_numVisible) : totalShiftedItems;
-				page = Math.abs(Math.floor(originalShiftedItems / this.d_numScroll));
-			}
+            if (this.d_page === 0) {
+                totalShiftedItems = -1 * this.d_numVisible;
+            } else if (totalShiftedItems === 0) {
+                totalShiftedItems = -1 * this.value.length;
 
-			if (isCircular && this.d_page === (this.totalIndicators - 1) && dir === -1) {
-				totalShiftedItems = -1 * (this.value.length + this.d_numVisible);
-				page = 0;
-			}
-			else if (isCircular && this.d_page === 0 && dir === 1) {
-				totalShiftedItems = 0;
-				page = (this.totalIndicators - 1);
-			}
-			else if (page === (this.totalIndicators - 1) && this.remainingItems > 0) {
-				totalShiftedItems += ((this.remainingItems * -1) - (this.d_numScroll * dir));
-				this.isRemainingItemsAdded = true;
-			}
+                if (this.remainingItems > 0) {
+                    this.isRemainingItemsAdded = true;
+                }
+            }
 
-			if (this.$refs.itemsContainer) {
-				DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
-				this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
-				this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
-			}
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
 
-			this.totalShiftedItems = totalShiftedItems;
+                stateChanged = true;
+            }
+        }
 
-			this.$emit('update:page', page);
-			this.d_page = page;
-		},
-		calculatePosition() {
-			if (this.$refs.itemsContainer && this.responsiveOptions) {
-				let windowWidth = window.innerWidth;
-				let matchedResponsiveOptionsData = {
-					numVisible: this.numVisible,
-					numScroll: this.numScroll
-				};
+        if (!stateChanged && this.isAutoplay()) {
+            this.startAutoplay();
+        }
+    },
+    updated() {
+        const isCircular = this.isCircular();
+        let stateChanged = false;
+        let totalShiftedItems = this.totalShiftedItems;
 
-				for (let i = 0; i < this.responsiveOptions.length; i++) {
-					let res = this.responsiveOptions[i];
+        if (this.autoplayInterval) {
+            this.stopAutoplay();
+        }
 
-					if (parseInt(res.breakpoint, 10) >= windowWidth) {
-						matchedResponsiveOptionsData = res;
-					}
-				}
+        if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
+            this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
 
-				if (this.d_numScroll !== matchedResponsiveOptionsData.numScroll) {
-					let page = this.d_page;
-					page = parseInt((page * this.d_numScroll) / matchedResponsiveOptionsData.numScroll);
+            let page = this.d_page;
 
-					this.totalShiftedItems = (matchedResponsiveOptionsData.numScroll * page) * -1;
+            if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
+                page = this.totalIndicators - 1;
 
-					if (this.isCircular()) {
-						this.totalShiftedItems -= matchedResponsiveOptionsData.numVisible;
-					}
+                this.$emit('update:page', page);
+                this.d_page = page;
 
-					this.d_numScroll = matchedResponsiveOptionsData.numScroll;
+                stateChanged = true;
+            }
 
-					this.$emit('update:page', page);
-					this.d_page = page;
-				}
+            totalShiftedItems = page * this.d_numScroll * -1;
 
-				if (this.d_numVisible !== matchedResponsiveOptionsData.numVisible) {
-					this.d_numVisible = matchedResponsiveOptionsData.numVisible;
-				}
-			}
-		},
-		navBackward(e,index){
-			if (this.d_circular || this.d_page !== 0) {
-				this.step(1, index);
-			}
+            if (isCircular) {
+                totalShiftedItems -= this.d_numVisible;
+            }
 
-			this.allowAutoplay = false;
+            if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
+                totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
+                this.isRemainingItemsAdded = true;
+            } else {
+                this.isRemainingItemsAdded = false;
+            }
 
-			if (e.cancelable) {
-				e.preventDefault();
-			}
-		},
-		navForward(e,index){
-			if (this.d_circular || this.d_page < (this.totalIndicators - 1)) {
-				this.step(-1, index);
-			}
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
 
-			this.allowAutoplay = false;
+                stateChanged = true;
+            }
 
-			if (e.cancelable) {
-				e.preventDefault();
-			}
-		},
-		onIndicatorClick(e, index) {
-			let page = this.d_page;
+            this.d_oldNumScroll = this.d_numScroll;
+            this.d_oldNumVisible = this.d_numVisible;
+            this.d_oldValue = this.value;
 
-			if (index > page) {
-				this.navForward(e, index);
-			}
-			else if (index < page) {
-				this.navBackward(e, index);
-			}
-		},
-		onTransitionEnd() {
-			if (this.$refs.itemsContainer) {
-				DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
-				this.$refs.itemsContainer.style.transition = '';
+            this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+        }
 
-				if ((this.d_page === 0 || this.d_page === (this.totalIndicators - 1)) && this.isCircular()) {
-					this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
-				}
-			}
-		},
-		onTouchStart(e) {
-			let touchobj = e.changedTouches[0];
+        if (isCircular) {
+            if (this.d_page === 0) {
+                totalShiftedItems = -1 * this.d_numVisible;
+            } else if (totalShiftedItems === 0) {
+                totalShiftedItems = -1 * this.value.length;
 
-			this.startPos = {
-				x: touchobj.pageX,
-				y: touchobj.pageY
-			};
-		},
-		onTouchMove(e) {
-			if (e.cancelable) {
-				e.preventDefault();
-			}
-		},
-		onTouchEnd(e) {
-			let touchobj = e.changedTouches[0];
+                if (this.remainingItems > 0) {
+                    this.isRemainingItemsAdded = true;
+                }
+            }
 
-			if (this.isVertical()) {
-				this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-			}
-			else {
-				this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
-			}
-		},
-		changePageOnTouch(e, diff) {
-			if (Math.abs(diff) > this.swipeThreshold) {
-				if (diff < 0) {           // left
-					this.navForward(e);
-				}
-				else {                    // right
-					this.navBackward(e);
-				}
-			}
-		},
-		bindDocumentListeners() {
-			if (!this.documentResizeListener) {
-				this.documentResizeListener = (e) => {
-					this.calculatePosition(e);
-				};
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
 
-				window.addEventListener('resize', this.documentResizeListener);
-			}
-		},
-		unbindDocumentListeners() {
-			if(this.documentResizeListener) {
-				window.removeEventListener('resize', this.documentResizeListener);
-				this.documentResizeListener = null;
-			}
-		},
-		startAutoplay() {
-			this.interval = setInterval(() => {
-					if(this.d_page === (this.totalIndicators - 1)) {
-						this.step(-1, 0);
-					}
-					else {
-						this.step(-1, this.d_page + 1);
-					}
-				},
-				this.autoplayInterval);
-		},
-		stopAutoplay() {
-			if (this.interval) {
-				clearInterval(this.interval);
-			}
-		},
-		createStyle() {
-			if (!this.carouselStyle) {
-				this.carouselStyle = document.createElement('style');
-				this.carouselStyle.type = 'text/css';
-				document.body.appendChild(this.carouselStyle);
-			}
+                stateChanged = true;
+            }
+        }
 
-			let innerHTML = `
+        if (!stateChanged && this.isAutoplay()) {
+            this.startAutoplay();
+        }
+    },
+    beforeUnmount() {
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
+        }
+
+        if (this.autoplayInterval) {
+            this.stopAutoplay();
+        }
+    },
+    methods: {
+        step(dir, page) {
+            let totalShiftedItems = this.totalShiftedItems;
+            const isCircular = this.isCircular();
+
+            if (page != null) {
+                totalShiftedItems = this.d_numScroll * page * -1;
+
+                if (isCircular) {
+                    totalShiftedItems -= this.d_numVisible;
+                }
+
+                this.isRemainingItemsAdded = false;
+            } else {
+                totalShiftedItems += this.d_numScroll * dir;
+
+                if (this.isRemainingItemsAdded) {
+                    totalShiftedItems += this.remainingItems - this.d_numScroll * dir;
+                    this.isRemainingItemsAdded = false;
+                }
+
+                let originalShiftedItems = isCircular ? totalShiftedItems + this.d_numVisible : totalShiftedItems;
+
+                page = Math.abs(Math.floor(originalShiftedItems / this.d_numScroll));
+            }
+
+            if (isCircular && this.d_page === this.totalIndicators - 1 && dir === -1) {
+                totalShiftedItems = -1 * (this.value.length + this.d_numVisible);
+                page = 0;
+            } else if (isCircular && this.d_page === 0 && dir === 1) {
+                totalShiftedItems = 0;
+                page = this.totalIndicators - 1;
+            } else if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
+                totalShiftedItems += this.remainingItems * -1 - this.d_numScroll * dir;
+                this.isRemainingItemsAdded = true;
+            }
+
+            if (this.$refs.itemsContainer) {
+                DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
+                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
+            }
+
+            this.totalShiftedItems = totalShiftedItems;
+
+            this.$emit('update:page', page);
+            this.d_page = page;
+        },
+        calculatePosition() {
+            if (this.$refs.itemsContainer && this.responsiveOptions) {
+                let windowWidth = window.innerWidth;
+                let matchedResponsiveOptionsData = {
+                    numVisible: this.numVisible,
+                    numScroll: this.numScroll
+                };
+
+                for (let i = 0; i < this.responsiveOptions.length; i++) {
+                    let res = this.responsiveOptions[i];
+
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveOptionsData = res;
+                    }
+                }
+
+                if (this.d_numScroll !== matchedResponsiveOptionsData.numScroll) {
+                    let page = this.d_page;
+
+                    page = parseInt((page * this.d_numScroll) / matchedResponsiveOptionsData.numScroll);
+
+                    this.totalShiftedItems = matchedResponsiveOptionsData.numScroll * page * -1;
+
+                    if (this.isCircular()) {
+                        this.totalShiftedItems -= matchedResponsiveOptionsData.numVisible;
+                    }
+
+                    this.d_numScroll = matchedResponsiveOptionsData.numScroll;
+
+                    this.$emit('update:page', page);
+                    this.d_page = page;
+                }
+
+                if (this.d_numVisible !== matchedResponsiveOptionsData.numVisible) {
+                    this.d_numVisible = matchedResponsiveOptionsData.numVisible;
+                }
+            }
+        },
+        navBackward(e, index) {
+            if (this.d_circular || this.d_page !== 0) {
+                this.step(1, index);
+            }
+
+            this.allowAutoplay = false;
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        navForward(e, index) {
+            if (this.d_circular || this.d_page < this.totalIndicators - 1) {
+                this.step(-1, index);
+            }
+
+            this.allowAutoplay = false;
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        onIndicatorClick(e, index) {
+            let page = this.d_page;
+
+            if (index > page) {
+                this.navForward(e, index);
+            } else if (index < page) {
+                this.navBackward(e, index);
+            }
+        },
+        onTransitionEnd() {
+            if (this.$refs.itemsContainer) {
+                DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
+                this.$refs.itemsContainer.style.transition = '';
+
+                if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {
+                    this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+                }
+            }
+        },
+        onTouchStart(e) {
+            let touchobj = e.changedTouches[0];
+
+            this.startPos = {
+                x: touchobj.pageX,
+                y: touchobj.pageY
+            };
+        },
+        onTouchMove(e) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        onTouchEnd(e) {
+            let touchobj = e.changedTouches[0];
+
+            if (this.isVertical()) {
+                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+            } else {
+                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
+            }
+        },
+        changePageOnTouch(e, diff) {
+            if (Math.abs(diff) > this.swipeThreshold) {
+                if (diff < 0) {
+                    // left
+                    this.navForward(e);
+                } else {
+                    // right
+                    this.navBackward(e);
+                }
+            }
+        },
+        bindDocumentListeners() {
+            if (!this.documentResizeListener) {
+                this.documentResizeListener = (e) => {
+                    this.calculatePosition(e);
+                };
+
+                window.addEventListener('resize', this.documentResizeListener);
+            }
+        },
+        unbindDocumentListeners() {
+            if (this.documentResizeListener) {
+                window.removeEventListener('resize', this.documentResizeListener);
+                this.documentResizeListener = null;
+            }
+        },
+        startAutoplay() {
+            this.interval = setInterval(() => {
+                if (this.d_page === this.totalIndicators - 1) {
+                    this.step(-1, 0);
+                } else {
+                    this.step(-1, this.d_page + 1);
+                }
+            }, this.autoplayInterval);
+        },
+        stopAutoplay() {
+            if (this.interval) {
+                clearInterval(this.interval);
+            }
+        },
+        createStyle() {
+            if (!this.carouselStyle) {
+                this.carouselStyle = document.createElement('style');
+                this.carouselStyle.type = 'text/css';
+                document.body.appendChild(this.carouselStyle);
+            }
+
+            let innerHTML = `
             #${this.id} .p-carousel-item {
-                flex: 1 0 ${ (100/ this.d_numVisible) }%
+                flex: 1 0 ${100 / this.d_numVisible}%
             }
         `;
 
-			if (this.responsiveOptions) {
-				let _responsiveOptions = [...this.responsiveOptions];
-				_responsiveOptions.sort((data1, data2) => {
-					const value1 = data1.breakpoint;
-					const value2 = data2.breakpoint;
-					let result = null;
+            if (this.responsiveOptions) {
+                let _responsiveOptions = [...this.responsiveOptions];
 
-					if (value1 == null && value2 != null)
-						result = -1;
-					else if (value1 != null && value2 == null)
-						result = 1;
-					else if (value1 == null && value2 == null)
-						result = 0;
-					else if (typeof value1 === 'string' && typeof value2 === 'string')
-						result = value1.localeCompare(value2, undefined, { numeric: true });
-					else
-						result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                _responsiveOptions.sort((data1, data2) => {
+                    const value1 = data1.breakpoint;
+                    const value2 = data2.breakpoint;
+                    let result = null;
 
-					return -1 * result;
-				});
+                    if (value1 == null && value2 != null) result = -1;
+                    else if (value1 != null && value2 == null) result = 1;
+                    else if (value1 == null && value2 == null) result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
-				for (let i = 0; i < _responsiveOptions.length; i++) {
-					let res = _responsiveOptions[i];
+                    return -1 * result;
+                });
 
-					innerHTML += `
+                for (let i = 0; i < _responsiveOptions.length; i++) {
+                    let res = _responsiveOptions[i];
+
+                    innerHTML += `
                     @media screen and (max-width: ${res.breakpoint}) {
                         #${this.id} .p-carousel-item {
-                            flex: 1 0 ${ (100/ res.numVisible) }%
+                            flex: 1 0 ${100 / res.numVisible}%
                         }
                     }
-                `
-				}
-			}
+                `;
+                }
+            }
 
-			this.carouselStyle.innerHTML = innerHTML;
-		},
-		isVertical() {
-			return this.orientation === 'vertical';
-		},
-		isCircular() {
-			return this.value && this.d_circular && this.value.length >= this.d_numVisible;
-		},
-		isAutoplay() {
-			return this.autoplayInterval && this.allowAutoplay;
-		},
-		firstIndex() {
-			return this.isCircular()? (-1 * (this.totalShiftedItems + this.d_numVisible)) : (this.totalShiftedItems * -1);
-		},
-		lastIndex() {
-			return (this.firstIndex() + this.d_numVisible - 1);
-		}
-	},
-	mounted() {
-		let stateChanged = false;
-		this.createStyle();
-		this.calculatePosition();
-
-		if (this.responsiveOptions) {
-			this.bindDocumentListeners();
-		}
-
-		if (this.isCircular()) {
-			let totalShiftedItems = this.totalShiftedItems;
-
-			if (this.d_page === 0) {
-				totalShiftedItems = -1 * this.d_numVisible;
-			}
-			else if (totalShiftedItems === 0) {
-				totalShiftedItems = -1 * this.value.length;
-				if (this.remainingItems > 0) {
-					this.isRemainingItemsAdded = true;
-				}
-			}
-
-			if (totalShiftedItems !== this.totalShiftedItems) {
-				this.totalShiftedItems = totalShiftedItems;
-
-				stateChanged = true;
-			}
-		}
-
-		if (!stateChanged && this.isAutoplay()) {
-			this.startAutoplay();
-		}
-	},
-	updated() {
-		const isCircular = this.isCircular();
-		let stateChanged = false;
-		let totalShiftedItems = this.totalShiftedItems;
-
-		if (this.autoplayInterval) {
-			this.stopAutoplay();
-		}
-
-		if(this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
-			this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
-
-			let page = this.d_page;
-			if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
-				page = this.totalIndicators - 1;
-
-				this.$emit('update:page', page);
-				this.d_page = page;
-
-				stateChanged = true;
-			}
-
-			totalShiftedItems = (page * this.d_numScroll) * -1;
-			if (isCircular) {
-				totalShiftedItems -= this.d_numVisible;
-			}
-
-			if (page === (this.totalIndicators - 1) && this.remainingItems > 0) {
-				totalShiftedItems += (-1 * this.remainingItems) + this.d_numScroll;
-				this.isRemainingItemsAdded = true;
-			}
-			else {
-				this.isRemainingItemsAdded = false;
-			}
-
-			if (totalShiftedItems !== this.totalShiftedItems) {
-				this.totalShiftedItems = totalShiftedItems;
-
-				stateChanged = true;
-			}
-
-			this.d_oldNumScroll = this.d_numScroll;
-			this.d_oldNumVisible = this.d_numVisible;
-			this.d_oldValue = this.value;
-
-			this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
-		}
-
-		if (isCircular) {
-			if (this.d_page === 0) {
-				totalShiftedItems = -1 * this.d_numVisible;
-			}
-			else if (totalShiftedItems === 0) {
-				totalShiftedItems = -1 * this.value.length;
-				if (this.remainingItems > 0) {
-					this.isRemainingItemsAdded = true;
-				}
-			}
-
-			if (totalShiftedItems !== this.totalShiftedItems) {
-				this.totalShiftedItems = totalShiftedItems;
-
-				stateChanged = true;
-			}
-		}
-
-		if (!stateChanged && this.isAutoplay()) {
-			this.startAutoplay();
-		}
-	},
-	beforeUnmount() {
-		if (this.responsiveOptions) {
-			this.unbindDocumentListeners();
-		}
-
-		if (this.autoplayInterval) {
-			this.stopAutoplay();
-		}
-	},
-	computed: {
-		totalIndicators() {
-			return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
-		},
-		backwardIsDisabled() {
-			return (this.value && (!this.circular || this.value.length < this.d_numVisible) && this.d_page === 0);
-		},
-		forwardIsDisabled() {
-			return (this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === (this.totalIndicators - 1) || this.totalIndicators === 0));
-		},
-		containerClasses() {
-			return ['p-carousel-container', this.containerClass];
-		},
-		contentClasses() {
-			return ['p-carousel-content ', this.contentClass];
-		},
-		indicatorsContentClasses() {
-			return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
-		},
+            this.carouselStyle.innerHTML = innerHTML;
+        },
+        isVertical() {
+            return this.orientation === 'vertical';
+        },
+        isCircular() {
+            return this.value && this.d_circular && this.value.length >= this.d_numVisible;
+        },
+        isAutoplay() {
+            return this.autoplayInterval && this.allowAutoplay;
+        },
+        firstIndex() {
+            return this.isCircular() ? -1 * (this.totalShiftedItems + this.d_numVisible) : this.totalShiftedItems * -1;
+        },
+        lastIndex() {
+            return this.firstIndex() + this.d_numVisible - 1;
+        }
+    },
+    computed: {
+        totalIndicators() {
+            return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
+        },
+        backwardIsDisabled() {
+            return this.value && (!this.circular || this.value.length < this.d_numVisible) && this.d_page === 0;
+        },
+        forwardIsDisabled() {
+            return this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === this.totalIndicators - 1 || this.totalIndicators === 0);
+        },
+        containerClasses() {
+            return ['p-carousel-container', this.containerClass];
+        },
+        contentClasses() {
+            return ['p-carousel-content ', this.contentClass];
+        },
+        indicatorsContentClasses() {
+            return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
+        }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
 .p-carousel {
-	display: flex;
-	flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .p-carousel-content {
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 }
 
 .p-carousel-prev,
 .p-carousel-next {
-	align-self: center;
-	flex-grow: 0;
+    align-self: center;
+    flex-grow: 0;
     flex-shrink: 0;
     display: flex;
     justify-content: center;
@@ -551,25 +560,25 @@ export default {
 }
 
 .p-carousel-container {
-	display: flex;
-	flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 .p-carousel-items-content {
-	overflow: hidden;
+    overflow: hidden;
     width: 100%;
 }
 
 .p-carousel-items-container {
-	display: flex;
-	flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 .p-carousel-indicators {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
 .p-carousel-indicator > button {
@@ -580,20 +589,20 @@ export default {
 
 /* Vertical */
 .p-carousel-vertical .p-carousel-container {
-	flex-direction: column;
+    flex-direction: column;
 }
 
 .p-carousel-vertical .p-carousel-items-container {
-	flex-direction: column;
-	height: 100%;
+    flex-direction: column;
+    height: 100%;
 }
 
 /* Keyboard Support */
 .p-items-hidden .p-carousel-item {
-	visibility: hidden;
+    visibility: hidden;
 }
 
 .p-items-hidden .p-carousel-item.p-carousel-item-active {
-	visibility: visible;
+    visibility: visible;
 }
 </style>
diff --git a/components/cascadeselect/CascadeSelect.d.ts b/components/cascadeselect/CascadeSelect.d.ts
index 0219e76ca..fcff2b67f 100644
--- a/components/cascadeselect/CascadeSelect.d.ts
+++ b/components/cascadeselect/CascadeSelect.d.ts
@@ -25,7 +25,7 @@ export interface CascadeSelectChangeEvent {
 /**
  * @extends CascadeSelectChangeEvent
  */
-export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent { }
+export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent {}
 
 export interface CascadeSelectProps {
     /**
@@ -121,6 +121,11 @@ export interface CascadeSelectProps {
      * Default value is true.
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focused option is selected/opened.
+     * Default value is false.
+     */
+    selectOnFocus?: boolean | undefined;
     /**
      * Locale to use in searching. The default locale is the host environment's current locale.
      */
@@ -205,22 +210,22 @@ export declare type CascadeSelectEmits = {
      * Callback to invoke on value change.
      * @param { CascadeSelectChangeEvent } event - Custom change event.
      */
-    'change': (event: CascadeSelectChangeEvent) => void;
+    change: (event: CascadeSelectChangeEvent) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke on click.
      * @param { Event } event - Browser event.
      */
-    'click': (event: Event) => void;
+    click: (event: Event) => void;
     /**
      * Callback to invoke when a group changes.
      * @param { CascadeSelectGroupChangeEvent } event - Custom change event.
@@ -237,18 +242,18 @@ export declare type CascadeSelectEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
-declare class CascadeSelect extends ClassComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits> { }
+declare class CascadeSelect extends ClassComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        CascadeSelect: GlobalComponentConstructor<CascadeSelect>
+        CascadeSelect: GlobalComponentConstructor<CascadeSelect>;
     }
 }
 
@@ -258,7 +263,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [CascadeSelect](https://www.primefaces.org/primevue/showcase/#/cascadeselect)
+ * - [CascadeSelect](https://www.primefaces.org/primevue/cascadeselect)
  *
  */
 export default CascadeSelect;
diff --git a/components/cascadeselect/CascadeSelect.spec.js b/components/cascadeselect/CascadeSelect.spec.js
index 8c01a9915..d9ce8060a 100644
--- a/components/cascadeselect/CascadeSelect.spec.js
+++ b/components/cascadeselect/CascadeSelect.spec.js
@@ -23,40 +23,38 @@ describe('CascadeSelect.vue', () => {
                             {
                                 name: 'New South Wales',
                                 cities: [
-                                    {cname: 'Sydney', code: 'A-SY'},
-                                    {cname: 'Newcastle', code: 'A-NE'},
-                                    {cname: 'Wollongong', code: 'A-WO'}
+                                    { cname: 'Sydney', code: 'A-SY' },
+                                    { cname: 'Newcastle', code: 'A-NE' },
+                                    { cname: 'Wollongong', code: 'A-WO' }
                                 ]
                             },
                             {
                                 name: 'Queensland',
                                 cities: [
-                                    {cname: 'Brisbane', code: 'A-BR'},
-                                    {cname: 'Townsville', code: 'A-TO'}
+                                    { cname: 'Brisbane', code: 'A-BR' },
+                                    { cname: 'Townsville', code: 'A-TO' }
                                 ]
-                            },
-                            
+                            }
                         ]
                     },
                     {
-                        name: 'Canada', 
+                        name: 'Canada',
                         code: 'CA',
                         states: [
                             {
                                 name: 'Quebec',
                                 cities: [
-                                    {cname: 'Montreal', code: 'C-MO'},
-                                    {cname: 'Quebec City', code: 'C-QU'}
+                                    { cname: 'Montreal', code: 'C-MO' },
+                                    { cname: 'Quebec City', code: 'C-QU' }
                                 ]
                             },
                             {
                                 name: 'Ontario',
                                 cities: [
-                                    {cname: 'Ottawa', code: 'C-OT'},
-                                    {cname: 'Toronto', code: 'C-TO'}
+                                    { cname: 'Ottawa', code: 'C-OT' },
+                                    { cname: 'Toronto', code: 'C-TO' }
                                 ]
-                            },
-                            
+                            }
                         ]
                     },
                     {
@@ -66,26 +64,26 @@ describe('CascadeSelect.vue', () => {
                             {
                                 name: 'California',
                                 cities: [
-                                    {cname: 'Los Angeles', code: 'US-LA'},
-                                    {cname: 'San Diego', code: 'US-SD'},
-                                    {cname: 'San Francisco', code: 'US-SF'}
+                                    { cname: 'Los Angeles', code: 'US-LA' },
+                                    { cname: 'San Diego', code: 'US-SD' },
+                                    { cname: 'San Francisco', code: 'US-SF' }
                                 ]
                             },
                             {
                                 name: 'Florida',
                                 cities: [
-                                    {cname: 'Jacksonville', code: 'US-JA'},
-                                    {cname: 'Miami', code: 'US-MI'},
-                                    {cname: 'Tampa', code: 'US-TA'},
-                                    {cname: 'Orlando', code: 'US-OR'}
+                                    { cname: 'Jacksonville', code: 'US-JA' },
+                                    { cname: 'Miami', code: 'US-MI' },
+                                    { cname: 'Tampa', code: 'US-TA' },
+                                    { cname: 'Orlando', code: 'US-OR' }
                                 ]
                             },
                             {
                                 name: 'Texas',
                                 cities: [
-                                    {cname: 'Austin', code: 'US-AU'},
-                                    {cname: 'Dallas', code: 'US-DA'},
-                                    {cname: 'Houston', code: 'US-HO'}
+                                    { cname: 'Austin', code: 'US-AU' },
+                                    { cname: 'Dallas', code: 'US-DA' },
+                                    { cname: 'Houston', code: 'US-HO' }
                                 ]
                             }
                         ]
@@ -98,11 +96,11 @@ describe('CascadeSelect.vue', () => {
         });
     });
 
-    it('should exist', async() => { 
+    it('should exist', async () => {
         expect(wrapper.find('.p-cascadeselect.p-component').exists()).toBe(true);
     });
 
-    it('should show list and sublist', async() => { 
+    it('should show list and sublist', async () => {
         expect(wrapper.find('.p-cascadeselect.p-component').exists()).toBe(true);
 
         await wrapper.trigger('click');
@@ -112,6 +110,7 @@ describe('CascadeSelect.vue', () => {
         expect(wrapper.findAll('.p-cascadeselect-item-text')[0].text()).toBe('Australia');
 
         const firstGroup = wrapper.findAll('.p-cascadeselect-item-content')[0];
+
         await firstGroup.trigger('click');
 
         expect(wrapper.find('.p-cascadeselect-panel.p-cascadeselect-sublist').exists()).toBe(true);
@@ -121,4 +120,4 @@ describe('CascadeSelect.vue', () => {
         expect(sublist.findAll('.p-cascadeselect-item.p-cascadeselect-item-group').length).toBe(2);
         expect(sublist.findAll('.p-cascadeselect-item-text')[0].text()).toBe('New South Wales');
     });
-});
\ No newline at end of file
+});
diff --git a/components/cascadeselect/CascadeSelect.vue b/components/cascadeselect/CascadeSelect.vue
index 3f0d021bd..a742cb28d 100644
--- a/components/cascadeselect/CascadeSelect.vue
+++ b/components/cascadeselect/CascadeSelect.vue
@@ -1,13 +1,32 @@
 <template>
     <div ref="container" :class="containerClass" @click="onContainerClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" readonly :disabled="disabled" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1"
-                role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="tree" :aria-expanded="overlayVisible" :aria-controls="id + '_tree'" :aria-activedescendant="focused ? focusedOptionId : undefined"
-                @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps" />
+            <input
+                ref="focusInput"
+                :id="inputId"
+                type="text"
+                :style="inputStyle"
+                :class="inputClass"
+                readonly
+                :disabled="disabled"
+                :placeholder="placeholder"
+                :tabindex="!disabled ? tabindex : -1"
+                role="combobox"
+                :aria-label="ariaLabel"
+                :aria-labelledby="ariaLabelledby"
+                aria-haspopup="tree"
+                :aria-expanded="overlayVisible"
+                :aria-controls="id + '_tree'"
+                :aria-activedescendant="focused ? focusedOptionId : undefined"
+                @focus="onFocus"
+                @blur="onBlur"
+                @keydown="onKeyDown"
+                v-bind="inputProps"
+            />
         </div>
         <span :class="labelClass">
             <slot name="value" :value="modelValue" :placeholder="placeholder">
-                {{label}}
+                {{ label }}
             </slot>
         </span>
         <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true">
@@ -16,18 +35,32 @@
             </slot>
         </div>
         <span role="status" aria-live="polite" class="p-hidden-accessible">
-            {{searchResultMessageText}}
+            {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
                     <div class="p-cascadeselect-items-wrapper">
-                        <CascadeSelectSub :id="id + '_tree'" role="tree" aria-orientation="horizontal" :selectId="id" :focusedOptionId="focused ? focusedOptionId : undefined"
-                            :options="processedOptions" :activeOptionPath="activeOptionPath" :level="0" :templates="$slots" :optionLabel="optionLabel" :optionValue="optionValue" :optionDisabled="optionDisabled"
-                            :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" @option-change="onOptionChange" />
+                        <CascadeSelectSub
+                            :id="id + '_tree'"
+                            role="tree"
+                            aria-orientation="horizontal"
+                            :selectId="id"
+                            :focusedOptionId="focused ? focusedOptionId : undefined"
+                            :options="processedOptions"
+                            :activeOptionPath="activeOptionPath"
+                            :level="0"
+                            :templates="$slots"
+                            :optionLabel="optionLabel"
+                            :optionValue="optionValue"
+                            :optionDisabled="optionDisabled"
+                            :optionGroupLabel="optionGroupLabel"
+                            :optionGroupChildren="optionGroupChildren"
+                            @option-change="onOptionChange"
+                        />
 
                         <span role="status" aria-live="polite" class="p-hidden-accessible">
-                            {{selectedMessageText}}
+                            {{ selectedMessageText }}
                         </span>
                     </div>
                 </div>
@@ -37,7 +70,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, ObjectUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 import Portal from 'primevue/portal';
@@ -54,15 +87,36 @@ export default {
         optionGroupLabel: null,
         optionGroupChildren: null,
         placeholder: String,
-		disabled: Boolean,
+        disabled: Boolean,
         dataKey: null,
-        inputId: null,
-        inputStyle: null,
-        inputClass: null,
-        inputProps: null,
-        panelStyle: null,
-        panelClass: null,
-        panelProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
         appendTo: {
             type: String,
             default: 'body'
@@ -79,6 +133,10 @@ export default {
             type: Boolean,
             default: true
         },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
         searchLocale: {
             type: String,
             default: undefined
@@ -109,7 +167,7 @@ export default {
         },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -122,17 +180,15 @@ export default {
     overlay: null,
     searchTimeout: null,
     searchValue: null,
-    selectOnFocus: false,
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
             activeOptionPath: [],
             overlayVisible: false,
             dirty: false
-        }
+        };
     },
     watch: {
         options() {
@@ -140,7 +196,7 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
+        this.autoUpdateModel();
     },
     beforeUnmount() {
         this.unbindOutsideClickListener();
@@ -177,6 +233,7 @@ export default {
         },
         getProccessedOptionLabel(processedOption) {
             const grouped = this.isProccessedOptionGroup(processedOption);
+
             return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
         },
         isProccessedOptionGroup(processedOption) {
@@ -185,17 +242,17 @@ export default {
         show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
-            this.activeOptionPath = this.findOptionPathByValue(this.modelValue);
+            this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
 
             if (this.hasSelectedOption && ObjectUtils.isNotEmpty(this.activeOptionPath)) {
                 const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
-                this.focusedOptionInfo = { index: (this.autoOptionFocus ? processedOption.index : -1), level: processedOption.level, parentKey: processedOption.parentKey };
-            }
-            else {
-                this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' };
+
+                this.focusedOptionInfo = { index: this.autoOptionFocus ? processedOption.index : -1, level: processedOption.level, parentKey: processedOption.parentKey };
+            } else {
+                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
             }
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -204,10 +261,12 @@ export default {
                 this.activeOptionPath = [];
                 this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
 
-                isFocus && this.$refs.focusInput.focus();
-            }
+                isFocus && DomHandler.focus(this.$refs.focusInput);
+            };
 
-            setTimeout(() => { _hide() }, 0); // For ScreenReaders
+            setTimeout(() => {
+                _hide();
+            }, 0); // For ScreenReaders
         },
         onFocus(event) {
             this.focused = true;
@@ -222,9 +281,12 @@ export default {
         onKeyDown(event) {
             if (this.disabled || this.loading) {
                 event.preventDefault();
+
                 return;
             }
 
+            const metaKey = event.metaKey || event.ctrlKey;
+
             switch (event.code) {
                 case 'ArrowDown':
                     this.onArrowDownKey(event);
@@ -275,7 +337,7 @@ export default {
                     break;
 
                 default:
-                    if (ObjectUtils.isPrintableCharacter(event.key)) {
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
                         !this.overlayVisible && this.show();
                         this.searchOptions(event, event.key);
                     }
@@ -284,25 +346,29 @@ export default {
             }
         },
         onOptionChange(event) {
-            const { originalEvent, processedOption, isFocus } = event;
+            const { originalEvent, processedOption, isFocus, isHide } = event;
+
+            if (ObjectUtils.isEmpty(processedOption)) return;
+
             const { index, level, parentKey, children } = processedOption;
             const grouped = ObjectUtils.isNotEmpty(children);
 
-            const activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== parentKey);
+            const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
+
             activeOptionPath.push(processedOption);
 
             this.focusedOptionInfo = { index, level, parentKey };
             this.activeOptionPath = activeOptionPath;
 
-            grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption);
-            isFocus && this.$refs.focusInput.focus();
+            grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
-        onOptionSelect(event, processedOption) {
+        onOptionSelect(event, processedOption, isHide = true) {
             const value = this.getOptionValue(processedOption.option);
 
-            this.activeOptionPath.forEach(p => p.selected = true);
+            this.activeOptionPath.forEach((p) => (p.selected = true));
             this.updateModel(event, value);
-            this.hide(true);
+            isHide && this.hide(true);
         },
         onOptionGroupSelect(event, processedOption) {
             this.dirty = true;
@@ -315,7 +381,7 @@ export default {
 
             if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide() : this.show();
-                this.$refs.focusInput.focus();
+                DomHandler.focus(this.$refs.focusInput);
             }
 
             this.$emit('click', event);
@@ -349,13 +415,13 @@ export default {
                 if (this.focusedOptionInfo.index !== -1) {
                     const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                     const grouped = this.isProccessedOptionGroup(processedOption);
+
                     !grouped && this.onOptionChange({ originalEvent: event, processedOption });
                 }
 
                 this.overlayVisible && this.hide();
                 event.preventDefault();
-            }
-            else {
+            } else {
                 const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
@@ -367,12 +433,12 @@ export default {
         onArrowLeftKey(event) {
             if (this.overlayVisible) {
                 const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
-                const parentOption = this.activeOptionPath.find(p => p.key === processedOption.parentKey);
+                const parentOption = this.activeOptionPath.find((p) => p.key === processedOption.parentKey);
                 const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
                 const root = ObjectUtils.isEmpty(processedOption.parent);
 
                 if (matched) {
-                    this.activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== this.focusedOptionInfo.parentKey);
+                    this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
                 }
 
                 if (!root) {
@@ -390,14 +456,13 @@ export default {
                 const grouped = this.isProccessedOptionGroup(processedOption);
 
                 if (grouped) {
-                    const matched = this.activeOptionPath.some(p => processedOption.key === p.key);
+                    const matched = this.activeOptionPath.some((p) => processedOption.key === p.key);
 
                     if (matched) {
                         this.focusedOptionInfo = { index: -1, parentKey: processedOption.key };
                         this.searchValue = '';
                         this.onArrowDownKey(event);
-                    }
-                    else {
+                    } else {
                         this.onOptionChange({ originalEvent: event, processedOption });
                     }
                 }
@@ -420,8 +485,7 @@ export default {
         onEnterKey(event) {
             if (!this.overlayVisible) {
                 this.onArrowDownKey(event);
-            }
-            else {
+            } else {
                 if (this.focusedOptionInfo.index !== -1) {
                     const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                     const grouped = this.isProccessedOptionGroup(processedOption);
@@ -477,8 +541,7 @@ export default {
         alignOverlay() {
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$el);
             }
@@ -490,6 +553,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -522,6 +586,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -541,31 +606,35 @@ export default {
             return this.isValidOption(processedOption) && this.isSelected(processedOption);
         },
         isSelected(processedOption) {
-            return this.activeOptionPath.some(p => p.key === processedOption.key);
+            return this.activeOptionPath.some((p) => p.key === processedOption.key);
         },
         findFirstOptionIndex() {
-            return this.visibleOptions.findIndex(processedOption => this.isValidOption(processedOption));
+            return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
         },
         findLastOptionIndex() {
-            return ObjectUtils.findLastIndex(this.visibleOptions, processedOption => this.isValidOption(processedOption));
+            return ObjectUtils.findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
         },
         findNextOptionIndex(index) {
-            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(processedOption => this.isValidOption(processedOption)) : -1;
+            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
         findPrevOptionIndex(index) {
-            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), processedOption => this.isValidOption(processedOption)) : -1;
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.visibleOptions.findIndex(processedOption => this.isValidSelectedOption(processedOption));
+            return this.visibleOptions.findIndex((processedOption) => this.isValidSelectedOption(processedOption));
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         findOptionPathByValue(value, processedOptions, level = 0) {
@@ -582,6 +651,7 @@ export default {
                 }
 
                 const matchedOptions = this.findOptionPathByValue(value, processedOption.children, level + 1);
+
                 if (matchedOptions) {
                     matchedOptions.unshift(processedOption);
 
@@ -596,11 +666,10 @@ export default {
             let matched = false;
 
             if (this.focusedOptionInfo.index !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
-            }
-            else {
-                optionIndex = this.visibleOptions.findIndex(processedOption => this.isOptionMatched(processedOption));
+                optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
+                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
+            } else {
+                optionIndex = this.visibleOptions.findIndex((processedOption) => this.isOptionMatched(processedOption));
             }
 
             if (optionIndex !== -1) {
@@ -632,13 +701,14 @@ export default {
                 this.scrollInView();
 
                 if (this.selectOnFocus) {
-                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                    this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false });
                 }
             }
         },
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
             const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
             }
@@ -646,8 +716,9 @@ export default {
         autoUpdateModel() {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
                 this.focusedOptionInfo.index = this.findFirstFocusedOptionIndex();
-                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionInfo.index]);
-                this.updateModel(null, value);
+                this.onOptionChange({ processedOption: this.visibleOptions[this.focusedOptionInfo.index], isHide: false });
+
+                !this.overlayVisible && (this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' });
             }
         },
         updateModel(event, value) {
@@ -657,20 +728,21 @@ export default {
         createProcessedOptions(options, level = 0, parent = {}, parentKey = '') {
             const processedOptions = [];
 
-            options && options.forEach((option, index) => {
-                const key = (parentKey !== '' ? parentKey + '_' : '') + index;
-                const newOption = {
-                    option,
-                    index,
-                    level,
-                    key,
-                    parent,
-                    parentKey
-                }
+            options &&
+                options.forEach((option, index) => {
+                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                    const newOption = {
+                        option,
+                        index,
+                        level,
+                        key,
+                        parent,
+                        parentKey
+                    };
 
-                newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);
-                processedOptions.push(newOption);
-            });
+                    newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);
+                    processedOptions.push(newOption);
+                });
 
             return processedOptions;
         },
@@ -680,25 +752,35 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-cascadeselect p-component p-inputwrapper', {
-                'p-disabled': this.disabled,
-                'p-focus': this.focused,
-                'p-inputwrapper-filled': this.modelValue,
-                'p-inputwrapper-focus': this.focused || this.overlayVisible,
-                'p-overlay-open': this.overlayVisible
-            }];
+            return [
+                'p-cascadeselect p-component p-inputwrapper',
+                {
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': this.modelValue,
+                    'p-inputwrapper-focus': this.focused || this.overlayVisible,
+                    'p-overlay-open': this.overlayVisible
+                }
+            ];
         },
         labelClass() {
-            return ['p-cascadeselect-label', {
-                'p-placeholder': this.label === this.placeholder,
-                'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
-            }];
+            return [
+                'p-cascadeselect-label',
+                {
+                    'p-placeholder': this.label === this.placeholder,
+                    'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
+                }
+            ];
         },
         panelStyleClass() {
-            return ['p-cascadeselect-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-cascadeselect-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         dropdownIconClass() {
             return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
@@ -711,7 +793,7 @@ export default {
 
             if (this.hasSelectedOption) {
                 const activeOptionPath = this.findOptionPathByValue(this.modelValue);
-                const processedOption = activeOptionPath.length ? activeOptionPath[activeOptionPath.length - 1] : null;
+                const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
 
                 return processedOption ? this.getOptionLabel(processedOption.option) : label;
             }
@@ -722,7 +804,8 @@ export default {
             return this.createProcessedOptions(this.options || []);
         },
         visibleOptions() {
-            const processedOption = this.activeOptionPath.find(p => p.key === this.focusedOptionInfo.parentKey);
+            const processedOption = this.activeOptionPath.find((p) => p.key === this.focusedOptionInfo.parentKey);
+
             return processedOption ? processedOption.children : this.processedOptions;
         },
         equalityKey() {
@@ -749,15 +832,18 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
         }
     },
     components: {
-        'CascadeSelectSub': CascadeSelectSub,
-        'Portal': Portal
+        CascadeSelectSub: CascadeSelectSub,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/cascadeselect/CascadeSelectSub.vue b/components/cascadeselect/CascadeSelectSub.vue
index 72bd9413e..454e491d2 100644
--- a/components/cascadeselect/CascadeSelectSub.vue
+++ b/components/cascadeselect/CascadeSelectSub.vue
@@ -1,24 +1,54 @@
 <template>
     <ul class="p-cascadeselect-panel p-cascadeselect-items">
-        <template v-for="(processedOption,index) of options" :key="getOptionLabelToRender(processedOption)">
-            <li :id="getOptionId(processedOption)" :class="['p-cascadeselect-item', {'p-cascadeselect-item-group': isOptionGroup(processedOption), 'p-cascadeselect-item-active p-highlight': isOptionActive(processedOption), 'p-focus': isOptionFocused(processedOption), 'p-disabled': isOptionDisabled(processedOption)}]"
-                role="treeitem" :aria-label="getOptionLabelToRender(processedOption)" :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)" :aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
-                :aria-setsize="processedOption.length" :aria-posinset="index + 1" :aria-level="level + 1">
-                <div class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)" v-ripple>
+        <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
+            <li
+                :id="getOptionId(processedOption)"
+                :class="[
+                    'p-cascadeselect-item',
+                    {
+                        'p-cascadeselect-item-group': isOptionGroup(processedOption),
+                        'p-cascadeselect-item-active p-highlight': isOptionActive(processedOption),
+                        'p-focus': isOptionFocused(processedOption),
+                        'p-disabled': isOptionDisabled(processedOption)
+                    }
+                ]"
+                role="treeitem"
+                :aria-label="getOptionLabelToRender(processedOption)"
+                :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
+                :aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
+                :aria-setsize="processedOption.length"
+                :aria-posinset="index + 1"
+                :aria-level="level + 1"
+            >
+                <div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else class="p-cascadeselect-item-text">{{getOptionLabelToRender(processedOption)}}</span>
+                    <span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span>
                     <span v-if="isOptionGroup(processedOption)" class="p-cascadeselect-group-icon pi pi-angle-right" aria-hidden="true"></span>
                 </div>
-                <CascadeSelectSub v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)" role="group" class="p-cascadeselect-sublist" :selectId="selectId" :focusedOptionId="focusedOptionId"
-                    :options="getOptionGroupChildren(processedOption)" :activeOptionPath="activeOptionPath" :level="level + 1" :templates="templates" :optionLabel="optionLabel" :optionValue="optionValue" :optionDisabled="optionDisabled"
-                    :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" @option-change="onOptionChange" />
+                <CascadeSelectSub
+                    v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
+                    role="group"
+                    class="p-cascadeselect-sublist"
+                    :selectId="selectId"
+                    :focusedOptionId="focusedOptionId"
+                    :options="getOptionGroupChildren(processedOption)"
+                    :activeOptionPath="activeOptionPath"
+                    :level="level + 1"
+                    :templates="templates"
+                    :optionLabel="optionLabel"
+                    :optionValue="optionValue"
+                    :optionDisabled="optionDisabled"
+                    :optionGroupLabel="optionGroupLabel"
+                    :optionGroupChildren="optionGroupChildren"
+                    @option-change="onOptionChange"
+                />
             </li>
         </template>
     </ul>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -68,7 +98,7 @@ export default {
             return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
         },
         isOptionActive(processedOption) {
-            return this.activeOptionPath.some(path => path.key === processedOption.key);
+            return this.activeOptionPath.some((path) => path.key === processedOption.key);
         },
         isOptionFocused(processedOption) {
             return this.focusedOptionId === this.getOptionId(processedOption);
@@ -89,13 +119,13 @@ export default {
             const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
             const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
 
-            if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
                 this.$el.style.left = '-100%';
             }
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/chart/Chart.d.ts b/components/chart/Chart.d.ts
index eb0ea4ba5..d2cc5c2b6 100755
--- a/components/chart/Chart.d.ts
+++ b/components/chart/Chart.d.ts
@@ -44,21 +44,20 @@ export interface ChartProps {
     height?: number | undefined;
 }
 
-export interface ChartSlots {
-}
+export interface ChartSlots {}
 
 export declare type ChartEmits = {
     /**
      * Callback to invoke when a tab gets expanded.
      * @param {ChartSelectEvent} event - Custom select event.
      */
-    'select': (event: ChartSelectEvent) => void;
+    select: (event: ChartSelectEvent) => void;
     /**
      * Callback to invoke when chart is loaded.
      * @param {*} chart - Chart instance.
      */
-    'loaded': (chart: any) => void;
-}
+    loaded: (chart: any) => void;
+};
 
 declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
     /**
@@ -89,7 +88,7 @@ declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Chart: GlobalComponentConstructor<Chart>
+        Chart: GlobalComponentConstructor<Chart>;
     }
 }
 
@@ -103,7 +102,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Chart](https://www.primefaces.org/primevue/showcase/#/chart)
+ * - [Chart](https://www.primefaces.org/primevue/chart)
  *
  */
 export default Chart;
diff --git a/components/chart/Chart.vue b/components/chart/Chart.vue
index 7520d5e84..2c329ad1b 100755
--- a/components/chart/Chart.vue
+++ b/components/chart/Chart.vue
@@ -20,18 +20,9 @@ export default {
         height: {
             type: Number,
             default: 150
-        },
-    },
-    chart: null,
-    mounted() {
-        this.initChart();
-    },
-    beforeUnmount() {
-        if (this.chart) {
-            this.chart.destroy();
-            this.chart = null;
         }
     },
+    chart: null,
     watch: {
         /*
          * Use deep watch to enable triggering watch for changes within structure
@@ -50,6 +41,15 @@ export default {
             this.reinit();
         }
     },
+    mounted() {
+        this.initChart();
+    },
+    beforeUnmount() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    },
     methods: {
         initChart() {
             import('chart.js/auto').then((module) => {
@@ -93,7 +93,7 @@ export default {
                 const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
 
                 if (element && element[0] && dataset) {
-                    this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
+                    this.$emit('select', { originalEvent: event, element: element[0], dataset: dataset });
                 }
             }
         },
@@ -103,7 +103,7 @@ export default {
             }
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/checkbox/Checkbox.d.ts b/components/checkbox/Checkbox.d.ts
index 835074f8a..7e2191ca6 100755
--- a/components/checkbox/Checkbox.d.ts
+++ b/components/checkbox/Checkbox.d.ts
@@ -51,8 +51,8 @@ export interface CheckboxProps {
      */
     inputClass?: any | undefined;
     /**
-      * Inline style of the input field.
-      */
+     * Inline style of the input field.
+     */
     inputStyle?: any | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
@@ -68,8 +68,7 @@ export interface CheckboxProps {
     'aria-label'?: string | undefined;
 }
 
-export interface CheckboxSlots {
-}
+export interface CheckboxSlots {}
 
 export declare type CheckboxEmits = {
     /**
@@ -81,24 +80,24 @@ export declare type CheckboxEmits = {
      * Callback to invoke on value click.
      * @param {MouseEvent} event - Browser event.
      */
-    'click': (event: MouseEvent) => void;
+    click: (event: MouseEvent) => void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
+    change: (event: Event) => void;
     /**
      * Callback to invoke on value change.
      * @param {boolean} value - New value.
      */
-    'input': (value: boolean) => void;
-}
+    input: (value: boolean) => void;
+};
 
-declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> { }
+declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Checkbox: GlobalComponentConstructor<Checkbox>
+        Checkbox: GlobalComponentConstructor<Checkbox>;
     }
 }
 
@@ -108,7 +107,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Checkbox](https://www.primefaces.org/primevue/showcase/#/checkbox)
+ * - [Checkbox](https://www.primefaces.org/primevue/checkbox)
  *
  */
 export default Checkbox;
diff --git a/components/checkbox/Checkbox.spec.js b/components/checkbox/Checkbox.spec.js
index 7f68f569b..9d1135450 100644
--- a/components/checkbox/Checkbox.spec.js
+++ b/components/checkbox/Checkbox.spec.js
@@ -25,4 +25,4 @@ describe('Checkbox.vue', () => {
         expect(wrapper.find('.p-checkbox-box.p-highlight').exists()).toBe(true);
         expect(wrapper.find('.p-checkbox-icon.pi.pi-check').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue
index bc2a999d9..6ab522fe7 100755
--- a/components/checkbox/Checkbox.vue
+++ b/components/checkbox/Checkbox.vue
@@ -1,17 +1,34 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                :value="value"
+                :class="inputClass"
+                :style="inputStyle"
+                :name="name"
+                :checked="checked"
+                :tabindex="tabindex"
+                :disabled="disabled"
+                :readonly="readonly"
+                :required="required"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </div>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
 
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Checkbox',
@@ -48,13 +65,25 @@ export default {
             type: Number,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -64,7 +93,7 @@ export default {
     data() {
         return {
             focused: false
-        }
+        };
     },
     methods: {
         onClick(event) {
@@ -73,12 +102,9 @@ export default {
 
                 if (this.binary) {
                     newModelValue = this.checked ? this.falseValue : this.trueValue;
-                }
-                else {
-                    if (this.checked)
-                        newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
-                    else
-                        newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
+                } else {
+                    if (this.checked) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
+                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
                 }
 
                 this.$emit('click', event);
@@ -103,12 +129,14 @@ export default {
         },
         containerClass() {
             return [
-                'p-checkbox p-component', {
+                'p-checkbox p-component',
+                {
                     'p-checkbox-checked': this.checked,
                     'p-checkbox-disabled': this.disabled,
                     'p-checkbox-focused': this.focused
-                }];
+                }
+            ];
         }
     }
-}
+};
 </script>
diff --git a/components/chip/Chip.d.ts b/components/chip/Chip.d.ts
index 20d5648cc..fd9376c5d 100644
--- a/components/chip/Chip.d.ts
+++ b/components/chip/Chip.d.ts
@@ -37,14 +37,14 @@ export declare type ChipEmits = {
      * Callback to invoke when a chip is removed.
      * @param {Event} event - Browser event.
      */
-    'remove': (event: Event) => void;
-}
+    remove: (event: Event) => void;
+};
 
-declare class Chip extends ClassComponent<ChipProps, ChipSlots, ChipEmits> { }
+declare class Chip extends ClassComponent<ChipProps, ChipSlots, ChipEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Chip: GlobalComponentConstructor<Chip>
+        Chip: GlobalComponentConstructor<Chip>;
     }
 }
 
@@ -54,7 +54,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Chip](https://www.primefaces.org/primevue/showcase/#/chip)
+ * - [Chip](https://www.primefaces.org/primevue/chip)
  *
  */
 export default Chip;
diff --git a/components/chip/Chip.spec.js b/components/chip/Chip.spec.js
index 751bd284a..47e1fe62b 100644
--- a/components/chip/Chip.spec.js
+++ b/components/chip/Chip.spec.js
@@ -13,7 +13,7 @@ describe('Chip.vue', () => {
             }
         });
     });
-    
+
     it('should exists', () => {
         expect(wrapper.find('.p-chip.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-chip-icon').classes()).toContain('pi-primevue');
@@ -22,8 +22,8 @@ describe('Chip.vue', () => {
     });
 
     it('should close icon work', async () => {
-        await wrapper.find('.p-chip-remove-icon').trigger('click')
-        
+        await wrapper.find('.p-chip-remove-icon').trigger('click');
+
         expect(wrapper.find('.p-chip.p-component').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/chip/Chip.vue b/components/chip/Chip.vue
index 0f25372ae..719eecf60 100644
--- a/components/chip/Chip.vue
+++ b/components/chip/Chip.vue
@@ -1,12 +1,11 @@
 <template>
-    <div :class="containerClass" v-if="visible">
+    <div v-if="visible" :class="containerClass">
         <slot>
-            <img :src="image" v-if="image">
-            <span :class="iconClass" v-else-if="icon"></span>
-            <div class="p-chip-text" v-if="label">{{label}}</div>
+            <img v-if="image" :src="image" />
+            <span v-else-if="icon" :class="iconClass"></span>
+            <div v-if="label" class="p-chip-text">{{ label }}</div>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass"
-            @click="close" @keydown.enter="close"></span>
+        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown.enter="close"></span>
     </div>
 </template>
 
@@ -39,7 +38,7 @@ export default {
     data() {
         return {
             visible: true
-        }
+        };
     },
     methods: {
         close(event) {
@@ -49,9 +48,12 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-chip p-component', {
-                'p-chip-image': this.image != null
-            }];
+            return [
+                'p-chip p-component',
+                {
+                    'p-chip-image': this.image != null
+                }
+            ];
         },
         iconClass() {
             return ['p-chip-icon', this.icon];
@@ -60,7 +62,7 @@ export default {
             return ['p-chip-remove-icon', this.removeIcon];
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/chips/Chips.d.ts b/components/chips/Chips.d.ts
index 4f5f70f31..6f5a9968b 100755
--- a/components/chips/Chips.d.ts
+++ b/components/chips/Chips.d.ts
@@ -15,7 +15,7 @@ export interface ChipsAddEvent {
 /**
  * @extends ChipsAddEvent
  */
-export interface ChipsRemoveEvent extends ChipsAddEvent { }
+export interface ChipsRemoveEvent extends ChipsAddEvent {}
 
 export interface ChipsProps {
     /**
@@ -96,19 +96,19 @@ export declare type ChipsEmits = {
      * Callback to invoke when a chip is added.
      * @param {ChipsAddEvent} event - Custom add event.
      */
-    'add': (event: ChipsAddEvent) => void;
+    add: (event: ChipsAddEvent) => void;
     /**
      * Callback to invoke when a chip is removed.
      * @param {ChipsRemoveEvent} event - Custom remove event.
      */
-    'remove': (event: ChipsRemoveEvent) => void;
-}
+    remove: (event: ChipsRemoveEvent) => void;
+};
 
-declare class Chips extends ClassComponent<ChipsProps, ChipsSlots, ChipsEmits> { }
+declare class Chips extends ClassComponent<ChipsProps, ChipsSlots, ChipsEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Chips: GlobalComponentConstructor<Chips>
+        Chips: GlobalComponentConstructor<Chips>;
     }
 }
 
@@ -118,7 +118,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Chips](https://www.primefaces.org/primevue/showcase/#/chips)
+ * - [Chips](https://www.primefaces.org/primevue/chips)
  *
  */
 export default Chips;
diff --git a/components/chips/Chips.spec.js b/components/chips/Chips.spec.js
index 719975009..70ed685b2 100644
--- a/components/chips/Chips.spec.js
+++ b/components/chips/Chips.spec.js
@@ -18,10 +18,10 @@ describe('Chips.vue', () => {
         expect(wrapper.find('li.p-chips-input-token').exists()).toBe(true);
     });
 
-    it('should add item', async() => {
+    it('should add item', async () => {
         const addItem = jest.spyOn(wrapper.vm, 'addItem');
-        
-        await wrapper.vm.addItem({},'PrimeVue', false);
+
+        await wrapper.vm.addItem({}, 'PrimeVue', false);
 
         await wrapper.setProps({ modelValue: ['PrimeVue'] });
 
@@ -30,4 +30,4 @@ describe('Chips.vue', () => {
         expect(wrapper.find('.p-chips-token-label').exists()).toBe(true);
         expect(wrapper.find('.p-chips-token-label').text()).toBe('PrimeVue');
     });
-});
\ No newline at end of file
+});
diff --git a/components/chips/Chips.vue b/components/chips/Chips.vue
index f38690b84..a3ff0c751 100755
--- a/components/chips/Chips.vue
+++ b/components/chips/Chips.vue
@@ -1,24 +1,58 @@
 <template>
     <div :class="containerClass">
-        <ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-activedescendant="focused ? focusedOptionId : undefined"
-            @click="onWrapperClick()" @focus="onContainerFocus" @blur="onContainerBlur" @keydown="onContainerKeyDown">
-            <li v-for="(val,i) of modelValue" :key="`${i}_${val}`" :id="id + '_chips_item_' + i" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]"
-                :aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
+        <ul
+            ref="container"
+            class="p-inputtext p-chips-multiple-container"
+            tabindex="-1"
+            role="listbox"
+            aria-orientation="horizontal"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @click="onWrapperClick()"
+            @focus="onContainerFocus"
+            @blur="onContainerBlur"
+            @keydown="onContainerKeyDown"
+        >
+            <li
+                v-for="(val, i) of modelValue"
+                :key="`${i}_${val}`"
+                :id="id + '_chips_item_' + i"
+                role="option"
+                :class="['p-chips-token', { 'p-focus': focusedIndex === i }]"
+                :aria-label="val"
+                :aria-selected="true"
+                :aria-setsize="modelValue.length"
+                :aria-posinset="i + 1"
+            >
                 <slot name="chip" :value="val">
-                    <span class="p-chips-token-label">{{val}}</span>
+                    <span class="p-chips-token-label">{{ val }}</span>
                 </slot>
                 <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
             </li>
             <li class="p-chips-input-token" role="option">
-                <input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :placeholder="placeholder"
-                    @focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
+                <input
+                    ref="input"
+                    :id="inputId"
+                    type="text"
+                    :class="inputClass"
+                    :style="inputStyle"
+                    :disabled="disabled || maxedOut"
+                    :placeholder="placeholder"
+                    @focus="onFocus($event)"
+                    @blur="onBlur($event)"
+                    @input="onInput"
+                    @keydown="onKeyDown($event)"
+                    @paste="onPaste($event)"
+                    v-bind="inputProps"
+                />
             </li>
         </ul>
     </div>
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
@@ -48,17 +82,29 @@ export default {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
         disabled: {
             type: Boolean,
             default: false
         },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -89,39 +135,43 @@ export default {
         onBlur(event) {
             this.focused = false;
             this.focusedIndex = null;
+
             if (this.addOnBlur) {
                 this.addItem(event, event.target.value, false);
             }
+
             this.$emit('blur', event);
         },
         onKeyDown(event) {
             const inputValue = event.target.value;
 
-            switch(event.code) {
+            switch (event.code) {
                 case 'Backspace':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         if (this.focusedIndex !== null) {
                             this.removeItem(event, this.focusedIndex);
-                        }
-                        else this.removeItem(event, this.modelValue.length - 1);
+                        } else this.removeItem(event, this.modelValue.length - 1);
                     }
-                break;
+
+                    break;
 
                 case 'Enter':
                     if (inputValue && inputValue.trim().length && !this.maxedOut) {
                         this.addItem(event, inputValue, true);
                     }
-                break;
+
+                    break;
 
                 case 'ArrowLeft':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         this.$refs.container.focus();
                     }
-                break;
+
+                    break;
 
                 case 'ArrowRight':
                     event.stopPropagation();
-                break;
+                    break;
 
                 default:
                     if (this.separator) {
@@ -129,16 +179,19 @@ export default {
                             this.addItem(event, inputValue, true);
                         }
                     }
-                break;
+
+                    break;
             }
         },
         onPaste(event) {
             if (this.separator) {
                 let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
+
                 if (pastedData) {
                     let value = this.modelValue || [];
                     let pastedValues = pastedData.split(this.separator);
-                    pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
+
+                    pastedValues = pastedValues.filter((val) => this.allowDuplicate || value.indexOf(val) === -1);
                     value = [...value, ...pastedValues];
                     this.updateModel(event, value, true);
                 }
@@ -177,12 +230,10 @@ export default {
         },
         onArrowRightKeyOn() {
             if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-
                 if (this.focusedIndex === this.modelValue.length - 1) {
                     this.focusedIndex = null;
                     this.$refs.input.focus();
-                }
-                else {
+                } else {
                     this.focusedIndex++;
                 }
             }
@@ -207,7 +258,8 @@ export default {
         },
         addItem(event, item, preventDefault) {
             if (item && item.trim().length) {
-                let value = this.modelValue ? [...this.modelValue]: [];
+                let value = this.modelValue ? [...this.modelValue] : [];
+
                 if (this.allowDuplicate || value.indexOf(item) === -1) {
                     value.push(item);
                     this.updateModel(event, value, preventDefault);
@@ -221,6 +273,7 @@ export default {
 
             let values = [...this.modelValue];
             const removedItem = values.splice(index, 1);
+
             this.focusedIndex = null;
             this.$refs.input.focus();
             this.$emit('update:modelValue', values);
@@ -235,18 +288,21 @@ export default {
             return this.max && this.modelValue && this.max === this.modelValue.length;
         },
         containerClass() {
-            return ['p-chips p-component p-inputwrapper', {
-                'p-disabled': this.disabled,
-                'p-focus': this.focused,
-                'p-inputwrapper-filled': ((this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length)),
-                'p-inputwrapper-focus': this.focused
-            }];
+            return [
+                'p-chips p-component p-inputwrapper',
+                {
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': (this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length),
+                    'p-inputwrapper-focus': this.focused
+                }
+            ];
         },
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/colorpicker/ColorPicker.d.ts b/components/colorpicker/ColorPicker.d.ts
index 39e208560..de5606163 100755
--- a/components/colorpicker/ColorPicker.d.ts
+++ b/components/colorpicker/ColorPicker.d.ts
@@ -65,8 +65,7 @@ export interface ColorPickerProps {
     appendTo?: ColorPickerAppendToType;
 }
 
-export interface ColorPickerSlots {
-}
+export interface ColorPickerSlots {}
 
 export declare type ColorPickerEmits = {
     /**
@@ -75,25 +74,25 @@ export declare type ColorPickerEmits = {
      */
     'update:modelValue': (value: any) => void;
     /**
-      * Callback to invoke when a chip is added.
-      * @param {ColorPickerChangeEvent} event - Custom add event.
-      */
-    'change': (event: ColorPickerChangeEvent) => void;
+     * Callback to invoke when a chip is added.
+     * @param {ColorPickerChangeEvent} event - Custom add event.
+     */
+    change: (event: ColorPickerChangeEvent) => void;
     /**
      * Callback to invoke when input is cleared by the user.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when input is cleared by the user.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
-declare class ColorPicker extends ClassComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits> { }
+declare class ColorPicker extends ClassComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ColorPicker: GlobalComponentConstructor<ColorPicker>
+        ColorPicker: GlobalComponentConstructor<ColorPicker>;
     }
 }
 
@@ -103,7 +102,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ColorPicker](https://www.primefaces.org/primevue/showcase/#/colorpicker)
+ * - [ColorPicker](https://www.primefaces.org/primevue/colorpicker)
  *
  */
 export default ColorPicker;
diff --git a/components/colorpicker/ColorPicker.spec.js b/components/colorpicker/ColorPicker.spec.js
index 8f9b27e93..a4496e40e 100644
--- a/components/colorpicker/ColorPicker.spec.js
+++ b/components/colorpicker/ColorPicker.spec.js
@@ -24,7 +24,7 @@ describe('ColorPicker.vue', () => {
         expect(wrapper.find('.p-colorpicker-preview.p-inputtext').exists()).toBe(true);
     });
 
-    it('should input click triggered', async() => {
+    it('should input click triggered', async () => {
         const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
         const onInputClick = jest.spyOn(wrapper.vm, 'onInputClick');
 
@@ -36,15 +36,15 @@ describe('ColorPicker.vue', () => {
         expect(wrapper.find('.p-colorpicker-hue').exists()).toBe(true);
     });
 
-    it('should mouse events triggered', async() => {
+    it('should mouse events triggered', async () => {
         const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
 
         await input.trigger('click');
-        
+
         const onColorMousedown = jest.spyOn(wrapper.vm, 'onColorMousedown');
         const onHueMousedown = jest.spyOn(wrapper.vm, 'onHueMousedown');
-        const event = { pageX: 100, pageY: 120, preventDefault: () => {}};
-        const event2 = { pageX: 70, pageY: 20, preventDefault: () => {}};
+        const event = { pageX: 100, pageY: 120, preventDefault: () => {} };
+        const event2 = { pageX: 70, pageY: 20, preventDefault: () => {} };
 
         wrapper.vm.onColorMousedown(event);
 
@@ -56,4 +56,4 @@ describe('ColorPicker.vue', () => {
         expect(onHueMousedown).toHaveBeenCalled();
         expect(wrapper.find('.p-colorpicker-preview.p-inputtext').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
     });
-});
\ No newline at end of file
+});
diff --git a/components/colorpicker/ColorPicker.vue b/components/colorpicker/ColorPicker.vue
index 2167700f0..396996fcb 100755
--- a/components/colorpicker/ColorPicker.vue
+++ b/components/colorpicker/ColorPicker.vue
@@ -1,19 +1,16 @@
 <template>
     <div ref="container" :class="containerClass">
-        <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
-            @click="onInputClick" @keydown="onInputKeydown" v-if="!inline"/>
+        <input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
+                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick">
                     <div class="p-colorpicker-content">
-                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)"
-                            @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
+                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
                             <div class="p-colorpicker-color">
                                 <div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
                             </div>
                         </div>
-                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)"
-                            @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
+                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
                             <div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
                         </div>
                     </div>
@@ -24,7 +21,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 
@@ -89,6 +86,17 @@ export default {
     colorHandle: null,
     hueView: null,
     hueHandle: null,
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.hsbValue = this.toHSB(newValue);
+
+                if (this.selfUpdate) this.selfUpdate = false;
+                else this.updateUI();
+            }
+        }
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindDragListeners();
@@ -108,26 +116,14 @@ export default {
     mounted() {
         this.updateUI();
     },
-    watch: {
-        modelValue: {
-            immediate: true,
-            handler(newValue) {
-                this.hsbValue = this.toHSB(newValue);
-
-                if (this.selfUpdate)
-                    this.selfUpdate = false;
-                else
-                    this.updateUI();
-            }
-        }
-    },
     methods: {
         pickColor(event) {
             let rect = this.colorSelector.getBoundingClientRect();
             let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
             let left = rect.left + document.body.scrollLeft;
-            let saturation = Math.floor(100 * (Math.max(0, Math.min(150, ((event.pageX || event.changedTouches[0].pageX)- left)))) / 150);
-            let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
+            let saturation = Math.floor((100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left))) / 150);
+            let brightness = Math.floor((100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
+
             this.hsbValue = this.validateHSB({
                 h: this.hsbValue.h,
                 s: saturation,
@@ -138,12 +134,13 @@ export default {
             this.updateColorHandle();
             this.updateInput();
             this.updateModel();
-            this.$emit('change', {event: event, value: this.modelValue});
+            this.$emit('change', { event: event, value: this.modelValue });
         },
         pickHue(event) {
             let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+
             this.hsbValue = this.validateHSB({
-                h: Math.floor(360 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
+                h: Math.floor((360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
                 s: 100,
                 b: 100
             });
@@ -153,25 +150,25 @@ export default {
             this.updateHue();
             this.updateModel();
             this.updateInput();
-            this.$emit('change', {event: event, value: this.modelValue});
+            this.$emit('change', { event: event, value: this.modelValue });
         },
         updateModel() {
-            switch(this.format) {
+            switch (this.format) {
                 case 'hex':
                     this.$emit('update:modelValue', this.HSBtoHEX(this.hsbValue));
-                break;
+                    break;
 
                 case 'rgb':
                     this.$emit('update:modelValue', this.HSBtoRGB(this.hsbValue));
-                break;
+                    break;
 
                 case 'hsb':
                     this.$emit('update:modelValue', this.hsbValue);
-                break;
+                    break;
 
                 default:
                     //NoOp
-                break;
+                    break;
             }
         },
         updateColorSelector() {
@@ -181,18 +178,19 @@ export default {
                     s: 100,
                     b: 100
                 });
+
                 this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
             }
         },
         updateColorHandle() {
             if (this.colorHandle) {
-                this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
-                this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
+                this.colorHandle.style.left = Math.floor((150 * this.hsbValue.s) / 100) + 'px';
+                this.colorHandle.style.top = Math.floor((150 * (100 - this.hsbValue.b)) / 100) + 'px';
             }
         },
         updateHue() {
             if (this.hueHandle) {
-                this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
+                this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h) / 360) + 'px';
             }
         },
         updateInput() {
@@ -222,19 +220,24 @@ export default {
         },
         validateHEX(hex) {
             var len = 6 - hex.length;
+
             if (len > 0) {
                 var o = [];
-                for (var i=0; i<len; i++) {
+
+                for (var i = 0; i < len; i++) {
                     o.push('0');
                 }
+
                 o.push(hex);
                 hex = o.join('');
             }
+
             return hex;
         },
         HEXtoRGB(hex) {
-            let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-            return {r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF)};
+            let hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
+
+            return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
         },
         HEXtoHSB(hex) {
             return this.RGBtoHSB(this.HEXtoRGB(hex));
@@ -248,8 +251,10 @@ export default {
             var min = Math.min(rgb.r, rgb.g, rgb.b);
             var max = Math.max(rgb.r, rgb.g, rgb.b);
             var delta = max - min;
+
             hsb.b = max;
-            hsb.s = max !== 0 ? 255 * delta / max : 0;
+            hsb.s = max !== 0 ? (255 * delta) / max : 0;
+
             if (hsb.s !== 0) {
                 if (rgb.r === max) {
                     hsb.h = (rgb.g - rgb.b) / delta;
@@ -261,49 +266,76 @@ export default {
             } else {
                 hsb.h = -1;
             }
+
             hsb.h *= 60;
+
             if (hsb.h < 0) {
                 hsb.h += 360;
             }
-            hsb.s *= 100/255;
-            hsb.b *= 100/255;
+
+            hsb.s *= 100 / 255;
+            hsb.b *= 100 / 255;
+
             return hsb;
         },
         HSBtoRGB(hsb) {
             var rgb = {
-                r: null, g: null, b: null
+                r: null,
+                g: null,
+                b: null
             };
             var h = Math.round(hsb.h);
-            var s = Math.round(hsb.s*255/100);
-            var v = Math.round(hsb.b*255/100);
+            var s = Math.round((hsb.s * 255) / 100);
+            var v = Math.round((hsb.b * 255) / 100);
+
             if (s === 0) {
                 rgb = {
                     r: v,
                     g: v,
                     b: v
+                };
+            } else {
+                var t1 = v;
+                var t2 = ((255 - s) * v) / 255;
+                var t3 = ((t1 - t2) * (h % 60)) / 60;
+
+                if (h === 360) h = 0;
+
+                if (h < 60) {
+                    rgb.r = t1;
+                    rgb.b = t2;
+                    rgb.g = t2 + t3;
+                } else if (h < 120) {
+                    rgb.g = t1;
+                    rgb.b = t2;
+                    rgb.r = t1 - t3;
+                } else if (h < 180) {
+                    rgb.g = t1;
+                    rgb.r = t2;
+                    rgb.b = t2 + t3;
+                } else if (h < 240) {
+                    rgb.b = t1;
+                    rgb.r = t2;
+                    rgb.g = t1 - t3;
+                } else if (h < 300) {
+                    rgb.b = t1;
+                    rgb.g = t2;
+                    rgb.r = t2 + t3;
+                } else if (h < 360) {
+                    rgb.r = t1;
+                    rgb.g = t2;
+                    rgb.b = t1 - t3;
+                } else {
+                    rgb.r = 0;
+                    rgb.g = 0;
+                    rgb.b = 0;
                 }
             }
-            else {
-                var t1 = v;
-                var t2 = (255-s)*v/255;
-                var t3 = (t1-t2)*(h%60)/60;
-                if (h===360) h = 0;
-                if (h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
-                else if (h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
-                else if (h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
-                else if (h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
-                else if (h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
-                else if (h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
-                else {rgb.r=0; rgb.g=0;	rgb.b=0}
-            }
-            return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+
+            return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
         },
         RGBtoHEX(rgb) {
-            var hex = [
-                rgb.r.toString(16),
-                rgb.g.toString(16),
-                rgb.b.toString(16)
-            ];
+            var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
 
             for (var key in hex) {
                 if (hex[key].length === 1) {
@@ -323,21 +355,20 @@ export default {
                 switch (this.format) {
                     case 'hex':
                         hsb = this.HEXtoHSB(value);
-                    break;
+                        break;
 
                     case 'rgb':
                         hsb = this.RGBtoHSB(value);
-                    break;
+                        break;
 
                     case 'hsb':
                         hsb = value;
-                    break;
+                        break;
 
                     default:
                         break;
                 }
-            }
-            else {
+            } else {
                 hsb = this.HEXtoHSB(this.defaultColor);
             }
 
@@ -369,10 +400,8 @@ export default {
             }
         },
         alignOverlay() {
-            if (this.appendTo === 'self')
-                DomHandler.relativePosition(this.picker, this.$refs.input);
-            else
-                DomHandler.absolutePosition(this.picker, this.$refs.input);
+            if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);
+            else DomHandler.absolutePosition(this.picker, this.$refs.input);
         },
         onInputClick() {
             if (this.disabled) {
@@ -382,22 +411,22 @@ export default {
             this.overlayVisible = !this.overlayVisible;
         },
         onInputKeydown(event) {
-            switch(event.which) {
+            switch (event.which) {
                 //space
                 case 32:
                     this.overlayVisible = !this.overlayVisible;
                     event.preventDefault();
-                break;
+                    break;
 
                 //escape and tab
                 case 27:
                 case 9:
                     this.overlayVisible = false;
-                break;
+                    break;
 
                 default:
                     //NoOp
-                break;
+                    break;
             }
         },
         onColorMousedown(event) {
@@ -470,6 +499,7 @@ export default {
                         this.overlayVisible = false;
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -502,6 +532,7 @@ export default {
                         this.overlayVisible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -536,7 +567,7 @@ export default {
             }
         },
         pickerRef(el) {
-            this.picker = el
+            this.picker = el;
         },
         colorSelectorRef(el) {
             this.colorSelector = el;
@@ -566,23 +597,28 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-colorpicker p-component', {'p-colorpicker-overlay': !this.inline}];
+            return ['p-colorpicker p-component', { 'p-colorpicker-overlay': !this.inline }];
         },
         inputClass() {
-            return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
+            return ['p-colorpicker-preview p-inputtext', { 'p-disabled': this.disabled }];
         },
         pickerClass() {
-            return ['p-colorpicker-panel', this.panelClass, {
-                'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-colorpicker-panel',
+                this.panelClass,
+                {
+                    'p-colorpicker-overlay-panel': !this.inline,
+                    'p-disabled': this.disabled,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -627,22 +663,22 @@ export default {
 }
 
 .p-colorpicker-panel .p-colorpicker-color {
-     width: 150px;
-     height: 150px;
+    width: 150px;
+    height: 150px;
 }
 
 .p-colorpicker-panel .p-colorpicker-color-handle {
-     position: absolute;
-     top: 0px;
-     left: 150px;
-     border-radius: 100%;
-     width: 10px;
-     height: 10px;
-     border-width: 1px;
-     border-style: solid;
-     margin: -5px 0 0 -5px;
-     cursor: pointer;
-     opacity: .85;
+    position: absolute;
+    top: 0px;
+    left: 150px;
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    border-width: 1px;
+    border-style: solid;
+    margin: -5px 0 0 -5px;
+    cursor: pointer;
+    opacity: 0.85;
 }
 
 .p-colorpicker-panel .p-colorpicker-hue {
@@ -651,20 +687,20 @@ export default {
     top: 8px;
     left: 167px;
     position: absolute;
-    opacity: .85;
+    opacity: 0.85;
 }
 
 .p-colorpicker-panel .p-colorpicker-hue-handle {
-     position: absolute;
-     top: 150px;
-     left: 0px;
-     width: 21px;
-     margin-left: -2px;
-     margin-top: -5px;
-     height: 10px;
-     border-width: 2px;
-     border-style: solid;
-     opacity: .85;
-     cursor: pointer;
+    position: absolute;
+    top: 150px;
+    left: 0px;
+    width: 21px;
+    margin-left: -2px;
+    margin-top: -5px;
+    height: 10px;
+    border-width: 2px;
+    border-style: solid;
+    opacity: 0.85;
+    cursor: pointer;
 }
 </style>
diff --git a/components/column/Column.d.ts b/components/column/Column.d.ts
index 371a4d0f2..26bc8e1de 100755
--- a/components/column/Column.d.ts
+++ b/components/column/Column.d.ts
@@ -464,14 +464,13 @@ export interface ColumnSlots {
     }) => VNode[];
 }
 
-export declare type ColumnEmits = {
-}
+export declare type ColumnEmits = {};
 
-declare class Column extends ClassComponent<ColumnProps, ColumnSlots, ColumnEmits> { }
+declare class Column extends ClassComponent<ColumnProps, ColumnSlots, ColumnEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Column: GlobalComponentConstructor<Column>
+        Column: GlobalComponentConstructor<Column>;
     }
 }
 
@@ -481,8 +480,8 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable)
- * - [TreeTable](https://www.primefaces.org/primevue/showcase/#/treetable)
+ * - [DataTable](https://www.primefaces.org/primevue/datatable)
+ * - [TreeTable](https://www.primefaces.org/primevue/treetable)
  *
  */
 export default Column;
diff --git a/components/column/Column.vue b/components/column/Column.vue
index c2be3e2ae..f0c23e217 100755
--- a/components/column/Column.vue
+++ b/components/column/Column.vue
@@ -182,5 +182,5 @@ export default {
     render() {
         return null;
     }
-}
+};
 </script>
diff --git a/components/columngroup/ColumnGroup.d.ts b/components/columngroup/ColumnGroup.d.ts
index fd0b09684..bbac19e42 100755
--- a/components/columngroup/ColumnGroup.d.ts
+++ b/components/columngroup/ColumnGroup.d.ts
@@ -9,17 +9,15 @@ export interface ColumnGroupProps {
     type?: ColumnGroupType;
 }
 
-export interface ColumnGroupSlots {
-}
+export interface ColumnGroupSlots {}
 
-export declare type ColumnGroupEmits = {
-}
+export declare type ColumnGroupEmits = {};
 
-declare class ColumnGroup extends ClassComponent<ColumnGroupProps, ColumnGroupSlots, ColumnGroupEmits> { }
+declare class ColumnGroup extends ClassComponent<ColumnGroupProps, ColumnGroupSlots, ColumnGroupEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ColumnGroup: GlobalComponentConstructor<ColumnGroup>
+        ColumnGroup: GlobalComponentConstructor<ColumnGroup>;
     }
 }
 
@@ -29,7 +27,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ColumnGroup](https://www.primefaces.org/primevue/showcase/#/datatable/colgroup)
+ * - [ColumnGroup](https://www.primefaces.org/primevue/datatable/colgroup)
  *
  */
 export default ColumnGroup;
diff --git a/components/columngroup/ColumnGroup.vue b/components/columngroup/ColumnGroup.vue
index 679c41fba..3a92bfc8b 100755
--- a/components/columngroup/ColumnGroup.vue
+++ b/components/columngroup/ColumnGroup.vue
@@ -10,5 +10,5 @@ export default {
     render() {
         return null;
     }
-}
+};
 </script>
diff --git a/components/config/PrimeVue.d.ts b/components/config/PrimeVue.d.ts
index 231e87da4..4d5feff2c 100644
--- a/components/config/PrimeVue.d.ts
+++ b/components/config/PrimeVue.d.ts
@@ -24,6 +24,8 @@ interface PrimeVueLocaleAriaOptions {
     selectAll?: string;
     unselectAll?: string;
     close?: string;
+    previous?: string;
+    next?: string;
 }
 
 interface PrimeVueLocaleOptions {
@@ -101,7 +103,7 @@ declare module 'vue/types/vue' {
     interface Vue {
         $primevue: {
             config: PrimeVueConfiguration;
-        }
+        };
     }
 }
 
@@ -109,6 +111,6 @@ declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         $primevue: {
             config: PrimeVueConfiguration;
-        }
+        };
     }
 }
diff --git a/components/config/PrimeVue.js b/components/config/PrimeVue.js
index aaaeec1a5..75f060a4a 100644
--- a/components/config/PrimeVue.js
+++ b/components/config/PrimeVue.js
@@ -1,5 +1,5 @@
-import {reactive,inject} from 'vue';
-import {FilterMatchMode} from 'primevue/api';
+import { reactive, inject } from 'vue';
+import { FilterMatchMode } from 'primevue/api';
 
 const defaultOptions = {
     ripple: false,
@@ -31,11 +31,11 @@ const defaultOptions = {
         choose: 'Choose',
         upload: 'Upload',
         cancel: 'Cancel',
-        dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-        dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-        dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-        monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
-        monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         chooseYear: 'Choose Year',
         chooseMonth: 'Choose Month',
         chooseDate: 'Choose Date',
@@ -75,32 +75,15 @@ const defaultOptions = {
             stars: '{star} stars',
             selectAll: 'All items selected',
             unselectAll: 'All items unselected',
-            close: 'Close'
+            close: 'Close',
+            previous: 'Previous',
+            next: 'Next'
         }
     },
     filterMatchModeOptions: {
-        text: [
-            FilterMatchMode.STARTS_WITH,
-            FilterMatchMode.CONTAINS,
-            FilterMatchMode.NOT_CONTAINS,
-            FilterMatchMode.ENDS_WITH,
-            FilterMatchMode.EQUALS,
-            FilterMatchMode.NOT_EQUALS
-        ],
-        numeric: [
-            FilterMatchMode.EQUALS,
-            FilterMatchMode.NOT_EQUALS,
-            FilterMatchMode.LESS_THAN,
-            FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
-            FilterMatchMode.GREATER_THAN,
-            FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
-        ],
-        date: [
-            FilterMatchMode.DATE_IS,
-            FilterMatchMode.DATE_IS_NOT,
-            FilterMatchMode.DATE_BEFORE,
-            FilterMatchMode.DATE_AFTER
-        ]
+        text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+        numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+        date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
     },
     zIndex: {
         modal: 1100,
@@ -114,6 +97,7 @@ const PrimeVueSymbol = Symbol();
 
 export function usePrimeVue() {
     const PrimeVue = inject(PrimeVueSymbol);
+
     if (!PrimeVue) {
         throw new Error('PrimeVue is not installed!');
     }
@@ -123,10 +107,11 @@ export function usePrimeVue() {
 
 export default {
     install: (app, options) => {
-        let configOptions = options ? {...defaultOptions, ...options} : {...defaultOptions};
+        let configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
         const PrimeVue = {
             config: reactive(configOptions)
         };
+
         app.config.globalProperties.$primevue = PrimeVue;
         app.provide(PrimeVueSymbol, PrimeVue);
     }
diff --git a/components/confirmationeventbus/ConfirmationEventBus.js b/components/confirmationeventbus/ConfirmationEventBus.js
index 844a1b111..602940783 100644
--- a/components/confirmationeventbus/ConfirmationEventBus.js
+++ b/components/confirmationeventbus/ConfirmationEventBus.js
@@ -1,3 +1,3 @@
-import {EventBus} from 'primevue/utils';
+import { EventBus } from 'primevue/utils';
 
-export default EventBus();
\ No newline at end of file
+export default EventBus();
diff --git a/components/confirmationoptions/ConfirmationOptions.d.ts b/components/confirmationoptions/ConfirmationOptions.d.ts
index 0d5b867f9..74a377ea0 100644
--- a/components/confirmationoptions/ConfirmationOptions.d.ts
+++ b/components/confirmationoptions/ConfirmationOptions.d.ts
@@ -39,6 +39,10 @@ export interface ConfirmationOptions {
      * Callback to execute when action is rejected.
      */
     reject?: () => void;
+    /**
+     * Callback to execute when dialog is hidden.
+     */
+    onHide?: () => void;
     /**
      * Label of the accept button. Defaults to PrimeVue Locale configuration.
      */
diff --git a/components/confirmationservice/ConfirmationService.js b/components/confirmationservice/ConfirmationService.js
index 7f314435c..8ff807434 100644
--- a/components/confirmationservice/ConfirmationService.js
+++ b/components/confirmationservice/ConfirmationService.js
@@ -1,5 +1,5 @@
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
-import {PrimeVueConfirmSymbol} from 'primevue/useconfirm';
+import { PrimeVueConfirmSymbol } from 'primevue/useconfirm';
 
 export default {
     install: (app) => {
@@ -11,7 +11,8 @@ export default {
                 ConfirmationEventBus.emit('close');
             }
         };
+
         app.config.globalProperties.$confirm = ConfirmationService;
         app.provide(PrimeVueConfirmSymbol, ConfirmationService);
     }
-};
\ No newline at end of file
+};
diff --git a/components/confirmdialog/ConfirmDialog.d.ts b/components/confirmdialog/ConfirmDialog.d.ts
index f2131a330..9c75d59d3 100644
--- a/components/confirmdialog/ConfirmDialog.d.ts
+++ b/components/confirmdialog/ConfirmDialog.d.ts
@@ -38,19 +38,16 @@ export interface ConfirmDialogSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message: (scope: {
-        message: ConfirmationOptions;
-    }) => VNode[];
+    message: (scope: { message: ConfirmationOptions }) => VNode[];
 }
 
-export declare type ConfirmDialogEmits = {
-}
+export declare type ConfirmDialogEmits = {};
 
-declare class ConfirmDialog extends ClassComponent<ConfirmDialogProps, ConfirmDialogSlots, ConfirmDialogEmits> { }
+declare class ConfirmDialog extends ClassComponent<ConfirmDialogProps, ConfirmDialogSlots, ConfirmDialogEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ConfirmDialog: GlobalComponentConstructor<ConfirmDialog>
+        ConfirmDialog: GlobalComponentConstructor<ConfirmDialog>;
     }
 }
 
@@ -65,7 +62,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ConfirmDialog](https://www.primefaces.org/primevue/showcase/#/confirmdialog)
+ * - [ConfirmDialog](https://www.primefaces.org/primevue/confirmdialog)
  *
  */
 export default ConfirmDialog;
diff --git a/components/confirmdialog/ConfirmDialog.spec.js b/components/confirmdialog/ConfirmDialog.spec.js
index a516f2cbe..dffc230a7 100644
--- a/components/confirmdialog/ConfirmDialog.spec.js
+++ b/components/confirmdialog/ConfirmDialog.spec.js
@@ -1,16 +1,16 @@
-import { mount } from '@vue/test-utils';
 import PrimeVue from '@/components/config/PrimeVue';
+import { mount } from '@vue/test-utils';
 import ConfirmDialog from './ConfirmDialog.vue';
 
 describe('ConfirmDialog', () => {
-    it('should exist', async() => {
+    it('should exist', async () => {
         const wrapper = mount(ConfirmDialog, {
             global: {
                 plugins: [PrimeVue],
                 stubs: {
                     teleport: true,
                     transition: false
-                },
+                }
             },
             data() {
                 return {
@@ -19,22 +19,22 @@ describe('ConfirmDialog', () => {
                         header: 'Confirmation',
                         icon: 'pi pi-exclamation-triangle'
                     }
-                }
+                };
             }
         });
 
         await wrapper.setData({ visible: true });
-        
+
         expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-dialog-title').text()).toBe('Confirmation');
         expect(wrapper.find('.p-confirm-dialog-message').text()).toBe('Are you sure you want to proceed?');
 
         await wrapper.vm.reject();
 
-        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
+        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
     });
 
-    it('should dialog trigger the accept function', async() => {
+    it('should dialog trigger the accept function', async () => {
         const wrapper = mount(ConfirmDialog, {
             global: {
                 plugins: [PrimeVue],
@@ -50,29 +50,30 @@ describe('ConfirmDialog', () => {
                         header: 'Confirmation',
                         icon: 'pi pi-exclamation-triangle',
                         accept: () => {
-                            console.log('accept')
+                            // eslint-disable-next-line no-console
+                            console.log('accept');
                         },
                         reject: () => {
+                            // eslint-disable-next-line no-console
                             console.log('reject');
-                            
                         }
                     }
-                }
+                };
             }
         });
-    
+
         const acceptTriggered = jest.spyOn(wrapper.componentVM.confirmation, 'accept');
-    
+
         await wrapper.setData({ visible: true });
-    
+
         const CDAcceptBtn = wrapper.find('.p-confirm-dialog-accept');
 
         await CDAcceptBtn.trigger('click');
-    
+
         expect(acceptTriggered).toBeCalled();
     });
 
-    it('should dialog trigger the reject function', async() => {
+    it('should dialog trigger the reject function', async () => {
         const wrapper = mount(ConfirmDialog, {
             global: {
                 plugins: [PrimeVue],
@@ -88,29 +89,30 @@ describe('ConfirmDialog', () => {
                         header: 'Confirmation',
                         icon: 'pi pi-exclamation-triangle',
                         accept: () => {
-                            console.log('accept')
+                            // eslint-disable-next-line no-console
+                            console.log('accept');
                         },
                         reject: () => {
+                            // eslint-disable-next-line no-console
                             console.log('reject');
-                            
                         }
                     }
-                }
+                };
             }
         });
-    
+
         const rejectTriggered = jest.spyOn(wrapper.componentVM.confirmation, 'reject');
 
         await wrapper.setData({ visible: true });
 
         const CDRejectBtn = wrapper.find('.p-confirm-dialog-reject');
-    
+
         await CDRejectBtn.trigger('click');
-    
+
         expect(rejectTriggered).toBeCalled();
     });
 
-    it('should dialog close button work', async() => {
+    it('should dialog close button work', async () => {
         const wrapper = mount(ConfirmDialog, {
             global: {
                 plugins: [PrimeVue],
@@ -126,17 +128,17 @@ describe('ConfirmDialog', () => {
                         header: 'Confirmation',
                         icon: 'pi pi-exclamation-triangle'
                     }
-                }
+                };
             }
         });
 
         await wrapper.setData({ visible: true });
-        
+
         const dialogCloseBtn = wrapper.find('.p-dialog-header-close');
 
         await dialogCloseBtn.trigger('click');
 
-        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
+        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
     });
 
     it('should position work', async () => {
@@ -157,7 +159,7 @@ describe('ConfirmDialog', () => {
                         icon: 'pi pi-info-circle',
                         position: 'bottom'
                     }
-                }
+                };
             }
         });
 
@@ -165,4 +167,4 @@ describe('ConfirmDialog', () => {
 
         expect(wrapper.find('.p-dialog-mask.p-dialog-bottom').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/confirmdialog/ConfirmDialog.vue b/components/confirmdialog/ConfirmDialog.vue
index 5dee6d61b..2efc92b79 100644
--- a/components/confirmdialog/ConfirmDialog.vue
+++ b/components/confirmdialog/ConfirmDialog.vue
@@ -1,22 +1,21 @@
 <template>
-    <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog"
-        :breakpoints="breakpoints" :closeOnEscape="closeOnEscape">
+    <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog" :breakpoints="breakpoints" :closeOnEscape="closeOnEscape" @update:visible="onHide">
         <template v-if="!$slots.message">
             <i :class="iconClass" />
             <span class="p-confirm-dialog-message">{{ message }}</span>
         </template>
         <component v-else :is="$slots.message" :message="confirmation"></component>
         <template #footer>
-            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject"/>
+            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" />
             <CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" />
         </template>
     </CDialog>
 </template>
 
 <script>
+import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import Dialog from 'primevue/dialog';
-import Button from 'primevue/button';
 
 export default {
     name: 'ConfirmDialog',
@@ -32,8 +31,8 @@ export default {
     data() {
         return {
             visible: false,
-            confirmation: null,
-        }
+            confirmation: null
+        };
     },
     mounted() {
         this.confirmListener = (options) => {
@@ -51,6 +50,7 @@ export default {
             this.visible = false;
             this.confirmation = null;
         };
+
         ConfirmationEventBus.on('confirm', this.confirmListener);
         ConfirmationEventBus.on('close', this.closeListener);
     },
@@ -71,6 +71,13 @@ export default {
                 this.confirmation.reject();
             }
 
+            this.visible = false;
+        },
+        onHide() {
+            if (this.confirmation.onHide) {
+                this.confirmation.onHide();
+            }
+
             this.visible = false;
         }
     },
@@ -91,10 +98,10 @@ export default {
             return ['p-confirm-dialog-icon', this.confirmation ? this.confirmation.icon : null];
         },
         acceptLabel() {
-            return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
+            return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
         },
         rejectLabel() {
-            return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
+            return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
         },
         acceptIcon() {
             return this.confirmation ? this.confirmation.acceptIcon : null;
@@ -106,10 +113,10 @@ export default {
             return ['p-confirm-dialog-accept', this.confirmation ? this.confirmation.acceptClass : null];
         },
         rejectClass() {
-            return ['p-confirm-dialog-reject', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
+            return ['p-confirm-dialog-reject', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
         },
         autoFocusAccept() {
-            return (this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept') ? true : false;
+            return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
         },
         autoFocusReject() {
             return this.confirmation.defaultFocus === 'reject' ? true : false;
@@ -119,8 +126,8 @@ export default {
         }
     },
     components: {
-        'CDialog': Dialog,
-        'CDButton': Button
+        CDialog: Dialog,
+        CDButton: Button
     }
-}
+};
 </script>
diff --git a/components/confirmpopup/ConfirmPopup.d.ts b/components/confirmpopup/ConfirmPopup.d.ts
index a304c8712..9dab5f0b2 100644
--- a/components/confirmpopup/ConfirmPopup.d.ts
+++ b/components/confirmpopup/ConfirmPopup.d.ts
@@ -14,19 +14,16 @@ export interface ConfirmPopupSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message: (scope: {
-        message: ConfirmationOptions;
-    }) => VNode[];
+    message: (scope: { message: ConfirmationOptions }) => VNode[];
 }
 
-export declare type ConfirmPopupEmits = {
-}
+export declare type ConfirmPopupEmits = {};
 
-declare class ConfirmPopup extends ClassComponent<ConfirmPopupProps, ConfirmPopupSlots, ConfirmPopupEmits> { }
+declare class ConfirmPopup extends ClassComponent<ConfirmPopupProps, ConfirmPopupSlots, ConfirmPopupEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ConfirmPopup: GlobalComponentConstructor<ConfirmPopup>
+        ConfirmPopup: GlobalComponentConstructor<ConfirmPopup>;
     }
 }
 
@@ -41,7 +38,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ConfirmPopup](https://www.primefaces.org/primevue/showcase/#/confirmpopup)
+ * - [ConfirmPopup](https://www.primefaces.org/primevue/confirmpopup)
  *
  */
 export default ConfirmPopup;
diff --git a/components/confirmpopup/ConfirmPopup.vue b/components/confirmpopup/ConfirmPopup.vue
index cd363cdb4..b73559c92 100644
--- a/components/confirmpopup/ConfirmPopup.vue
+++ b/components/confirmpopup/ConfirmPopup.vue
@@ -1,16 +1,16 @@
 <template>
     <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <template v-if="!$slots.message">
                     <div class="p-confirm-popup-content">
                         <i :class="iconClass" />
-                        <span class="p-confirm-popup-message">{{confirmation.message}}</span>
+                        <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
                 <div class="p-confirm-popup-footer">
-                    <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()"/>
+                    <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" />
                     <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" autofocus />
                 </div>
             </div>
@@ -20,7 +20,7 @@
 
 <script>
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Portal from 'primevue/portal';
@@ -35,7 +35,7 @@ export default {
         return {
             visible: false,
             confirmation: null
-        }
+        };
     },
     target: null,
     outsideClickListener: null,
@@ -56,10 +56,12 @@ export default {
                 this.visible = true;
             }
         };
+
         this.closeListener = () => {
             this.visible = false;
             this.confirmation = null;
         };
+
         ConfirmationEventBus.on('confirm', this.confirmListener);
         ConfirmationEventBus.on('close', this.closeListener);
     },
@@ -68,10 +70,12 @@ export default {
         ConfirmationEventBus.off('close', this.closeListener);
 
         this.unbindOutsideClickListener();
+
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.unbindResizeListener();
 
         if (this.container) {
@@ -83,7 +87,7 @@ export default {
         this.confirmation = null;
     },
     methods: {
-         accept() {
+        accept() {
             if (this.confirmation.accept) {
                 this.confirmation.accept();
             }
@@ -122,6 +126,7 @@ export default {
             if (containerOffset.left < targetOffset.left) {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
+
             this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
@@ -137,6 +142,7 @@ export default {
                         this.alignOverlay();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -169,6 +175,7 @@ export default {
                         this.visible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -193,10 +200,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-confirm-popup p-component', {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-confirm-popup p-component',
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         message() {
             return this.confirmation ? this.confirmation.message : null;
@@ -205,10 +215,10 @@ export default {
             return ['p-confirm-popup-icon', this.confirmation ? this.confirmation.icon : null];
         },
         acceptLabel() {
-            return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
+            return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
         },
         rejectLabel() {
-            return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
+            return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
         },
         acceptIcon() {
             return this.confirmation ? this.confirmation.acceptIcon : null;
@@ -220,14 +230,14 @@ export default {
             return ['p-confirm-popup-accept p-button-sm', this.confirmation ? this.confirmation.acceptClass : null];
         },
         rejectClass() {
-            return ['p-confirm-popup-reject p-button-sm', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
+            return ['p-confirm-popup-reject p-button-sm', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
         }
     },
     components: {
-        'CPButton': Button,
-        'Portal': Portal
+        CPButton: Button,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -254,34 +264,36 @@ export default {
 }
 
 .p-confirm-popup-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }
 
 .p-confirm-popup-leave-active {
-    transition: opacity .1s linear;
+    transition: opacity 0.1s linear;
 }
 
-.p-confirm-popup:after, .p-confirm-popup:before {
-	bottom: 100%;
-	left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-	content: " ";
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
+.p-confirm-popup:after,
+.p-confirm-popup:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
 }
 
 .p-confirm-popup:after {
-	border-width: 8px;
-	margin-left: -8px;
+    border-width: 8px;
+    margin-left: -8px;
 }
 
 .p-confirm-popup:before {
-	border-width: 10px;
-	margin-left: -10px;
+    border-width: 10px;
+    margin-left: -10px;
 }
 
-.p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {
+.p-confirm-popup-flipped:after,
+.p-confirm-popup-flipped:before {
     bottom: auto;
     top: 100%;
 }
@@ -291,7 +303,7 @@ export default {
 }
 
 .p-confirm-popup.p-confirm-popup-flipped:before {
-    border-bottom-color: transparent
+    border-bottom-color: transparent;
 }
 
 .p-confirm-popup .p-confirm-popup-content {
diff --git a/components/contextmenu/ContextMenu.d.ts b/components/contextmenu/ContextMenu.d.ts
index 3cda7cfca..bd701e204 100755
--- a/components/contextmenu/ContextMenu.d.ts
+++ b/components/contextmenu/ContextMenu.d.ts
@@ -49,8 +49,7 @@ export interface ContextMenuSlots {
     }) => VNode[];
 }
 
-export declare type ContextMenuEmits = {
-}
+export declare type ContextMenuEmits = {};
 
 declare class ContextMenu extends ClassComponent<ContextMenuProps, ContextMenuSlots, ContextMenuEmits> {
     /**
@@ -77,7 +76,7 @@ declare class ContextMenu extends ClassComponent<ContextMenuProps, ContextMenuSl
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ContextMenu: GlobalComponentConstructor<ContextMenu>
+        ContextMenu: GlobalComponentConstructor<ContextMenu>;
     }
 }
 
@@ -88,11 +87,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [ContextMenu](https://www.primefaces.org/primevue/showcase/#/contextmenu)
+ * - [ContextMenu](https://www.primefaces.org/primevue/contextmenu)
  *
  */
 export default ContextMenu;
diff --git a/components/contextmenu/ContextMenu.spec.js b/components/contextmenu/ContextMenu.spec.js
index 3977d22b6..fb91f9f70 100644
--- a/components/contextmenu/ContextMenu.spec.js
+++ b/components/contextmenu/ContextMenu.spec.js
@@ -17,151 +17,148 @@ describe('ContextMenu.vue', () => {
             props: {
                 model: [
                     {
-                        label:'File',
-                        icon:'pi pi-fw pi-file',
-                        items:[
+                        label: 'File',
+                        icon: 'pi pi-fw pi-file',
+                        items: [
                             {
-                                label:'New',
-                                icon:'pi pi-fw pi-plus',
-                                items:[
+                                label: 'New',
+                                icon: 'pi pi-fw pi-plus',
+                                items: [
                                     {
-                                        label:'Bookmark',
-                                        icon:'pi pi-fw pi-bookmark'
+                                        label: 'Bookmark',
+                                        icon: 'pi pi-fw pi-bookmark'
                                     },
                                     {
-                                        label:'Video',
-                                        icon:'pi pi-fw pi-video'
-                                    },
-                                    ]
+                                        label: 'Video',
+                                        icon: 'pi pi-fw pi-video'
+                                    }
+                                ]
                             },
                             {
-                                label:'Delete',
-                                icon:'pi pi-fw pi-trash'
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-trash'
                             },
                             {
-                                separator:true
+                                separator: true
                             },
                             {
-                                label:'Export',
-                                icon:'pi pi-fw pi-external-link'
+                                label: 'Export',
+                                icon: 'pi pi-fw pi-external-link'
                             }
                         ]
                     },
                     {
-                        label:'Edit',
-                        icon:'pi pi-fw pi-pencil',
-                        items:[
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-pencil',
+                        items: [
                             {
-                                label:'Left',
-                                icon:'pi pi-fw pi-align-left'
+                                label: 'Left',
+                                icon: 'pi pi-fw pi-align-left'
                             },
                             {
-                                label:'Right',
-                                icon:'pi pi-fw pi-align-right'
+                                label: 'Right',
+                                icon: 'pi pi-fw pi-align-right'
                             },
                             {
-                                label:'Center',
-                                icon:'pi pi-fw pi-align-center'
+                                label: 'Center',
+                                icon: 'pi pi-fw pi-align-center'
                             },
                             {
-                                label:'Justify',
-                                icon:'pi pi-fw pi-align-justify'
-                            },
-    
+                                label: 'Justify',
+                                icon: 'pi pi-fw pi-align-justify'
+                            }
                         ]
                     },
                     {
-                        label:'Users',
-                        icon:'pi pi-fw pi-user',
-                        items:[
+                        label: 'Users',
+                        icon: 'pi pi-fw pi-user',
+                        items: [
                             {
-                                label:'New',
-                                icon:'pi pi-fw pi-user-plus',
-    
+                                label: 'New',
+                                icon: 'pi pi-fw pi-user-plus'
                             },
                             {
-                                label:'Delete',
-                                icon:'pi pi-fw pi-user-minus',
-    
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-user-minus'
                             },
                             {
-                                label:'Search',
-                                icon:'pi pi-fw pi-users',
-                                items:[
+                                label: 'Search',
+                                icon: 'pi pi-fw pi-users',
+                                items: [
                                     {
-                                        label:'Filter',
-                                        icon:'pi pi-fw pi-filter',
-                                        items:[
+                                        label: 'Filter',
+                                        icon: 'pi pi-fw pi-filter',
+                                        items: [
                                             {
-                                                label:'Print',
-                                                icon:'pi pi-fw pi-print'
+                                                label: 'Print',
+                                                icon: 'pi pi-fw pi-print'
                                             }
                                         ]
                                     },
                                     {
-                                        icon:'pi pi-fw pi-bars',
-                                        label:'List'
+                                        icon: 'pi pi-fw pi-bars',
+                                        label: 'List'
                                     }
                                 ]
                             }
                         ]
                     },
                     {
-                        label:'Events',
-                        icon:'pi pi-fw pi-calendar',
-                        items:[
+                        label: 'Events',
+                        icon: 'pi pi-fw pi-calendar',
+                        items: [
                             {
-                                label:'Edit',
-                                icon:'pi pi-fw pi-pencil',
-                                items:[
+                                label: 'Edit',
+                                icon: 'pi pi-fw pi-pencil',
+                                items: [
                                     {
-                                        label:'Save',
-                                        icon:'pi pi-fw pi-calendar-plus'
+                                        label: 'Save',
+                                        icon: 'pi pi-fw pi-calendar-plus'
                                     },
                                     {
-                                        label:'Delete',
-                                        icon:'pi pi-fw pi-calendar-minus'
-                                    },
+                                        label: 'Delete',
+                                        icon: 'pi pi-fw pi-calendar-minus'
+                                    }
                                 ]
                             },
                             {
-                                label:'Archieve',
-                                icon:'pi pi-fw pi-calendar-times',
-                                    items:[
+                                label: 'Archieve',
+                                icon: 'pi pi-fw pi-calendar-times',
+                                items: [
                                     {
-                                        label:'Remove',
-                                        icon:'pi pi-fw pi-calendar-minus'
+                                        label: 'Remove',
+                                        icon: 'pi pi-fw pi-calendar-minus'
                                     }
                                 ]
                             }
                         ]
                     },
                     {
-                        separator:true
+                        separator: true
                     },
                     {
-                        label:'Quit',
-                        icon:'pi pi-fw pi-power-off'
+                        label: 'Quit',
+                        icon: 'pi pi-fw pi-power-off'
                     }
                 ]
             }
         });
     });
 
-    it('should exist', async() => {
-        const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}};
+    it('should exist', async () => {
+        const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {} };
         const show = jest.spyOn(wrapper.vm, 'show');
 
         wrapper.vm.show(event);
         await wrapper.setData({ visible: true });
-        
+
         expect(show).toHaveBeenCalled();
         expect(wrapper.find('.p-contextmenu.p-component').exists()).toBe(true);
         expect(wrapper.findAll('.p-menuitem').length).toBe(5);
         expect(wrapper.findAll('.p-menuitem-text')[0].text()).toBe('File');
     });
 
-    it('should hide menu', async() => {
+    it('should hide menu', async () => {
         const hide = jest.spyOn(wrapper.vm, 'hide');
 
         await wrapper.setData({ visible: true });
@@ -172,4 +169,4 @@ describe('ContextMenu.vue', () => {
         expect(hide).toHaveBeenCalled();
         expect(wrapper.find('.p-contextmenu.p-component').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/contextmenu/ContextMenu.vue b/components/contextmenu/ContextMenu.vue
index 642a3a51a..d32ca8674 100755
--- a/components/contextmenu/ContextMenu.vue
+++ b/components/contextmenu/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs">
                 <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 import Portal from 'primevue/portal';
 
@@ -17,7 +17,7 @@ export default {
     name: 'ContextMenu',
     inheritAttrs: false,
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -62,6 +62,7 @@ export default {
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     mounted() {
@@ -72,17 +73,17 @@ export default {
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (item.command) {
                 item.command(event);
                 event.originalEvent.preventDefault();
             }
+
             this.hide();
         },
         toggle(event) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.visible) this.hide();
+            else this.show(event);
         },
         onLeafClick() {
             this.hide();
@@ -91,10 +92,8 @@ export default {
             this.pageX = event.pageX;
             this.pageY = event.pageY;
 
-            if (this.visible)
-                this.position();
-            else
-                this.visible = true;
+            if (this.visible) this.position();
+            else this.visible = true;
 
             event.stopPropagation();
             event.preventDefault();
@@ -157,6 +156,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -173,6 +173,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -192,7 +193,7 @@ export default {
             }
         },
         unbindDocumentContextMenuListener() {
-            if(this.documentContextMenuListener) {
+            if (this.documentContextMenuListener) {
                 document.removeEventListener('contextmenu', this.documentContextMenuListener);
                 this.documentContextMenuListener = null;
             }
@@ -203,17 +204,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-contextmenu p-component', {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }]
+            return [
+                'p-contextmenu p-component',
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'ContextMenuSub': ContextMenuSub,
-        'Portal': Portal
+        ContextMenuSub: ContextMenuSub,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/contextmenu/ContextMenuSub.vue b/components/contextmenu/ContextMenuSub.vue
index 16acc5957..387b23ebd 100755
--- a/components/contextmenu/ContextMenuSub.vue
+++ b/components/contextmenu/ContextMenuSub.vue
@@ -1,35 +1,43 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter">
-        <ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
+        <ul v-if="root ? true : parentActive" ref="container" :class="containerClass" role="menu">
             <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-                <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
-                    @mouseenter="onItemMouseEnter($event, item)">
+                <li v-if="visible(item) && !item.separator" role="none" :class="getItemClass(item)" :style="item.style" @mouseenter="onItemMouseEnter($event, item)">
                     <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" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
-                                <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                                <span class="p-menuitem-text">{{label(item)}}</span>
+                        <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                            <a v-ripple :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, { isActive, isExactActive })" role="menuitem">
+                                <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                                <span class="p-menuitem-text">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
-                            :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="disabled(item) ? null : '0'">
-                            <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
-                            <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
+                        <a
+                            v-else
+                            v-ripple
+                            :href="item.url"
+                            :class="linkClass(item)"
+                            :target="item.target"
+                            @click="onItemClick($event, item)"
+                            :aria-haspopup="item.items != null"
+                            :aria-expanded="item === activeItem"
+                            role="menuitem"
+                            :tabindex="disabled(item) ? null : '0'"
+                        >
+                            <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
+                            <span v-if="item.items" class="p-submenu-icon pi pi-angle-right"></span>
                         </a>
                     </template>
                     <component v-else :is="template" :item="item"></component>
-                    <ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
-                        @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
+                    <ContextMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
                 </li>
-                <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+                <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
             </template>
         </ul>
     </transition>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -57,6 +65,11 @@ export default {
             default: true
         }
     },
+    data() {
+        return {
+            activeItem: null
+        };
+    },
     watch: {
         parentActive(newValue) {
             if (!newValue) {
@@ -64,15 +77,11 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
     methods: {
         onItemMouseEnter(event, item) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -81,6 +90,7 @@ export default {
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -92,10 +102,8 @@ export default {
             }
 
             if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
+                if (this.activeItem && item === this.activeItem) this.activeItem = null;
+                else this.activeItem = item;
             }
 
             if (!item.items) {
@@ -115,51 +123,55 @@ export default {
         },
         position() {
             const parentItem = this.$refs.container.parentElement;
-            const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement)
+            const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
             const viewport = DomHandler.getViewport();
             const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
             const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
 
             this.$refs.container.style.top = '0px';
 
-            if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
                 this.$refs.container.style.left = -1 * sublistWidth + 'px';
-            }
-            else {
+            } else {
                 this.$refs.container.style.left = itemOuterWidth + 'px';
             }
         },
         getItemClass(item) {
             return [
-                'p-menuitem', item.class, {
+                'p-menuitem',
+                item.class,
+                {
                     'p-menuitem-active': this.activeItem === item
                 }
-            ]
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root};
+            return { 'p-submenu-list': !this.root };
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/datatable/BodyCell.vue b/components/datatable/BodyCell.vue
index c343ddefc..5cc91d5c5 100755
--- a/components/datatable/BodyCell.vue
+++ b/components/datatable/BodyCell.vue
@@ -1,41 +1,51 @@
 <template>
     <td v-if="loading" :style="containerStyle" :class="containerClass">
-        <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions"  />
+        <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
     </td>
     <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
-        <span v-if="responsiveLayout === 'stack'" class="p-column-title">{{columnProp('header')}}</span>
-        <component :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" v-if="column.children && column.children.body && !d_editing" />
-        <component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorSaveCallback="editorSaveCallback" :editorCancelCallback="editorCancelCallback" v-else-if="column.children && column.children.editor && d_editing" />
-        <component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" />
+        <span v-if="responsiveLayout === 'stack'" class="p-column-title">{{ columnProp('header') }}</span>
+        <component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
+        <component
+            v-else-if="column.children && column.children.editor && d_editing"
+            :is="column.children.editor"
+            :data="editingRowData"
+            :column="column"
+            :field="field"
+            :index="rowIndex"
+            :frozenRow="frozenRow"
+            :editorSaveCallback="editorSaveCallback"
+            :editorCancelCallback="editorCancelCallback"
+        />
+        <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" v-if="columnProp('selectionMode') === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" v-else-if="columnProp('selectionMode') ==='multiple'" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
+            <DTCheckbox v-else-if="columnProp('selectionMode') === 'multiple'" :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
+            <i :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon') || 'pi pi-bars']"></i>
         </template>
         <template v-else-if="columnProp('expander')">
-            <button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
+            <button v-ripple class="p-row-toggler p-link" @click="toggleRow" type="button">
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
+            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" @click="onRowEditInit" type="button">
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
-            <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button" v-ripple>
+            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" @click="onRowEditSave" type="button">
                 <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
             </button>
-            <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button" v-ripple>
+            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" @click="onRowEditCancel" type="button">
                 <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
             </button>
         </template>
-        <template v-else>{{resolveFieldData()}}</template>
+        <template v-else>{{ resolveFieldData() }}</template>
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import RowRadioButton from './RowRadioButton.vue';
 import RowCheckbox from './RowCheckbox.vue';
@@ -43,8 +53,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'BodyCell',
-    emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
-            'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
+    emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
     props: {
         rowData: {
             type: Object,
@@ -102,14 +111,14 @@ export default {
         return {
             d_editing: this.editing,
             styleObject: {}
-        }
+        };
     },
     watch: {
         editing(newValue) {
             this.d_editing = newValue;
         },
-        '$data.d_editing': function(newValue) {
-            this.$emit('editing-meta-change', {data: this.rowData, field: (this.field || `field_${this.index}`), index: this.rowIndex, editing: newValue});
+        '$data.d_editing': function (newValue) {
+            this.$emit('editing-meta-change', { data: this.rowData, field: this.field || `field_${this.index}`, index: this.rowIndex, editing: newValue });
         }
     },
     mounted() {
@@ -124,6 +133,7 @@ export default {
 
         if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
             const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
+
             focusableEl && focusableEl.focus();
         }
     },
@@ -147,7 +157,7 @@ export default {
             });
         },
         toggleRowWithRadio(event, index) {
-            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data});
+            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data });
         },
         toggleRowWithCheckbox(event, index) {
             this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
@@ -161,6 +171,7 @@ export default {
                     if (!this.selfClick) {
                         this.completeEdit(event, 'outside');
                     }
+
                     this.selfClick = false;
                 };
 
@@ -187,13 +198,14 @@ export default {
                 if (!this.d_editing) {
                     this.d_editing = true;
                     this.bindDocumentEditListener();
-                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
+                    this.$emit('cell-edit-init', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
 
                     this.overlayEventListener = (e) => {
                         if (this.$el && this.$el.contains(e.target)) {
                             this.selfClick = true;
                         }
-                    }
+                    };
+
                     OverlayEventBus.on('overlay-click', this.overlayEventListener);
                 }
             }
@@ -209,7 +221,7 @@ export default {
                 index: this.rowIndex,
                 type: type,
                 defaultPrevented: false,
-                preventDefault: function() {
+                preventDefault: function () {
                     this.defaultPrevented = true;
                 }
             };
@@ -225,21 +237,19 @@ export default {
                 switch (event.which) {
                     case 13:
                         this.completeEdit(event, 'enter');
-                    break;
+                        break;
 
                     case 27:
                         this.switchCellToViewMode();
-                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
-                    break;
+                        this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
+                        break;
 
                     case 9:
                         this.completeEdit(event, 'tab');
 
-                        if (event.shiftKey)
-                            this.moveToPreviousCell(event);
-                        else
-                            this.moveToNextCell(event);
-                    break;
+                        if (event.shiftKey) this.moveToPreviousCell(event);
+                        else this.moveToNextCell(event);
+                        break;
                 }
             }
         },
@@ -264,13 +274,13 @@ export default {
         findCell(element) {
             if (element) {
                 let cell = element;
+
                 while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
                     cell = cell.parentElement;
                 }
 
                 return cell;
-            }
-            else {
+            } else {
                 return null;
             }
         },
@@ -279,18 +289,16 @@ export default {
 
             if (!prevCell) {
                 let previousRow = cell.parentElement.previousElementSibling;
+
                 if (previousRow) {
                     prevCell = previousRow.lastElementChild;
                 }
             }
 
             if (prevCell) {
-                if (DomHandler.hasClass(prevCell, 'p-editable-column'))
-                    return prevCell;
-                else
-                    return this.findPreviousEditableColumn(prevCell);
-            }
-            else {
+                if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
+                else return this.findPreviousEditableColumn(prevCell);
+            } else {
                 return null;
             }
         },
@@ -299,68 +307,70 @@ export default {
 
             if (!nextCell) {
                 let nextRow = cell.parentElement.nextElementSibling;
+
                 if (nextRow) {
                     nextCell = nextRow.firstElementChild;
                 }
             }
 
             if (nextCell) {
-                if (DomHandler.hasClass(nextCell, 'p-editable-column'))
-                    return nextCell;
-                else
-                    return this.findNextEditableColumn(nextCell);
-            }
-            else {
+                if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
+                else return this.findNextEditableColumn(nextCell);
+            } else {
                 return null;
             }
         },
         isEditingCellValid() {
-            return (DomHandler.find(this.$el, '.p-invalid').length === 0);
+            return DomHandler.find(this.$el, '.p-invalid').length === 0;
         },
         onRowEditInit(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+            this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
         },
         onRowEditSave(event) {
-            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+            this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
         },
         onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+            this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
         },
         editorInitCallback(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+            this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
         },
         editorSaveCallback(event) {
             if (this.editMode === 'row') {
-                this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+                this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
             } else {
                 this.completeEdit(event, 'enter');
             }
         },
         editorCancelCallback(event) {
             if (this.editMode === 'row') {
-                this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+                this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
             } else {
                 this.switchCellToViewMode();
-                this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
+                this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
             }
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -377,41 +387,49 @@ export default {
             return this.columnProp('field');
         },
         containerClass() {
-            return [this.columnProp('bodyClass'), this.columnProp('class'), {
-                'p-selection-column': this.columnProp('selectionMode') != null,
-                'p-editable-column': this.isEditable(),
-                'p-cell-editing': this.d_editing,
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('bodyClass'),
+                this.columnProp('class'),
+                {
+                    'p-selection-column': this.columnProp('selectionMode') != null,
+                    'p-editable-column': this.isEditable(),
+                    'p-cell-editing': this.d_editing,
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         },
         loading() {
             return this.getVirtualScrollerProp('loading');
         },
         loadingOptions() {
             const getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');
-            return getLoaderOptions && getLoaderOptions(this.rowIndex, {
-                cellIndex: this.index,
-                cellFirst: this.index === 0,
-                cellLast: this.index === (this.getVirtualScrollerProp('columns').length - 1),
-                cellEven: this.index % 2 === 0,
-                cellOdd: this.index % 2 !== 0,
-                column: this.column,
-                field: this.field
-            });
+
+            return (
+                getLoaderOptions &&
+                getLoaderOptions(this.rowIndex, {
+                    cellIndex: this.index,
+                    cellFirst: this.index === 0,
+                    cellLast: this.index === this.getVirtualScrollerProp('columns').length - 1,
+                    cellEven: this.index % 2 === 0,
+                    cellOdd: this.index % 2 !== 0,
+                    column: this.column,
+                    field: this.field
+                })
+            );
         }
     },
     components: {
-        'DTRadioButton': RowRadioButton,
-        'DTCheckbox': RowCheckbox
+        DTRadioButton: RowRadioButton,
+        DTCheckbox: RowCheckbox
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/datatable/ColumnFilter.vue b/components/datatable/ColumnFilter.vue
index c6402b6b7..46f0a9727 100644
--- a/components/datatable/ColumnFilter.vue
+++ b/components/datatable/ColumnFilter.vue
@@ -1,40 +1,73 @@
 <template>
     <div :class="containerClass">
-        <div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
+        <div v-if="display === 'row'" class="p-fluid p-column-filter-element">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
-        <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
-            :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
-            @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
-        <button v-if="showClearButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
+        <button
+            v-if="showMenuButton"
+            ref="icon"
+            type="button"
+            class="p-column-filter-menu-button p-link"
+            aria-haspopup="true"
+            :aria-expanded="overlayVisible"
+            :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
+            @click="toggleMenu()"
+            @keydown="onToggleButtonKeyDown($event)"
+        >
+            <span class="pi pi-filter-icon pi-filter"></span>
+        </button>
+        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="overlayClass" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
                         <ul class="p-column-filter-row-items">
-                            <li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label"
-                                @click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
-                                :class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
+                            <li
+                                v-for="(matchMode, i) of matchModes"
+                                :key="matchMode.label"
+                                class="p-column-filter-row-item"
+                                @click="onRowMatchModeChange(matchMode.value)"
+                                @keydown="onRowMatchModeKeyDown($event)"
+                                @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
+                                :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
+                                :tabindex="i === 0 ? '0' : null"
+                            >
+                                {{ matchMode.label }}
+                            </li>
                             <li class="p-column-filter-separator"></li>
-                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li>
+                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{ noFilterLabel }}</li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div class="p-column-filter-operator" v-if="isShowOperator">
+                        <div v-if="isShowOperator" class="p-column-filter-operator">
                             <CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown>
                         </div>
                         <div class="p-column-filter-constraints">
-                            <div v-for="(fieldConstraint,i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
-                                <CFDropdown v-if="isShowMatchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
-                                    @update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
+                                <CFDropdown
+                                    v-if="isShowMatchModes"
+                                    :options="matchModes"
+                                    :modelValue="fieldConstraint.matchMode"
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    @update:modelValue="onMenuMatchModeChange($event, i)"
+                                    class="p-column-filter-matchmode-dropdown"
+                                ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                                 <div>
-                                    <CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
+                                    <CFButton
+                                        v-if="showRemoveIcon"
+                                        type="button"
+                                        icon="pi pi-trash"
+                                        class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
+                                        @click="removeConstraint(i)"
+                                        :label="removeRuleButtonLabel"
+                                    ></CFButton>
                                 </div>
                             </div>
                         </div>
-                        <div class="p-column-filter-add-rule" v-if="isShowAddConstraint">
+                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
                             <CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
                         </div>
                         <div class="p-column-filter-buttonbar">
@@ -54,16 +87,16 @@
 </template>
 
 <script>
-import {DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ConnectedOverlayScrollHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import {FilterOperator} from 'primevue/api';
+import { FilterOperator } from 'primevue/api';
 import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'ColumnFilter',
-    emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
+    emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         field: {
             type: String,
@@ -140,7 +173,7 @@ export default {
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
-        }
+        };
     },
     overlay: null,
     selfClick: false,
@@ -159,24 +192,24 @@ export default {
     mounted() {
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
+
             if (fieldFilters.operator) {
                 this.defaultMatchMode = fieldFilters.constraints[0].matchMode;
                 this.defaultOperator = fieldFilters.operator;
-            }
-            else {
+            } else {
                 this.defaultMatchMode = this.filters[this.field].matchMode;
             }
         }
     },
     methods: {
         clearFilter() {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             if (_filters[this.field].operator) {
                 _filters[this.field].constraints.splice(1);
                 _filters[this.field].operator = this.defaultOperator;
-                _filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode};
-            }
-            else {
+                _filters[this.field].constraints[0] = { value: null, matchMode: this.defaultMatchMode };
+            } else {
                 _filters[this.field].value = null;
                 _filters[this.field].matchMode = this.defaultMatchMode;
             }
@@ -187,18 +220,17 @@ export default {
             this.hide();
         },
         applyFilter() {
-            this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]});
+            this.$emit('apply-click', { field: this.field, constraints: this.filters[this.field] });
             this.$emit('filter-apply');
             this.hide();
         },
         hasFilter() {
             if (this.filtersStore) {
                 let fieldFilter = this.filtersStore[this.field];
+
                 if (fieldFilter) {
-                    if (fieldFilter.operator)
-                        return !this.isFilterBlank(fieldFilter.constraints[0].value);
-                    else
-                        return !this.isFilterBlank(fieldFilter.value);
+                    if (fieldFilter.operator) return !this.isFilterBlank(fieldFilter.constraints[0].value);
+                    else return !this.isFilterBlank(fieldFilter.value);
                 }
             }
 
@@ -209,48 +241,51 @@ export default {
         },
         isFilterBlank(filter) {
             if (filter !== null && filter !== undefined) {
-                if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0))
-                    return true;
-                else
-                    return false;
+                if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0)) return true;
+                else return false;
             }
+
             return true;
         },
         toggleMenu() {
             this.overlayVisible = !this.overlayVisible;
         },
         onToggleButtonKeyDown(event) {
-            switch(event.key) {
+            switch (event.key) {
                 case 'Escape':
                 case 'Tab':
                     this.overlayVisible = false;
-                break;
+                    break;
 
                 case 'ArrowDown':
                     if (this.overlayVisible) {
                         let focusable = DomHandler.getFocusableElements(this.overlay);
+
                         if (focusable) {
                             focusable[0].focus();
                         }
+
                         event.preventDefault();
-                    }
-                    else if (event.altKey) {
+                    } else if (event.altKey) {
                         this.overlayVisible = true;
                         event.preventDefault();
                     }
-                break;
+
+                    break;
             }
         },
         onEscape() {
             this.overlayVisible = false;
+
             if (this.$refs.icon) {
                 this.$refs.icon.focus();
             }
         },
         onRowMatchModeChange(matchMode) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].matchMode = matchMode;
-            this.$emit('matchmode-change', {field: this.field, matchMode: matchMode});
+            this.$emit('matchmode-change', { field: this.field, matchMode: matchMode });
             this.$emit('filter-change', _filters);
             this.$emit('filter-apply');
             this.hide();
@@ -258,9 +293,10 @@ export default {
         onRowMatchModeKeyDown(event) {
             let item = event.target;
 
-            switch(event.key) {
+            switch (event.key) {
                 case 'ArrowDown':
                     var nextItem = this.findNextItem(item);
+
                     if (nextItem) {
                         item.removeAttribute('tabindex');
                         nextItem.tabIndex = '0';
@@ -268,10 +304,11 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'ArrowUp':
                     var prevItem = this.findPrevItem(item);
+
                     if (prevItem) {
                         item.removeAttribute('tabindex');
                         prevItem.tabIndex = '0';
@@ -279,36 +316,40 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
             }
         },
         isRowMatchModeSelected(matchMode) {
-            return (this.filters[this.field]).matchMode === matchMode;
+            return this.filters[this.field].matchMode === matchMode;
         },
         onOperatorChange(value) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].operator = value;
             this.$emit('filter-change', _filters);
 
-            this.$emit('operator-change', {field: this.field, operator: value});
+            this.$emit('operator-change', { field: this.field, operator: value });
+
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
             }
         },
         onMenuMatchModeChange(value, index) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].constraints[index].matchMode = value;
-            this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index});
+            this.$emit('matchmode-change', { field: this.field, matchMode: value, index: index });
 
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
             }
         },
         addConstraint() {
-            let _filters = {...this.filters};
-            let newConstraint = {value: null, matchMode: this.defaultMatchMode};
+            let _filters = { ...this.filters };
+            let newConstraint = { value: null, matchMode: this.defaultMatchMode };
+
             _filters[this.field].constraints.push(newConstraint);
-            this.$emit('constraint-add', {field: this.field, constraing: newConstraint});
+            this.$emit('constraint-add', { field: this.field, constraing: newConstraint });
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
@@ -316,9 +357,10 @@ export default {
             }
         },
         removeConstraint(index) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
             let removedConstraint = _filters[this.field].constraints.splice(index, 1);
-            this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint});
+
+            this.$emit('constraint-remove', { field: this.field, constraing: removedConstraint });
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
@@ -331,18 +373,14 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-column-filter-separator')  ? this.findNextItem(nextItem) : nextItem;
-            else
-                return item.parentElement.firstElementChild;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
+            else return item.parentElement.firstElementChild;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                DomHandler.hasClass(prevItem, 'p-column-filter-separator')  ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return item.parentElement.lastElementChild;
+            if (prevItem) DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
+            else return item.parentElement.lastElementChild;
         },
         hide() {
             this.overlayVisible = false;
@@ -362,6 +400,7 @@ export default {
             if (this.filterMenuStyle) {
                 DomHandler.applyStyle(this.overlay, this.filterMenuStyle);
             }
+
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
             this.bindOutsideClickListener();
@@ -372,7 +411,8 @@ export default {
                 if (!this.isOutsideClicked(e.target)) {
                     this.selfClick = true;
                 }
-            }
+            };
+
             OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
         onOverlayLeave() {
@@ -404,8 +444,10 @@ export default {
                     if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                         this.overlayVisible = false;
                     }
+
                     this.selfClick = false;
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -439,6 +481,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -451,35 +494,43 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-column-filter p-fluid', {
-                'p-column-filter-row': this.display === 'row',
-                'p-column-filter-menu': this.display === 'menu'
-            }];
+            return [
+                'p-column-filter p-fluid',
+                {
+                    'p-column-filter-row': this.display === 'row',
+                    'p-column-filter-menu': this.display === 'menu'
+                }
+            ];
         },
         overlayClass() {
-            return [this.filterMenuClass, {
-                'p-column-filter-overlay p-component p-fluid': true,
-                'p-column-filter-overlay-menu': this.display === 'menu',
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                this.filterMenuClass,
+                {
+                    'p-column-filter-overlay p-component p-fluid': true,
+                    'p-column-filter-overlay-menu': this.display === 'menu',
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         showMenuButton() {
-            return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
+            return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },
         matchModes() {
-            return this.matchModeOptions ||
-                this.$primevue.config.filterMatchModeOptions[this.type].map(key => {
-                    return {label: this.$primevue.config.locale[key], value: key}
-                });
+            return (
+                this.matchModeOptions ||
+                this.$primevue.config.filterMatchModeOptions[this.type].map((key) => {
+                    return { label: this.$primevue.config.locale[key], value: key };
+                })
+            );
         },
         isShowMatchModes() {
             return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
         },
         operatorOptions() {
             return [
-                {label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND},
-                {label: this.$primevue.config.locale.matchAny, value: FilterOperator.OR}
+                { label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND },
+                { label: this.$primevue.config.locale.matchAny, value: FilterOperator.OR }
             ];
         },
         noFilterLabel() {
@@ -504,7 +555,7 @@ export default {
             return this.$primevue.config.locale.addRule;
         },
         isShowAddConstraint() {
-            return this.showAddButton && this.filters[this.field].operator && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
+            return this.showAddButton && this.filters[this.field].operator && this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints;
         },
         clearButtonLabel() {
             return this.$primevue.config.locale.clear;
@@ -514,9 +565,9 @@ export default {
         }
     },
     components: {
-        'CFDropdown': Dropdown,
-        'CFButton': Button,
-        'Portal': Portal
+        CFDropdown: Dropdown,
+        CFButton: Button,
+        Portal: Portal
     }
-}
+};
 </script>
diff --git a/components/datatable/DataTable.d.ts b/components/datatable/DataTable.d.ts
index 66cdd777b..2e1a58dae 100755
--- a/components/datatable/DataTable.d.ts
+++ b/components/datatable/DataTable.d.ts
@@ -163,7 +163,7 @@ export interface DataTablePageEvent extends DataTableSortEvent {
 /**
  * @extends DataTableSortEvent
  */
- export interface DataTableFilterEvent extends DataTableSortEvent {
+export interface DataTableFilterEvent extends DataTableSortEvent {
     /**
      * Filtered collection (non-lazy only)
      */
@@ -188,12 +188,12 @@ export interface DataTableRowClickEvent {
 /**
  * @extends DataTableRowClickEvent
  */
-export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent { }
+export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {}
 
 /**
  * @extends DataTableRowClickEvent
  */
-export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent { }
+export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
 
 export interface DataTableRowSelectEvent {
     /**
@@ -217,7 +217,7 @@ export interface DataTableRowSelectEvent {
 /**
  * @extends DataTableRowSelectEvent
  */
-export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent { }
+export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
 
 export interface DataTableRowSelectAllEvent {
     /**
@@ -307,7 +307,7 @@ export interface DataTableRowExpandEvent {
 /**
  * @extends DataTableRowExpandEvent
  */
-export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent { }
+export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
 
 export interface DataTableCellEditInitEvent {
     /**
@@ -331,7 +331,7 @@ export interface DataTableCellEditInitEvent {
 /**
  * @extends DataTableCellEditInitEvent
  */
-export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent { }
+export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
 
 export interface DataTableCellEditCompleteEvent {
     /**
@@ -394,12 +394,12 @@ export interface DataTableRowEditInitEvent {
 /**
  * @extends DataTableRowEditInitEvent
  */
-export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent { }
+export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {}
 
 /**
  * @extends DataTableRowEditCancelEvent
  */
-export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent { }
+export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {}
 
 export interface DataTableStateEvent {
     /**
@@ -719,7 +719,7 @@ export interface DataTableProps {
      * A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
      *
      */
-    rowClass?:(data: any) => object | string | undefined;
+    rowClass?: (data: any) => object | string | undefined;
     /**
      * A function that takes the row data as a parameter and returns the inline style for the corresponding row.
      */
@@ -839,11 +839,11 @@ export interface DataTableSlots {
         /**
          * Row data
          */
-         data: any;
-         /**
-          * Row index
-          */
-         index: number;
+        data: any;
+        /**
+         * Row index
+         */
+        index: number;
     }) => VNode[];
 }
 
@@ -882,7 +882,7 @@ export declare type DataTableEmits = {
      * Emitted when the contextMenuSelection changes.
      * @param {*} value - New value.
      */
-    'update:contextMenuSelection': (value: any[] | any | undefined ) => void;
+    'update:contextMenuSelection': (value: any[] | any | undefined) => void;
     /**
      * Emitted when the expandedRows changes.
      * @param {DataTableExpandedRows} value - New value.
@@ -907,17 +907,17 @@ export declare type DataTableEmits = {
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {DataTablePageEvent} event - Custom page event.
      */
-    'page': (event: DataTablePageEvent) => void;
+    page: (event: DataTablePageEvent) => void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {DataTableSortEvent} event - Custom sort event.
      */
-    'sort': (event: DataTableSortEvent) => void;
+    sort: (event: DataTableSortEvent) => void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {DataTableFilterEvent} event - Custom filter event.
      */
-    'filter': (event: DataTableFilterEvent) => void;
+    filter: (event: DataTableFilterEvent) => void;
     /**
      * Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.
      * @param {*} value - Value displayed by the table.
@@ -1038,7 +1038,7 @@ export declare type DataTableEmits = {
      * @param {DataTableStateEvent} event - Custom state event.
      */
     'state-save': (event: DataTableStateEvent) => void;
-}
+};
 
 declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
     /**
@@ -1051,7 +1051,7 @@ declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, D
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DataTable: GlobalComponentConstructor<DataTable>
+        DataTable: GlobalComponentConstructor<DataTable>;
     }
 }
 
@@ -1066,10 +1066,10 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable)
- * - [Edit](https://www.primefaces.org/primevue/showcase/#/datatable/edit)
- * - [Sort](https://www.primefaces.org/primevue/showcase/#/datatable/sort)
- * - [Filter](https://www.primefaces.org/primevue/showcase/#/datatable/filter)
+ * - [DataTable](https://www.primefaces.org/primevue/datatable)
+ * - [Edit](https://www.primefaces.org/primevue/datatable/edit)
+ * - [Sort](https://www.primefaces.org/primevue/datatable/sort)
+ * - [Filter](https://www.primefaces.org/primevue/datatable/filter)
  * etc.
  *
  */
diff --git a/components/datatable/DataTable.spec.js b/components/datatable/DataTable.spec.js
index 94bea83f5..fc7fd5436 100644
--- a/components/datatable/DataTable.spec.js
+++ b/components/datatable/DataTable.spec.js
@@ -5,78 +5,78 @@ import Row from '@/components/row/Row.vue';
 import Column from '@/components/column/Column.vue';
 import Button from '@/components/button/Button.vue';
 import InputText from '@/components/inputtext/InputText.vue';
-import {FilterMatchMode} from 'primevue/api';
+import { FilterMatchMode } from 'primevue/api';
 
-window.URL.createObjectURL = function() {};
+window.URL.createObjectURL = function () {};
 
 const smallData = [
     {
-        "id": "1000",
-        "code": "vbb124btr",
-        "name": "Game Controller"
+        id: '1000',
+        code: 'vbb124btr',
+        name: 'Game Controller'
     },
     {
-        "id": "1001",
-        "code": "nvklal433",
-        "name": "Black Watch"
+        id: '1001',
+        code: 'nvklal433',
+        name: 'Black Watch'
     },
     {
-        "id": "1002",
-        "code": "zz21cz3c1",
-        "name": "Blue Band"
+        id: '1002',
+        code: 'zz21cz3c1',
+        name: 'Blue Band'
     }
 ];
 
 const data = [
     {
-        "id": "1000",
-        "code": "vbb124btr",
-        "name": "Game Controller"
+        id: '1000',
+        code: 'vbb124btr',
+        name: 'Game Controller'
     },
     {
-        "id": "1001",
-        "code": "nvklal433",
-        "name": "Black Watch"
+        id: '1001',
+        code: 'nvklal433',
+        name: 'Black Watch'
     },
     {
-        "id": "1002",
-        "code": "zz21cz3c1",
-        "name": "Blue Band"
+        id: '1002',
+        code: 'zz21cz3c1',
+        name: 'Blue Band'
     },
     {
-        "id": "1003",
-        "code": "244wgerg2",
-        "name": "Blue T-Shirt"
+        id: '1003',
+        code: '244wgerg2',
+        name: 'Blue T-Shirt'
     },
     {
-        "id": "1004",
-        "code": "h456wer53",
-        "name": "Bracelet"
+        id: '1004',
+        code: 'h456wer53',
+        name: 'Bracelet'
     },
     {
-        "id": "1005",
-        "code": "cm230f032",
-        "name": "Gaming Set"
+        id: '1005',
+        code: 'cm230f032',
+        name: 'Gaming Set'
     },
     {
-        "id": "1006",
-        "code": "bib36pfvm",
-        "name": "Chakra Bracelet"
+        id: '1006',
+        code: 'bib36pfvm',
+        name: 'Chakra Bracelet'
     },
     {
-        "id": "1007",
-        "code": "mbvjkgip5",
-        "name": "Galaxy Earrings"
+        id: '1007',
+        code: 'mbvjkgip5',
+        name: 'Galaxy Earrings'
     },
     {
-        "id": "1008",
-        "code": "f230fh0g3",
-        "name": "Bamboo Watch"
+        id: '1008',
+        code: 'f230fh0g3',
+        name: 'Bamboo Watch'
     },
     {
-        "id": "1009",
-        "code": "av2231fwg",
-        "name": "Brown Purse"
+        id: '1009',
+        code: 'av2231fwg',
+        name: 'Brown Purse'
     }
 ];
 
@@ -133,7 +133,6 @@ describe('DataTable.vue', () => {
         expect(rows[0].findAll('td').length).toEqual(3);
     });
 
-
     // table templating
     it('should have header template', () => {
         expect(wrapper.find('.p-datatable-header').exists()).toBe(true);
@@ -173,10 +172,8 @@ describe('DataTable.vue', () => {
         expect(wrapper.find('.p-paginator-right-content').text()).toBe('Paginator End Templating');
     });
 
-
     // column templating
 
-
     // column grouping
     it('should exist', () => {
         wrapper = mount({
@@ -216,35 +213,37 @@ describe('DataTable.vue', () => {
             data() {
                 return {
                     sales: null
-                }
+                };
             },
             created() {
                 this.sales = [
-                    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-                    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-                    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
+                    { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
+                    { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
+                    { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 }
                 ];
             },
             methods: {
                 formatCurrency(value) {
-                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+                    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
                 }
             },
             computed: {
                 lastYearTotal() {
                     let total = 0;
-                    for(let sale of this.sales) {
+
+                    for (let sale of this.sales) {
                         total += sale.lastYearProfit;
                     }
-        
+
                     return this.formatCurrency(total);
                 },
                 thisYearTotal() {
                     let total = 0;
-                    for(let sale of this.sales) {
+
+                    for (let sale of this.sales) {
                         total += sale.thisYearProfit;
                     }
-        
+
                     return this.formatCurrency(total);
                 }
             }
@@ -281,7 +280,6 @@ describe('DataTable.vue', () => {
         expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
     });
 
-
     // sorting
     it('should single sort', async () => {
         wrapper = mount(DataTable, {
@@ -403,7 +401,7 @@ describe('DataTable.vue', () => {
         const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
 
         await sortableTH.trigger('click');
-        
+
         expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('ascending');
 
@@ -422,10 +420,9 @@ describe('DataTable.vue', () => {
         expect(sortableTH.attributes()['aria-sort']).toBe('none');
     });
 
-
     // filtering
     it('should filtered globally', async () => {
-        await wrapper.setProps({ filters: { 'global': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} }});
+        await wrapper.setProps({ filters: { global: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } } });
 
         await wrapper.vm.filter(smallData);
 
@@ -433,10 +430,7 @@ describe('DataTable.vue', () => {
     });
 
     it('should filtered with menu display', async () => {
-        await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
-            filterDisplay: 'menu',
-            globalFilterFields: ['name']
-        });
+        await wrapper.setProps({ filters: { name: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } }, filterDisplay: 'menu', globalFilterFields: ['name'] });
 
         await wrapper.vm.filter(smallData);
 
@@ -445,10 +439,7 @@ describe('DataTable.vue', () => {
     });
 
     it('should filtered with row display', async () => {
-        await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
-            filterDisplay: 'row',
-            globalFilterFields: ['name']
-        });
+        await wrapper.setProps({ filters: { name: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } }, filterDisplay: 'row', globalFilterFields: ['name'] });
 
         await wrapper.vm.filter(smallData);
 
@@ -458,10 +449,10 @@ describe('DataTable.vue', () => {
 
     // selection
     it('should single select', async () => {
-        await wrapper.setProps({ selection: null, selectionMode: 'single'});
+        await wrapper.setProps({ selection: null, selectionMode: 'single' });
 
         await wrapper.vm.onRowClick({
-            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[0]},
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0] },
             data: smallData[0],
             index: 0
         });
@@ -472,16 +463,16 @@ describe('DataTable.vue', () => {
     });
 
     it('should multiple selection with meta key', async () => {
-        await wrapper.setProps({ selection: null, selectionMode: 'multiple'});
+        await wrapper.setProps({ selection: null, selectionMode: 'multiple' });
 
         await wrapper.vm.onRowClick({
-            originalEvent: {shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0]},
+            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0] },
             data: smallData[0],
             index: 0
         });
 
         await wrapper.vm.onRowClick({
-            originalEvent: {shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1]},
+            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1] },
             data: smallData[1],
             index: 1
         });
@@ -492,16 +483,16 @@ describe('DataTable.vue', () => {
     });
 
     it('should multiple selection without meta key', async () => {
-        await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false});
+        await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false });
 
         await wrapper.vm.onRowClick({
-            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[0]},
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0] },
             data: smallData[0],
             index: 0
         });
 
         await wrapper.vm.onRowClick({
-            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[1]},
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[1] },
             data: smallData[1],
             index: 1
         });
@@ -534,16 +525,16 @@ describe('DataTable.vue', () => {
                 `
             }
         });
-        
+
         expect(wrapper.findAll('td.p-selection-column').length).toBe(3);
         expect(wrapper.findAll('.p-radiobutton').length).toBe(3);
 
-        await wrapper.vm.toggleRowWithRadio({originalEvent: {}, data: smallData[0], index: 0});
+        await wrapper.vm.toggleRowWithRadio({ originalEvent: {}, data: smallData[0], index: 0 });
 
         expect(wrapper.emitted()['update:selection'][0][0]).toEqual(smallData[0]);
         expect(wrapper.emitted()['row-select'][0][0].index).toBe(0);
 
-        await wrapper.vm.toggleRowWithRadio({originalEvent: {}, data: smallData[1], index: 1});
+        await wrapper.vm.toggleRowWithRadio({ originalEvent: {}, data: smallData[1], index: 1 });
 
         expect(wrapper.emitted()['update:selection'][1][0]).toEqual(smallData[1]);
         expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
@@ -572,12 +563,12 @@ describe('DataTable.vue', () => {
 
         expect(wrapper.findAll('.p-checkbox').length).toBe(4);
 
-        await wrapper.vm.toggleRowWithCheckbox({originalEvent: {}, data: smallData[0], index: 0});
+        await wrapper.vm.toggleRowWithCheckbox({ originalEvent: {}, data: smallData[0], index: 0 });
 
         expect(wrapper.emitted()['update:selection'][0][0]).toEqual([smallData[0]]);
         expect(wrapper.emitted()['row-select'][0][0].index).toBe(0);
 
-        await wrapper.vm.toggleRowWithCheckbox({originalEvent: {}, data: smallData[1], index: 1});
+        await wrapper.vm.toggleRowWithCheckbox({ originalEvent: {}, data: smallData[1], index: 1 });
 
         expect(wrapper.emitted()['update:selection'][1][0]).toEqual([smallData[1]]);
         expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
@@ -603,7 +594,7 @@ describe('DataTable.vue', () => {
             }
         });
 
-        await wrapper.vm.toggleRowsWithCheckbox({originalEvent: {}, checked: true});
+        await wrapper.vm.toggleRowsWithCheckbox({ originalEvent: {}, checked: true });
 
         expect(wrapper.emitted()['row-select-all'][0][0].data).toEqual(smallData);
         expect(wrapper.emitted()['update:selection'][0][0]).toEqual(smallData);
@@ -629,40 +620,39 @@ describe('DataTable.vue', () => {
             }
         });
 
-        await wrapper.vm.toggleRowsWithCheckbox({originalEvent: {}, checked: false});
+        await wrapper.vm.toggleRowsWithCheckbox({ originalEvent: {}, checked: false });
 
         expect(wrapper.emitted()['row-unselect-all'][0][0].data).toBe(undefined);
         expect(wrapper.emitted()['update:selection'][0][0]).toEqual([]);
     });
 
-
     // scrolling
     it('should scrolling', async () => {
-        await wrapper.setProps({scrollable: true});
+        await wrapper.setProps({ scrollable: true });
 
         expect(wrapper.find('.p-datatable-scrollable').exists()).toBe(true);
     });
 
     it('should vertical scroll', async () => {
-        await wrapper.setProps({scrollable: true, scrollHeight: '100px'});
+        await wrapper.setProps({ scrollable: true, scrollHeight: '100px' });
 
         expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('max-height: 100px;');
     });
 
     it('should flex scrolling', async () => {
-        await wrapper.setProps({scrollable: true, scrollHeight: 'flex'});
+        await wrapper.setProps({ scrollable: true, scrollHeight: 'flex' });
 
         expect(wrapper.find('.p-datatable-flex-scrollable').exists()).toBe(true);
     });
 
     it('should both scrolling', async () => {
-        await wrapper.setProps({scrollable: true, scrollHeight: '100px', scrollDirection: 'both'});
+        await wrapper.setProps({ scrollable: true, scrollHeight: '100px', scrollDirection: 'both' });
 
         expect(wrapper.find('.p-datatable-scrollable-both').exists()).toBe(true);
     });
 
     it('should have frozen rows', async () => {
-        await wrapper.setProps({frozenValue: [smallData[0]], scrollable: true, scrollHeight: '100px', scrollDirection: 'both'});
+        await wrapper.setProps({ frozenValue: [smallData[0]], scrollable: true, scrollHeight: '100px', scrollDirection: 'both' });
 
         expect(wrapper.findAll('.p-datatable-tbody')[0].classes()).toContain('p-datatable-frozen-tbody');
         expect(wrapper.findAll('.p-datatable-tbody')[0].attributes().style).toBe('top: 0px;');
@@ -697,10 +687,8 @@ describe('DataTable.vue', () => {
         // expect(wrapper.findAll('td.p-frozen-column')[0].attributes().style).toBe('left: 0px;');
     });
 
-
     // lazy loading
 
-
     // row expansion
     it('should have row toggler', () => {
         expect(wrapper.findAll('.p-row-toggler').length).toBe(3);
@@ -709,7 +697,7 @@ describe('DataTable.vue', () => {
     it('should expand a row', async () => {
         await wrapper.setProps({ expandedRows: [] });
 
-        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0]});
+        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0] });
 
         expect(wrapper.emitted()['update:expandedRows'][0][0]).toEqual([smallData[0]]);
         expect(wrapper.emitted()['row-expand'][0][0].data).toEqual(smallData[0]);
@@ -718,13 +706,12 @@ describe('DataTable.vue', () => {
     it('should collapse a row', async () => {
         await wrapper.setProps({ expandedRows: [smallData[0]] });
 
-        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0]});
+        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0] });
 
         expect(wrapper.emitted()['update:expandedRows'][0][0]).toEqual([]);
         expect(wrapper.emitted()['row-collapse'][0][0].data).toEqual(smallData[0]);
     });
 
-
     // editing
     // cell editing
 
@@ -799,10 +786,10 @@ describe('DataTable.vue', () => {
             }
         });
 
-        await wrapper.vm.onRowEditSave({data: { "id": "9999", "code": "vbb124btr", "name": "Game Controller"}});
+        await wrapper.vm.onRowEditSave({ data: { id: '9999', code: 'vbb124btr', name: 'Game Controller' } });
 
         expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([]);
-        expect(wrapper.emitted()['row-edit-save'][0][0].data).toEqual({ "id": "9999", "code": "vbb124btr", "name": "Game Controller"});
+        expect(wrapper.emitted()['row-edit-save'][0][0].data).toEqual({ id: '9999', code: 'vbb124btr', name: 'Game Controller' });
     });
 
     it('should cancel row editing', async () => {
@@ -834,14 +821,13 @@ describe('DataTable.vue', () => {
                 `
             }
         });
-        
+
         await wrapper.vm.onRowEditCancel({ data: smallData[0] });
 
         expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([]);
         expect(wrapper.emitted()['row-edit-cancel'][0][0].data).toEqual(smallData[0]);
     });
 
-
     // column resize
     it('should fit mode expanding exists', () => {
         wrapper = mount(DataTable, {
@@ -890,7 +876,7 @@ describe('DataTable.vue', () => {
 
         const resizer = wrapper.findAll('.p-column-resizer')[0];
 
-        await wrapper.vm.onColumnResizeStart({target: resizer.element});
+        await wrapper.vm.onColumnResizeStart({ target: resizer.element });
 
         expect(wrapper.componentVM.columnResizing).toBe(true);
         expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
@@ -943,7 +929,7 @@ describe('DataTable.vue', () => {
 
         const resizer = wrapper.findAll('.p-column-resizer')[0];
 
-        await wrapper.vm.onColumnResizeStart({target: resizer.element});
+        await wrapper.vm.onColumnResizeStart({ target: resizer.element });
 
         await wrapper.vm.onColumnResizeEnd();
 
@@ -972,7 +958,7 @@ describe('DataTable.vue', () => {
 
         const resizer = wrapper.findAll('.p-column-resizer')[0];
 
-        await wrapper.vm.onColumnResizeStart({target: resizer.element});
+        await wrapper.vm.onColumnResizeStart({ target: resizer.element });
 
         expect(wrapper.componentVM.columnResizing).toBe(true);
         expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
@@ -1025,14 +1011,13 @@ describe('DataTable.vue', () => {
 
         const resizer = wrapper.findAll('.p-column-resizer')[0];
 
-        await wrapper.vm.onColumnResizeStart({target: resizer.element});
+        await wrapper.vm.onColumnResizeStart({ target: resizer.element });
 
         await wrapper.vm.onColumnResizeEnd();
 
         expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
     });
 
-
     // column reorder
     it('should reorder columns', async () => {
         await wrapper.setProps({ reorderableColumns: true });
@@ -1041,7 +1026,6 @@ describe('DataTable.vue', () => {
         expect(wrapper.find('.p-datatable-reorder-indicator-down').exists()).toBe(true);
     });
 
-
     // row reorder
     it('should exist', () => {
         wrapper = mount(DataTable, {
@@ -1061,11 +1045,10 @@ describe('DataTable.vue', () => {
                 `
             }
         });
-        
+
         expect(wrapper.findAll('.p-datatable-reorderablerow-handle').length).toBe(3);
     });
 
-
     // row group
     // subheader grouping
     it('should exist', () => {
@@ -1169,81 +1152,81 @@ describe('DataTable.vue', () => {
             props: {
                 value: [
                     {
-                        "id":1000,
-                        "name":"James Butt",
-                        "country":{
-                            "name":"Algeria",
-                            "code":"dz"
+                        id: 1000,
+                        name: 'James Butt',
+                        country: {
+                            name: 'Algeria',
+                            code: 'dz'
                         },
-                        "company":"Benton, John B Jr",
-                        "representative":{
-                            "name":"Ioni Bowcher",
-                            "image":"ionibowcher.png"
+                        company: 'Benton, John B Jr',
+                        representative: {
+                            name: 'Ioni Bowcher',
+                            image: 'ionibowcher.png'
                         }
                     },
                     {
-                        "id":1001,
-                        "name":"Josephine Darakjy",
-                        "country":{
-                            "name":"Egypt",
-                            "code":"eg"
+                        id: 1001,
+                        name: 'Josephine Darakjy',
+                        country: {
+                            name: 'Egypt',
+                            code: 'eg'
                         },
-                        "company":"Chanay, Jeffrey A Esq",
-                        "representative":{
-                            "name":"Amy Elsner",
-                            "image":"amyelsner.png"
+                        company: 'Chanay, Jeffrey A Esq',
+                        representative: {
+                            name: 'Amy Elsner',
+                            image: 'amyelsner.png'
                         }
                     },
                     {
-                        "id":1013,
-                        "name":"Graciela Ruta",
-                        "country":{
-                            "name":"Chile",
-                            "code":"cl"
+                        id: 1013,
+                        name: 'Graciela Ruta',
+                        country: {
+                            name: 'Chile',
+                            code: 'cl'
                         },
-                        "company":"Buckley Miller & Wright",
-                        "representative":{
-                            "name":"Amy Elsner",
-                            "image":"amyelsner.png"
+                        company: 'Buckley Miller & Wright',
+                        representative: {
+                            name: 'Amy Elsner',
+                            image: 'amyelsner.png'
                         }
                     },
                     {
-                        "id":1021,
-                        "name":"Veronika Inouye",
-                        "country":{
-                            "name":"Ecuador",
-                            "code":"ec"
+                        id: 1021,
+                        name: 'Veronika Inouye',
+                        country: {
+                            name: 'Ecuador',
+                            code: 'ec'
                         },
-                        "company":"C 4 Network Inc",
-                        "representative":{
-                            "name":"Ioni Bowcher",
-                            "image":"ionibowcher.png"
+                        company: 'C 4 Network Inc',
+                        representative: {
+                            name: 'Ioni Bowcher',
+                            image: 'ionibowcher.png'
                         }
                     },
                     {
-                        "id":1026,
-                        "name":"Chanel Caudy",
-                        "country":{
-                            "name":"Argentina",
-                            "code":"ar"
+                        id: 1026,
+                        name: 'Chanel Caudy',
+                        country: {
+                            name: 'Argentina',
+                            code: 'ar'
                         },
-                        "company":"Professional Image Inc",
-                        "representative":{
-                            "name":"Ioni Bowcher",
-                            "image":"ionibowcher.png"
+                        company: 'Professional Image Inc',
+                        representative: {
+                            name: 'Ioni Bowcher',
+                            image: 'ionibowcher.png'
                         }
                     },
                     {
-                        "id":1027,
-                        "name":"Ezekiel Chui",
-                        "country":{
-                            "name":"Ireland",
-                            "code":"ie"
+                        id: 1027,
+                        name: 'Ezekiel Chui',
+                        country: {
+                            name: 'Ireland',
+                            code: 'ie'
                         },
-                        "company":"Sider, Donald C Esq",
-                        "representative":{
-                            "name":"Amy Elsner",
-                            "image":"amyelsner.png"
+                        company: 'Sider, Donald C Esq',
+                        representative: {
+                            name: 'Amy Elsner',
+                            image: 'amyelsner.png'
                         }
                     }
                 ],
@@ -1294,34 +1277,34 @@ describe('DataTable.vue', () => {
             props: {
                 value: [
                     {
-                        "id": "1000",
-                        "code": "vbb124btr",
-                        "name": "Game Controller"
+                        id: '1000',
+                        code: 'vbb124btr',
+                        name: 'Game Controller'
                     },
                     {
-                        "id": "1001",
-                        "code": "nvklal433",
-                        "name": "Black Watch"
+                        id: '1001',
+                        code: 'nvklal433',
+                        name: 'Black Watch'
                     },
                     {
-                        "id": "1002",
-                        "code": "zz21cz3c1",
-                        "name": "Blue Band"
+                        id: '1002',
+                        code: 'zz21cz3c1',
+                        name: 'Blue Band'
                     },
                     {
-                        "id": "1003",
-                        "code": "vbb124btrvbb124btr",
-                        "name": "Game Controller"
+                        id: '1003',
+                        code: 'vbb124btrvbb124btr',
+                        name: 'Game Controller'
                     },
                     {
-                        "id": "1004",
-                        "code": "nvklal433nvklal433",
-                        "name": "Black Watch"
+                        id: '1004',
+                        code: 'nvklal433nvklal433',
+                        name: 'Black Watch'
                     },
                     {
-                        "id": "1006",
-                        "code": "zz21cz3c1zz21cz3c1",
-                        "name": "Blue Band"
+                        id: '1006',
+                        code: 'zz21cz3c1zz21cz3c1',
+                        name: 'Blue Band'
                     }
                 ],
                 rowGroupMode: 'rowspan',
@@ -1353,7 +1336,6 @@ describe('DataTable.vue', () => {
         expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
     });
 
-
     // export
     it('should export table', async () => {
         const exportCSV = jest.spyOn(wrapper.vm, 'exportCSV');
@@ -1363,7 +1345,6 @@ describe('DataTable.vue', () => {
         expect(exportCSV).toHaveBeenCalled();
     });
 
-
     // state
     it('should get storage', async () => {
         await wrapper.setProps({ stateStorage: 'session', stateKey: 'dt-state-demo-session', paginator: true });
@@ -1393,10 +1374,8 @@ describe('DataTable.vue', () => {
         expect(wrapper.emitted()['state-save'][0]).not.toBeNull();
     });
 
-
     // contextmenu
 
-
     // responsive
     it('should have stack layout', () => {
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-stack');
@@ -1408,6 +1387,5 @@ describe('DataTable.vue', () => {
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-scroll');
     });
 
-
     // row styling
-});
\ No newline at end of file
+});
diff --git a/components/datatable/DataTable.vue b/components/datatable/DataTable.vue
index afe4b388f..22885afc1 100755
--- a/components/datatable/DataTable.vue
+++ b/components/datatable/DataTable.vue
@@ -1,19 +1,30 @@
 <template>
     <div :class="containerClass" data-scrollselectors=".p-datatable-wrapper">
         <slot></slot>
-        <div class="p-datatable-loading-overlay p-component-overlay" v-if="loading">
-			<slot v-if="$slots.loading" name="loading"></slot>
-			<i v-else :class="loadingIconClass"></i>
+        <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
+            <slot v-if="$slots.loading" name="loading"></slot>
+            <i v-else :class="loadingIconClass"></i>
         </div>
-        <div class="p-datatable-header" v-if="$slots.header">
+        <div v-if="$slots.header" class="p-datatable-header">
             <slot name="header"></slot>
         </div>
-        <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <DTPaginator
+            v-if="paginatorTop"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-top"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
@@ -21,59 +32,181 @@
             <DTVirtualScroller ref="virtualScroller" v-bind="virtualScrollerOptions" :items="processedData" :columns="columns" :style="{ height: scrollHeight }" :disabled="virtualScrollerDisabled" loaderDisabled :showSpacer="false">
                 <template #content="slotProps">
                     <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
-                        <DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode"
-                                :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
-                                :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
-                                @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
-                                @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
-                                @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                        <DTTableBody ref="frozenBodyRef" v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="slotProps.columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :responsiveLayout="responsiveLayout"
-                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" :isVirtualScrollerDisabled="true"  />
-                        <DTTableBody ref="bodyRef" :value="dataToRender(slotProps.rows)" :class="slotProps.styleClass" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :responsiveLayout="responsiveLayout"
-                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange"
-                            :virtualScrollerContentProps="slotProps" :isVirtualScrollerDisabled="virtualScrollerDisabled" />
+                        <DTTableHeader
+                            :columnGroup="headerColumnGroup"
+                            :columns="slotProps.columns"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :groupRowSortField="groupRowSortField"
+                            :reorderableColumns="reorderableColumns"
+                            :resizableColumns="resizableColumns"
+                            :allRowsSelected="allRowsSelected"
+                            :empty="empty"
+                            :sortMode="sortMode"
+                            :sortField="d_sortField"
+                            :sortOrder="d_sortOrder"
+                            :multiSortMeta="d_multiSortMeta"
+                            :filters="d_filters"
+                            :filtersStore="filters"
+                            :filterDisplay="filterDisplay"
+                            @column-click="onColumnHeaderClick($event)"
+                            @column-mousedown="onColumnHeaderMouseDown($event)"
+                            @filter-change="onFilterChange"
+                            @filter-apply="onFilterApply"
+                            @column-dragstart="onColumnHeaderDragStart($event)"
+                            @column-dragover="onColumnHeaderDragOver($event)"
+                            @column-dragleave="onColumnHeaderDragLeave($event)"
+                            @column-drop="onColumnHeaderDrop($event)"
+                            @column-resizestart="onColumnResizeStart($event)"
+                            @checkbox-change="toggleRowsWithCheckbox($event)"
+                        />
+                        <DTTableBody
+                            v-if="frozenValue"
+                            ref="frozenBodyRef"
+                            :value="frozenValue"
+                            :frozenRow="true"
+                            class="p-datatable-frozen-tbody"
+                            :columns="slotProps.columns"
+                            :dataKey="dataKey"
+                            :selection="selection"
+                            :selectionKeys="d_selectionKeys"
+                            :selectionMode="selectionMode"
+                            :contextMenu="contextMenu"
+                            :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :expandableRowGroups="expandableRowGroups"
+                            :rowClass="rowClass"
+                            :rowStyle="rowStyle"
+                            :editMode="editMode"
+                            :compareSelectionBy="compareSelectionBy"
+                            :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
+                            :expandedRows="expandedRows"
+                            :expandedRowKeys="d_expandedRowKeys"
+                            :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows"
+                            :editingRowKeys="d_editingRowKeys"
+                            :templates="$slots"
+                            :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup"
+                            @row-click="onRowClick($event)"
+                            @row-dblclick="onRowDblClick($event)"
+                            @row-rightclick="onRowRightClick($event)"
+                            @row-touchend="onRowTouchEnd"
+                            @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown"
+                            @row-dragstart="onRowDragStart($event)"
+                            @row-dragover="onRowDragOver($event)"
+                            @row-dragleave="onRowDragLeave($event)"
+                            @row-dragend="onRowDragEnd($event)"
+                            @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)"
+                            @radio-change="toggleRowWithRadio($event)"
+                            @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :isVirtualScrollerDisabled="true"
+                        />
+                        <DTTableBody
+                            ref="bodyRef"
+                            :value="dataToRender(slotProps.rows)"
+                            :class="slotProps.styleClass"
+                            :columns="slotProps.columns"
+                            :empty="empty"
+                            :dataKey="dataKey"
+                            :selection="selection"
+                            :selectionKeys="d_selectionKeys"
+                            :selectionMode="selectionMode"
+                            :contextMenu="contextMenu"
+                            :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :expandableRowGroups="expandableRowGroups"
+                            :rowClass="rowClass"
+                            :rowStyle="rowStyle"
+                            :editMode="editMode"
+                            :compareSelectionBy="compareSelectionBy"
+                            :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
+                            :expandedRows="expandedRows"
+                            :expandedRowKeys="d_expandedRowKeys"
+                            :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows"
+                            :editingRowKeys="d_editingRowKeys"
+                            :templates="$slots"
+                            :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup"
+                            @row-click="onRowClick($event)"
+                            @row-dblclick="onRowDblClick($event)"
+                            @row-rightclick="onRowRightClick($event)"
+                            @row-touchend="onRowTouchEnd"
+                            @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown"
+                            @row-dragstart="onRowDragStart($event)"
+                            @row-dragover="onRowDragOver($event)"
+                            @row-dragleave="onRowDragLeave($event)"
+                            @row-dragend="onRowDragEnd($event)"
+                            @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)"
+                            @radio-change="toggleRowWithRadio($event)"
+                            @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :virtualScrollerContentProps="slotProps"
+                            :isVirtualScrollerDisabled="virtualScrollerDisabled"
+                        />
                         <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
                     </table>
                 </template>
             </DTVirtualScroller>
         </div>
-        <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <DTPaginator
+            v-if="paginatorBottom"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-bottom"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-footer" v-if="$slots.footer">
+        <div v-if="$slots.footer" class="p-datatable-footer">
             <slot name="footer"></slot>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none"></div>
-        <span ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-if="reorderableColumns" />
-        <span ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-if="reorderableColumns" />
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" />
+        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" />
     </div>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler,UniqueComponentId} from 'primevue/utils';
-import {FilterMatchMode,FilterOperator,FilterService} from 'primevue/api';
+import { ObjectUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
+import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
 import Paginator from 'primevue/paginator';
 import VirtualScroller from 'primevue/virtualscroller';
 import TableHeader from './TableHeader.vue';
@@ -82,11 +215,46 @@ import TableFooter from './TableFooter.vue';
 
 export default {
     name: 'DataTable',
-    emits: ['value-change', 'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick',
-        'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'select-all-change',
-        'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
-        'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save',
-        'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
+    emits: [
+        'value-change',
+        'update:first',
+        'update:rows',
+        'page',
+        'update:sortField',
+        'update:sortOrder',
+        'update:multiSortMeta',
+        'sort',
+        'filter',
+        'row-click',
+        'row-dblclick',
+        'update:selection',
+        'row-select',
+        'row-unselect',
+        'update:contextMenuSelection',
+        'row-contextmenu',
+        'row-unselect-all',
+        'row-select-all',
+        'select-all-change',
+        'column-resize-end',
+        'column-reorder',
+        'row-reorder',
+        'update:expandedRows',
+        'row-collapse',
+        'row-expand',
+        'update:expandedRowGroups',
+        'rowgroup-collapse',
+        'rowgroup-expand',
+        'update:filters',
+        'state-restore',
+        'state-save',
+        'cell-edit-init',
+        'cell-edit-complete',
+        'cell-edit-cancel',
+        'update:editingRows',
+        'row-edit-init',
+        'row-edit-save',
+        'row-edit-cancel'
+    ],
     props: {
         value: {
             type: Array,
@@ -189,7 +357,7 @@ export default {
             default: undefined
         },
         selection: {
-            type: [Array,Object],
+            type: [Array, Object],
             default: null
         },
         selectionMode: {
@@ -265,7 +433,7 @@ export default {
             default: null
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         expandableRowGroups: {
@@ -306,7 +474,7 @@ export default {
         },
         scrollDirection: {
             type: String,
-            default: "vertical"
+            default: 'vertical'
         },
         virtualScrollerOptions: {
             type: Object,
@@ -414,7 +582,7 @@ export default {
         },
         filters: {
             deep: true,
-            handler: function(newValue) {
+            handler: function (newValue) {
                 this.d_filters = this.cloneFilters(newValue);
             }
         }
@@ -464,6 +632,7 @@ export default {
             this.d_rows = event.rows;
 
             let pageEvent = this.createLazyLoadEvent(event);
+
             pageEvent.pageCount = event.pageCount;
             pageEvent.page = event.page;
 
@@ -480,21 +649,24 @@ export default {
                 const targetNode = event.target;
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content')
-                    || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
+                if (
+                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
+                    DomHandler.hasClass(targetNode, 'p-column-title') ||
+                    DomHandler.hasClass(targetNode, 'p-column-header-content') ||
+                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
+                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                ) {
                     DomHandler.clearSelection();
 
                     if (this.sortMode === 'single') {
                         if (this.d_sortField === columnField) {
-                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
+                            if (this.removableSort && this.d_sortOrder * -1 === this.defaultSortOrder) {
                                 this.d_sortOrder = null;
                                 this.d_sortField = null;
-                            }
-                            else {
+                            } else {
                                 this.d_sortOrder = this.d_sortOrder * -1;
                             }
-                        }
-                        else {
+                        } else {
                             this.d_sortOrder = this.defaultSortOrder;
                             this.d_sortField = columnField;
                         }
@@ -502,11 +674,11 @@ export default {
                         this.$emit('update:sortField', this.d_sortField);
                         this.$emit('update:sortOrder', this.d_sortOrder);
                         this.resetPage();
-                    }
-                    else if (this.sortMode === 'multiple') {
+                    } else if (this.sortMode === 'multiple') {
                         let metaKey = event.metaKey || event.ctrlKey;
+
                         if (!metaKey) {
-                            this.d_multiSortMeta =  this.d_multiSortMeta.filter(meta => meta.field === columnField);
+                            this.d_multiSortMeta = this.d_multiSortMeta.filter((meta) => meta.field === columnField);
                         }
 
                         this.addMultiSortField(columnField);
@@ -523,8 +695,8 @@ export default {
 
             if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
                 this.d_multiSortMeta = [
-                    {field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
-                    {field: this.d_sortField, order: this.d_sortOrder}
+                    { field: this.sortField, order: this.sortOrder || this.defaultSortOrder },
+                    { field: this.d_sortField, order: this.d_sortOrder }
                 ];
 
                 return this.sortMultiple(value);
@@ -538,18 +710,13 @@ export default {
 
                 let result = null;
 
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                if (value1 == null && value2 != null) result = -1;
+                else if (value1 != null && value2 == null) result = 1;
+                else if (value1 == null && value2 == null) result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
-                return (this.d_sortOrder * result);
+                return this.d_sortOrder * result;
             });
 
             return data;
@@ -559,6 +726,7 @@ export default {
 
             if (this.groupRowsBy && (this.d_groupRowsSortMeta || (this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field))) {
                 const firstSortMeta = this.d_multiSortMeta[0];
+
                 !this.d_groupRowsSortMeta && (this.d_groupRowsSortMeta = firstSortMeta);
 
                 if (firstSortMeta.field !== this.d_groupRowsSortMeta.field) {
@@ -580,31 +748,27 @@ export default {
             let result = null;
 
             if (typeof value1 === 'string' || value1 instanceof String) {
-                if (value1.localeCompare && (value1 !== value2)) {
-                    return (this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
+                if (value1.localeCompare && value1 !== value2) {
+                    return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
                 }
-            }
-            else {
-                result = (value1 < value2) ? -1 : 1;
+            } else {
+                result = value1 < value2 ? -1 : 1;
             }
 
-            if (value1 === value2)  {
-                return (this.d_multiSortMeta.length - 1) > (index) ? (this.multisortField(data1, data2, index + 1)) : 0;
+            if (value1 === value2) {
+                return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0;
             }
 
-            return (this.d_multiSortMeta[index].order * result);
+            return this.d_multiSortMeta[index].order * result;
         },
         addMultiSortField(field) {
-            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
+            let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);
 
             if (index >= 0) {
-                if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
-                    this.d_multiSortMeta.splice(index, 1);
-                else
-                    this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
-            }
-            else {
-                this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
+                if (this.removableSort && this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder) this.d_multiSortMeta.splice(index, 1);
+                else this.d_multiSortMeta[index] = { field: field, order: this.d_multiSortMeta[index].order * -1 };
+            } else {
+                this.d_multiSortMeta.push({ field: field, order: this.defaultSortOrder });
             }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
@@ -617,8 +781,9 @@ export default {
             this.clearEditingMetaData();
 
             let globalFilterFieldsArray;
+
             if (this.filters['global']) {
-                globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
+                globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
             }
 
             let filteredValue = [];
@@ -642,8 +807,7 @@ export default {
                                     break;
                                 }
                             }
-                        }
-                        else {
+                        } else {
                             localMatch = this.executeLocalFilter(filterField, data[i], filterMeta);
                         }
 
@@ -654,8 +818,9 @@ export default {
                 }
 
                 if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
-                    for(let j = 0; j < globalFilterFieldsArray.length; j++) {
+                    for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                         let globalFilterField = globalFilterFieldsArray[j];
+
                         globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
 
                         if (globalMatch) {
@@ -665,10 +830,10 @@ export default {
                 }
 
                 let matches;
+
                 if (this.filters['global']) {
-                    matches = localFiltered ? (localFiltered && localMatch && globalMatch) : globalMatch;
-                }
-                else {
+                    matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
+                } else {
                     matches = localFiltered && localMatch;
                 }
 
@@ -682,6 +847,7 @@ export default {
             }
 
             let filterEvent = this.createLazyLoadEvent();
+
             filterEvent.filteredValue = filteredValue;
             this.$emit('filter', filterEvent);
             this.$emit('value-change', filteredValue);
@@ -698,6 +864,7 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
+
             if (DomHandler.isClickable(event.target)) {
                 return;
             }
@@ -712,10 +879,10 @@ export default {
                     DomHandler.clearSelection();
                     this.rangeRowIndex = rowIndex;
                     this.selectRange(event);
-                }
-                else {
+                } else {
                     const selected = this.isSelected(rowData);
                     const metaSelection = this.rowTouched ? false : this.metaKeySelection;
+
                     this.anchorRowIndex = rowIndex;
                     this.rangeRowIndex = rowIndex;
 
@@ -723,52 +890,49 @@ export default {
                         let metaKey = event.metaKey || event.ctrlKey;
 
                         if (selected && metaKey) {
-                            if(this.isSingleSelectionMode()) {
+                            if (this.isSingleSelectionMode()) {
                                 this.$emit('update:selection', null);
-                            }
-                            else {
+                            } else {
                                 const selectionIndex = this.findIndexInSelection(rowData);
-                                const _selection = this.selection.filter((val,i) => i != selectionIndex);
+                                const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                        }
-                        else {
-                            if(this.isSingleSelectionMode()) {
+                            this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                        } else {
+                            if (this.isSingleSelectionMode()) {
                                 this.$emit('update:selection', rowData);
-                            }
-                            else if (this.isMultipleSelectionMode()) {
-                                let _selection = metaKey ? (this.selection || []) : [];
+                            } else if (this.isMultipleSelectionMode()) {
+                                let _selection = metaKey ? this.selection || [] : [];
+
                                 _selection = [..._selection, rowData];
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                            this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                         }
-                    }
-                    else {
+                    } else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                            }
-                            else {
+                                this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                            } else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                                this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                             }
-                        }
-                        else if (this.selectionMode === 'multiple') {
+                        } else if (this.selectionMode === 'multiple') {
                             if (selected) {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                            }
-                            else {
+                                this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                            } else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
+
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                                this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                             }
                         }
                     }
@@ -779,6 +943,7 @@ export default {
         },
         onRowDblClick(e) {
             const event = e.originalEvent;
+
             if (DomHandler.isClickable(event.target)) {
                 return;
             }
@@ -807,55 +972,53 @@ export default {
                     //down arrow
                     case 40:
                         var nextRow = this.findNextSelectableRow(row);
+
                         if (nextRow) {
                             nextRow.focus();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //up arrow
                     case 38:
                         var prevRow = this.findPrevSelectableRow(row);
+
                         if (prevRow) {
                             prevRow.focus();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //enter
                     case 13:
-                        this.onRowClick({originalEvent: event, data: rowData, index: rowIndex});
-                    break;
+                        this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
+                        break;
 
                     default:
                         //no op
-                    break;
+                        break;
                 }
             }
         },
         findNextSelectableRow(row) {
             let nextRow = row.nextElementSibling;
+
             if (nextRow) {
-                if (DomHandler.hasClass(nextRow, 'p-selectable-row'))
-                    return nextRow;
-                else
-                    return this.findNextSelectableRow(nextRow);
-            }
-            else {
+                if (DomHandler.hasClass(nextRow, 'p-selectable-row')) return nextRow;
+                else return this.findNextSelectableRow(nextRow);
+            } else {
                 return null;
             }
         },
         findPrevSelectableRow(row) {
             let prevRow = row.previousElementSibling;
+
             if (prevRow) {
-                if (DomHandler.hasClass(prevRow, 'p-selectable-row'))
-                    return prevRow;
-                else
-                    return this.findPrevSelectableRow(prevRow);
-            }
-            else {
+                if (DomHandler.hasClass(prevRow, 'p-selectable-row')) return prevRow;
+                else return this.findPrevSelectableRow(prevRow);
+            } else {
                 return null;
             }
         },
@@ -865,8 +1028,7 @@ export default {
             if (this.isSelected(rowData)) {
                 this.$emit('update:selection', null);
                 this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
-            }
-            else {
+            } else {
                 this.$emit('update:selection', rowData);
                 this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
@@ -877,11 +1039,12 @@ export default {
             if (this.isSelected(rowData)) {
                 const selectionIndex = this.findIndexInSelection(rowData);
                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                 this.$emit('update:selection', _selection);
                 this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
-            }
-            else {
+            } else {
                 let _selection = this.selection ? [...this.selection] : [];
+
                 _selection = [..._selection, rowData];
                 this.$emit('update:selection', _selection);
                 this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
@@ -890,21 +1053,18 @@ export default {
         toggleRowsWithCheckbox(event) {
             if (this.selectAll !== null) {
                 this.$emit('select-all-change', event);
-            }
-            else {
+            } else {
                 const { originalEvent, checked } = event;
                 let _selection = [];
 
                 if (checked) {
                     _selection = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
-                    this.$emit('row-select-all', {originalEvent, data: _selection});
-                }
-                else {
-                    this.$emit('row-unselect-all', {originalEvent});
+                    this.$emit('row-select-all', { originalEvent, data: _selection });
+                } else {
+                    this.$emit('row-unselect-all', { originalEvent });
                 }
 
                 this.$emit('update:selection', _selection);
-
             }
         },
         isSingleSelectionMode() {
@@ -917,12 +1077,9 @@ export default {
             if (rowData && this.selection) {
                 if (this.dataKey) {
                     return this.d_selectionKeys ? this.d_selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                }
-                else {
-                    if (this.selection instanceof Array)
-                        return this.findIndexInSelection(rowData) > -1;
-                    else
-                        return this.equals(rowData, this.selection);
+                } else {
+                    if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
+                    else return this.equals(rowData, this.selection);
                 }
             }
 
@@ -933,6 +1090,7 @@ export default {
         },
         findIndex(rowData, collection) {
             let index = -1;
+
             if (collection && collection.length) {
                 for (let i = 0; i < collection.length; i++) {
                     if (this.equals(rowData, collection[i])) {
@@ -946,39 +1104,39 @@ export default {
         },
         updateSelectionKeys(selection) {
             this.d_selectionKeys = {};
+
             if (Array.isArray(selection)) {
                 for (let data of selection) {
                     this.d_selectionKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
             }
         },
         updateExpandedRowKeys(expandedRows) {
             if (expandedRows && expandedRows.length) {
                 this.d_expandedRowKeys = {};
+
                 for (let data of expandedRows) {
                     this.d_expandedRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_expandedRowKeys = null;
             }
         },
         updateEditingRowKeys(editingRows) {
             if (editingRows && editingRows.length) {
                 this.d_editingRowKeys = {};
+
                 for (let data of editingRows) {
                     this.d_editingRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_editingRowKeys = null;
             }
         },
         equals(data1, data2) {
-            return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
+            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
         },
         selectRange(event) {
             let rangeStart, rangeEnd;
@@ -986,12 +1144,10 @@ export default {
             if (this.rangeRowIndex > this.anchorRowIndex) {
                 rangeStart = this.anchorRowIndex;
                 rangeEnd = this.rangeRowIndex;
-            }
-            else if(this.rangeRowIndex < this.anchorRowIndex) {
+            } else if (this.rangeRowIndex < this.anchorRowIndex) {
                 rangeStart = this.rangeRowIndex;
                 rangeEnd = this.anchorRowIndex;
-            }
-            else {
+            } else {
                 rangeStart = this.rangeRowIndex;
                 rangeEnd = this.rangeRowIndex;
             }
@@ -1003,10 +1159,12 @@ export default {
 
             const value = this.processedData;
             let _selection = [];
-            for(let i = rangeStart; i <= rangeEnd; i++) {
+
+            for (let i = rangeStart; i <= rangeEnd; i++) {
                 let rangeRowData = value[i];
+
                 _selection.push(rangeRowData);
-                this.$emit('row-select', {originalEvent: event, data: rangeRowData, type: 'row'});
+                this.$emit('row-select', { originalEvent: event, data: rangeRowData, type: 'row' });
             }
 
             this.$emit('update:selection', _selection);
@@ -1017,22 +1175,19 @@ export default {
             if (!data) {
                 data = this.processedData;
 
-                if (options && options.selectionOnly)
-                    data = this.selection || [];
-                else if (this.frozenValue)
-                    data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+                if (options && options.selectionOnly) data = this.selection || [];
+                else if (this.frozenValue) data = data ? [...this.frozenValue, ...data] : this.frozenValue;
             }
 
             //headers
             let headerInitiated = false;
+
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
 
                 if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                    if (headerInitiated)
-                        csv += this.csvSeparator;
-                    else
-                        headerInitiated = true;
+                    if (headerInitiated) csv += this.csvSeparator;
+                    else headerInitiated = true;
 
                     csv += '"' + (this.columnProp(column, 'exportHeader') || this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
@@ -1040,16 +1195,16 @@ export default {
 
             //body
             if (data) {
-                data.forEach(record => {
+                data.forEach((record) => {
                     csv += '\n';
                     let rowInitiated = false;
+
                     for (let i = 0; i < this.columns.length; i++) {
                         let column = this.columns[i];
+
                         if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                            if (rowInitiated)
-                                csv += this.csvSeparator;
-                            else
-                                rowInitiated = true;
+                            if (rowInitiated) csv += this.csvSeparator;
+                            else rowInitiated = true;
 
                             let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field'));
 
@@ -1059,12 +1214,8 @@ export default {
                                         data: cellData,
                                         field: this.columnProp(column, 'field')
                                     });
-                                }
-                                else
-                                    cellData = String(cellData).replace(/"/g, '""');
-                            }
-                            else
-                                cellData = '';
+                                } else cellData = String(cellData).replace(/"/g, '""');
+                            } else cellData = '';
 
                             csv += '"' + cellData + '"';
                         }
@@ -1072,19 +1223,17 @@ export default {
                 });
             }
 
-
             //footers
             let footerInitiated = false;
+
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
 
                 if (i === 0) csv += '\n';
 
                 if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                    if (footerInitiated)
-                        csv += this.csvSeparator;
-                    else
-                        footerInitiated = true;
+                    if (footerInitiated) csv += this.csvSeparator;
+                    else footerInitiated = true;
 
                     csv += '"' + (this.columnProp(column, 'exportFooter') || this.columnProp(column, 'footer') || this.columnProp(column, 'field')) + '"';
                 }
@@ -1098,18 +1247,20 @@ export default {
         },
         onColumnResizeStart(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             this.resizeColumnElement = event.target.parentElement;
             this.columnResizing = true;
-            this.lastResizeHelperX = (event.pageX - containerLeft + this.$el.scrollLeft);
+            this.lastResizeHelperX = event.pageX - containerLeft + this.$el.scrollLeft;
 
             this.bindColumnResizeEvents();
         },
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             DomHandler.addClass(this.$el, 'p-unselectable-text');
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
-            this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
+            this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
 
             this.$refs.resizeHelper.style.display = 'block';
         },
@@ -1117,7 +1268,7 @@ export default {
             let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
-            let minWidth = this.resizeColumnElement.style.minWidth||15;
+            let minWidth = this.resizeColumnElement.style.minWidth || 15;
 
             if (columnWidth + delta > parseInt(minWidth, 10)) {
                 if (this.columnResizeMode === 'fit') {
@@ -1127,12 +1278,12 @@ export default {
                     if (newColumnWidth > 15 && nextColumnWidth > 15) {
                         this.resizeTableCells(newColumnWidth, nextColumnWidth);
                     }
-                }
-                else if (this.columnResizeMode === 'expand') {
+                } else if (this.columnResizeMode === 'expand') {
                     const tableWidth = this.$refs.table.offsetWidth + delta + 'px';
+
                     const updateTableWidth = (el) => {
                         !!el && (el.style.width = el.style.minWidth = tableWidth);
-                    }
+                    };
 
                     updateTableWidth(this.$refs.table);
 
@@ -1167,22 +1318,25 @@ export default {
             let colIndex = DomHandler.index(this.resizeColumnElement);
             let widths = [];
             let headers = DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
-            headers.forEach(header => widths.push(DomHandler.getOuterWidth(header)));
+
+            headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
 
             this.destroyStyleElement();
             this.createStyleElement();
 
             let innerHTML = '';
+
             widths.forEach((width, index) => {
-                let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width;
+                let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
                 let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
+
                 innerHTML += `
                     .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
                     .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
                     .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
-                `
+                `;
             });
 
             this.styleElement.innerHTML = innerHTML;
@@ -1190,7 +1344,7 @@ export default {
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.onColumnResize(event);
                     }
                 });
@@ -1198,13 +1352,12 @@ export default {
 
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.columnResizing = false;
                         this.onColumnResizeEnd();
                     }
                 });
             }
-
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
@@ -1222,15 +1375,14 @@ export default {
             const column = e.column;
 
             if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
-                if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
-                    event.currentTarget.draggable = false;
-                else
-                    event.currentTarget.draggable = true;
+                if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;
+                else event.currentTarget.draggable = true;
             }
         },
         onColumnHeaderDragStart(event) {
             if (this.columnResizing) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -1242,26 +1394,26 @@ export default {
         },
         onColumnHeaderDragOver(event) {
             let dropHeader = this.findParentHeader(event.target);
-            if(this.reorderableColumns && this.draggedColumn && dropHeader) {
+
+            if (this.reorderableColumns && this.draggedColumn && dropHeader) {
                 event.preventDefault();
                 let containerOffset = DomHandler.getOffset(this.$el);
                 let dropHeaderOffset = DomHandler.getOffset(dropHeader);
 
                 if (this.draggedColumn !== dropHeader) {
-                    let targetLeft =  dropHeaderOffset.left - containerOffset.left;
+                    let targetLeft = dropHeaderOffset.left - containerOffset.left;
                     let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
 
                     this.$refs.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
                     this.$refs.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
 
-                    if(event.pageX > columnCenter) {
-                        this.$refs.reorderIndicatorUp.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
-                        this.$refs.reorderIndicatorDown.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
+                    if (event.pageX > columnCenter) {
+                        this.$refs.reorderIndicatorUp.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
+                        this.$refs.reorderIndicatorDown.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
                         this.dropPosition = 1;
-                    }
-                    else {
-                        this.$refs.reorderIndicatorUp.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
-                        this.$refs.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
+                    } else {
+                        this.$refs.reorderIndicatorUp.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
+                        this.$refs.reorderIndicatorDown.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
                         this.dropPosition = -1;
                     }
 
@@ -1271,7 +1423,7 @@ export default {
             }
         },
         onColumnHeaderDragLeave(event) {
-            if(this.reorderableColumns && this.draggedColumn) {
+            if (this.reorderableColumns && this.draggedColumn) {
                 event.preventDefault();
                 this.$refs.reorderIndicatorUp.style.display = 'none';
                 this.$refs.reorderIndicatorDown.style.display = 'none';
@@ -1279,10 +1431,12 @@ export default {
         },
         onColumnHeaderDrop(event) {
             event.preventDefault();
+
             if (this.draggedColumn) {
                 let dragIndex = DomHandler.index(this.draggedColumn);
                 let dropIndex = DomHandler.index(this.findParentHeader(event.target));
-                let allowDrop = (dragIndex !== dropIndex);
+                let allowDrop = dragIndex !== dropIndex;
+
                 if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dropIndex - dragIndex === -1 && this.dropPosition === 1))) {
                     allowDrop = false;
                 }
@@ -1306,15 +1460,16 @@ export default {
             }
         },
         findParentHeader(element) {
-            if(element.nodeName === 'TH') {
+            if (element.nodeName === 'TH') {
                 return element;
-            }
-            else {
+            } else {
                 let parent = element.parentElement;
-                while(parent.nodeName !== 'TH') {
+
+                while (parent.nodeName !== 'TH') {
                     parent = parent.parentElement;
                     if (!parent) break;
                 }
+
                 return parent;
             }
         },
@@ -1322,6 +1477,7 @@ export default {
             if (columns && columns.length) {
                 for (let i = 0; i < columns.length; i++) {
                     let column = columns[i];
+
                     if (this.columnProp(column, 'columnKey') === key || this.columnProp(column, 'field') === key) {
                         return column;
                     }
@@ -1331,17 +1487,16 @@ export default {
             return null;
         },
         onRowMouseDown(event) {
-            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle'))
-                event.currentTarget.draggable = true;
-            else
-                event.currentTarget.draggable = false;
+            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;
+            else event.currentTarget.draggable = false;
         },
         onRowDragStart(e) {
             const event = e.originalEvent;
             const index = e.index;
+
             this.rowDragging = true;
             this.draggedRowIndex = index;
-            event.dataTransfer.setData('text', 'b');    // For firefox
+            event.dataTransfer.setData('text', 'b'); // For firefox
         },
         onRowDragOver(e) {
             const event = e.originalEvent;
@@ -1358,16 +1513,11 @@ export default {
                     DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
 
                     this.droppedRowIndex = index;
-                    if (prevRowElement)
-                        DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                    else
-                        DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
-                }
-                else {
-                    if (prevRowElement)
-                        DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                    else
-                        DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                } else {
+                    if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
 
                     this.droppedRowIndex = index + 1;
                     DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
@@ -1379,6 +1529,7 @@ export default {
         onRowDragLeave(event) {
             let rowElement = event.currentTarget;
             let prevRowElement = rowElement.previousElementSibling;
+
             if (prevRowElement) {
                 DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
             }
@@ -1394,8 +1545,9 @@ export default {
         },
         onRowDrop(event) {
             if (this.droppedRowIndex != null) {
-                let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
+                let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;
                 let processedData = [...this.processedData];
+
                 ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
 
                 this.$emit('row-reorder', {
@@ -1419,8 +1571,7 @@ export default {
 
             if (this.dataKey) {
                 expanded = this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-            }
-            else {
+            } else {
                 expandedRowIndex = this.findIndex(rowData, this.expandedRows);
                 expanded = expandedRowIndex > -1;
             }
@@ -1429,11 +1580,11 @@ export default {
                 if (expandedRowIndex == null) {
                     expandedRowIndex = this.findIndex(rowData, this.expandedRows);
                 }
+
                 _expandedRows.splice(expandedRowIndex, 1);
                 this.$emit('update:expandedRows', _expandedRows);
                 this.$emit('row-collapse', event);
-            }
-            else {
+            } else {
                 _expandedRows.push(rowData);
                 this.$emit('update:expandedRows', _expandedRows);
                 this.$emit('row-expand', event);
@@ -1446,28 +1597,29 @@ export default {
             let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
 
             if (this.isRowGroupExpanded(data)) {
-                _expandedRowGroups = _expandedRowGroups.filter(group => group !== groupFieldValue);
+                _expandedRowGroups = _expandedRowGroups.filter((group) => group !== groupFieldValue);
                 this.$emit('update:expandedRowGroups', _expandedRowGroups);
-                this.$emit('rowgroup-collapse', {originalEvent: event, data: groupFieldValue});
-            }
-            else {
+                this.$emit('rowgroup-collapse', { originalEvent: event, data: groupFieldValue });
+            } else {
                 _expandedRowGroups.push(groupFieldValue);
                 this.$emit('update:expandedRowGroups', _expandedRowGroups);
-                this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
+                this.$emit('rowgroup-expand', { originalEvent: event, data: groupFieldValue });
             }
         },
         isRowGroupExpanded(rowData) {
             if (this.expandableRowGroups && this.expandedRowGroups) {
                 let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+
                 return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
             }
+
             return false;
         },
         isStateful() {
             return this.stateKey != null;
         },
         getStorage() {
-            switch(this.stateStorage) {
+            switch (this.stateStorage) {
                 case 'local':
                     return window.localStorage;
 
@@ -1532,13 +1684,14 @@ export default {
             const storage = this.getStorage();
             const stateString = storage.getItem(this.stateKey);
             const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
-            const reviver = function(key, value) {
-                if (typeof value === "string" && dateFormat.test(value)) {
+
+            const reviver = function (key, value) {
+                if (typeof value === 'string' && dateFormat.test(value)) {
                     return new Date(value);
                 }
 
                 return value;
-            }
+            };
 
             if (stateString) {
                 let restoredState = JSON.parse(stateString, reviver);
@@ -1590,7 +1743,8 @@ export default {
         saveColumnWidths(state) {
             let widths = [];
             let headers = DomHandler.find(this.$el, '.p-datatable-thead > tr > th');
-            headers.forEach(header => widths.push(DomHandler.getOuterWidth(header)));
+
+            headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
             state.columnWidths = widths.join(',');
 
             if (this.columnResizeMode === 'expand') {
@@ -1611,15 +1765,17 @@ export default {
                     this.createStyleElement();
 
                     let innerHTML = '';
+
                     widths.forEach((width, index) => {
                         let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
+
                         innerHTML += `
                             .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
                             .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
                             .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
-                        `
+                        `;
                     });
 
                     this.styleElement.innerHTML = innerHTML;
@@ -1637,18 +1793,21 @@ export default {
         },
         onRowEditInit(event) {
             let _editingRows = this.editingRows ? [...this.editingRows] : [];
+
             _editingRows.push(event.data);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-init', event);
         },
         onRowEditSave(event) {
             let _editingRows = [...this.editingRows];
+
             _editingRows.splice(this.findIndex(event.data, _editingRows), 1);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-save', event);
         },
         onRowEditCancel(event) {
             let _editingRows = [...this.editingRows];
+
             _editingRows.splice(this.findIndex(event.data, _editingRows), 1);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-cancel', event);
@@ -1661,10 +1820,10 @@ export default {
             if (editing) {
                 !meta && (meta = editingMeta[index] = { data: { ...data }, fields: [] });
                 meta['fields'].push(field);
-            }
-            else if (meta) {
-                const fields = meta['fields'].filter(f => f !== field);
-                !fields.length ? (delete editingMeta[index]) : (meta['fields'] = fields);
+            } else if (meta) {
+                const fields = meta['fields'].filter((f) => f !== field);
+
+                !fields.length ? delete editingMeta[index] : (meta['fields'] = fields);
             }
 
             this.d_editingMeta = editingMeta;
@@ -1705,9 +1864,17 @@ export default {
         },
         cloneFilters() {
             let cloned = {};
+
             if (this.filters) {
-                Object.entries(this.filters).forEach(([prop,value]) => {
-                    cloned[prop] = value.operator ? {operator: value.operator, constraints: value.constraints.map(constraint => {return {...constraint}})} : {...value};
+                Object.entries(this.filters).forEach(([prop, value]) => {
+                    cloned[prop] = value.operator
+                        ? {
+                              operator: value.operator,
+                              constraints: value.constraints.map((constraint) => {
+                                  return { ...constraint };
+                              })
+                          }
+                        : { ...value };
                 });
             }
 
@@ -1715,7 +1882,8 @@ export default {
         },
         updateReorderableColumns() {
             let columnOrder = [];
-            this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
+
+            this.columns.forEach((col) => columnOrder.push(this.columnProp(col, 'columnKey') || this.columnProp(col, 'field')));
             this.d_columnOrder = columnOrder;
         },
         createStyleElement() {
@@ -1724,10 +1892,10 @@ export default {
             document.head.appendChild(this.styleElement);
         },
         createResponsiveStyle() {
-			if (!this.responsiveStyleElement) {
-				this.responsiveStyleElement = document.createElement('style');
-				this.responsiveStyleElement.type = 'text/css';
-				document.head.appendChild(this.responsiveStyleElement);
+            if (!this.responsiveStyleElement) {
+                this.responsiveStyleElement = document.createElement('style');
+                this.responsiveStyleElement.type = 'text/css';
+                document.head.appendChild(this.responsiveStyleElement);
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -1760,8 +1928,8 @@ export default {
 `;
 
                 this.responsiveStyleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyResponsiveStyle() {
             if (this.responsiveStyleElement) {
                 document.head.removeChild(this.responsiveStyleElement);
@@ -1778,6 +1946,7 @@ export default {
             if (!results) {
                 results = [];
             }
+
             if (children && children.length) {
                 children.forEach((child) => {
                     if (child.children instanceof Array) {
@@ -1787,6 +1956,7 @@ export default {
                     }
                 });
             }
+
             return results;
         },
         dataToRender(data) {
@@ -1794,6 +1964,7 @@ export default {
 
             if (_data && this.paginator) {
                 const first = this.lazy ? 0 : this.d_first;
+
                 return _data.slice(first, first + this.d_rows);
             }
 
@@ -1806,8 +1977,9 @@ export default {
     computed: {
         containerClass() {
             return [
-                'p-datatable p-component', {
-                    'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode),
+                'p-datatable p-component',
+                {
+                    'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
                     'p-datatable-auto-layout': this.autoLayout,
                     'p-datatable-resizable': this.resizableColumns,
                     'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
@@ -1815,7 +1987,7 @@ export default {
                     'p-datatable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
                     'p-datatable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
                     'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                    'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
+                    'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
                     'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
                     'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
                     'p-datatable-striped': this.stripedRows,
@@ -1836,8 +2008,10 @@ export default {
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];
+
                 for (let columnKey of this.d_columnOrder) {
                     let column = this.findColumnByKey(cols, columnKey);
+
                     if (column && !this.columnProp(column, 'hidden')) {
                         orderedColumns.push(column);
                     }
@@ -1850,6 +2024,7 @@ export default {
         },
         headerColumnGroup() {
             const children = this.getChildren();
+
             if (children) {
                 for (let child of children) {
                     if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
@@ -1862,6 +2037,7 @@ export default {
         },
         footerColumnGroup() {
             const children = this.getChildren();
+
             if (children) {
                 for (let child of children) {
                     if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
@@ -1885,10 +2061,8 @@ export default {
                     }
 
                     if (this.sorted) {
-                        if(this.sortMode === 'single')
-                            data = this.sortSingle(data);
-                        else if(this.sortMode === 'multiple')
-                            data = this.sortMultiple(data);
+                        if (this.sortMode === 'single') data = this.sortSingle(data);
+                        else if (this.sortMode === 'multiple') data = this.sortMultiple(data);
                     }
                 }
             }
@@ -1898,15 +2072,16 @@ export default {
         totalRecordsLength() {
             if (this.lazy) {
                 return this.totalRecords;
-            }
-            else {
+            } else {
                 const data = this.processedData;
+
                 return data ? data.length : 0;
             }
         },
         empty() {
             const data = this.processedData;
-            return (!data || data.length === 0);
+
+            return !data || data.length === 0;
         },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
@@ -1923,30 +2098,30 @@ export default {
         allRowsSelected() {
             if (this.selectAll !== null) {
                 return this.selectAll;
-            }
-            else {
+            } else {
                 const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
-                return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every(v => this.selection.some(s => this.equals(s, v)));
+
+                return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every((v) => this.selection.some((s) => this.equals(s, v)));
             }
         },
         attributeSelector() {
             return UniqueComponentId();
         },
         groupRowSortField() {
-            return this.sortMode === 'single' ? this.sortField : (this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null);
+            return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },
         virtualScrollerDisabled() {
             return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }
     },
     components: {
-        'DTPaginator': Paginator,
-        'DTTableHeader': TableHeader,
-        'DTTableBody': TableBody,
-        'DTTableFooter': TableFooter,
-        'DTVirtualScroller': VirtualScroller
+        DTPaginator: Paginator,
+        DTTableHeader: TableHeader,
+        DTTableBody: TableBody,
+        DTTableFooter: TableFooter,
+        DTVirtualScroller: VirtualScroller
     }
-}
+};
 </script>
 
 <style>
@@ -2047,8 +2222,7 @@ export default {
 .p-datatable-scrollable-both .p-datatable-thead > tr > th,
 .p-datatable-scrollable-both .p-datatable-tbody > tr > td,
 .p-datatable-scrollable-both .p-datatable-tfoot > tr > td,
-.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th
-.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
+.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
 .p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {
     flex: 1 0 auto;
 }
@@ -2120,10 +2294,10 @@ export default {
     top: 0;
     right: 0;
     margin: 0;
-    width: .5rem;
+    width: 0.5rem;
     height: 100%;
     padding: 0px;
-    cursor:col-resize;
+    cursor: col-resize;
     border: 1px solid transparent;
 }
 
diff --git a/components/datatable/FooterCell.vue b/components/datatable/FooterCell.vue
index 614a7f7c9..2261c52cc 100644
--- a/components/datatable/FooterCell.vue
+++ b/components/datatable/FooterCell.vue
@@ -1,13 +1,12 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell"
-        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
-        <component :is="column.children.footer" :column="column" v-if="column.children && column.children.footer"/>
-        {{columnProp('footer')}}
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
+        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
+        {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -20,7 +19,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -39,20 +38,24 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -60,16 +63,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('footerClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('footerClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         }
     }
-}
+};
 </script>
diff --git a/components/datatable/HeaderCell.vue b/components/datatable/HeaderCell.vue
index c963348e0..981a6fccb 100644
--- a/components/datatable/HeaderCell.vue
+++ b/components/datatable/HeaderCell.vue
@@ -1,37 +1,86 @@
 <template>
-    <th :style="containerStyle" :class="containerClass" :tabindex="columnProp('sortable') ? '0' : null" role="cell"
-        @click="onClick" @keydown="onKeyDown" @mousedown="onMouseDown"
-        @dragstart="onDragStart" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop"
-        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" :aria-sort="ariaSort">
-        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
+    <th
+        :style="containerStyle"
+        :class="containerClass"
+        :tabindex="columnProp('sortable') ? '0' : null"
+        role="cell"
+        @click="onClick"
+        @keydown="onKeyDown"
+        @mousedown="onMouseDown"
+        @dragstart="onDragStart"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDrop"
+        :colspan="columnProp('colspan')"
+        :rowspan="columnProp('rowspan')"
+        :aria-sort="ariaSort"
+    >
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
         <div class="p-column-header-content">
-            <component :is="column.children.header" :column="column" v-if="column.children && column.children.header"/>
-            <span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
+            <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
+            <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
             <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
-            <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getBadgeValue()}}</span>
-            <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
-            <DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
-            :showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter"
-            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter"
-            :filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply"
-            :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp('filterMenuStyle')" :filterMenuClass="columnProp('filterMenuClass')"
-            :showOperator="columnProp('showFilterOperator')" :showClearButton="columnProp('showClearButton')" :showApplyButton="columnProp('showApplyButton')"
-            :showMatchModes="columnProp('showFilterMatchModes')" :showAddButton="columnProp('showAddButton')" :matchModeOptions="columnProp('filterMatchModeOptions')" :maxConstraints="columnProp('maxConstraints')"
-            @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+            <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
+            <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" />
+            <DTColumnFilter
+                v-if="filterDisplay === 'menu' && column.children && column.children.filter"
+                :field="columnProp('filterField') || columnProp('field')"
+                :type="columnProp('dataType')"
+                display="menu"
+                :showMenu="columnProp('showFilterMenu')"
+                :filterElement="column.children && column.children.filter"
+                :filterHeaderTemplate="column.children && column.children.filterheader"
+                :filterFooterTemplate="column.children && column.children.filterfooter"
+                :filterClearTemplate="column.children && column.children.filterclear"
+                :filterApplyTemplate="column.children && column.children.filterapply"
+                :filters="filters"
+                :filtersStore="filtersStore"
+                @filter-change="$emit('filter-change', $event)"
+                @filter-apply="$emit('filter-apply')"
+                :filterMenuStyle="columnProp('filterMenuStyle')"
+                :filterMenuClass="columnProp('filterMenuClass')"
+                :showOperator="columnProp('showFilterOperator')"
+                :showClearButton="columnProp('showClearButton')"
+                :showApplyButton="columnProp('showApplyButton')"
+                :showMatchModes="columnProp('showFilterMatchModes')"
+                :showAddButton="columnProp('showAddButton')"
+                :matchModeOptions="columnProp('filterMatchModeOptions')"
+                :maxConstraints="columnProp('maxConstraints')"
+                @operator-change="$emit('operator-change', $event)"
+                @matchmode-change="$emit('matchmode-change', $event)"
+                @constraint-add="$emit('constraint-add', $event)"
+                @constraint-remove="$emit('constraint-remove', $event)"
+                @apply-click="$emit('apply-click', $event)"
+            />
         </div>
     </th>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
 
 export default {
     name: 'HeaderCell',
-    emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
-            'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
+    emits: [
+        'column-click',
+        'column-mousedown',
+        'column-dragstart',
+        'column-dragover',
+        'column-dragleave',
+        'column-drop',
+        'column-resizestart',
+        'checkbox-change',
+        'filter-change',
+        'filter-apply',
+        'operator-change',
+        'matchmode-change',
+        'constraint-add',
+        'constraint-remove',
+        'filter-clear',
+        'apply-click'
+    ],
     props: {
         column: {
             type: Object,
@@ -42,7 +91,7 @@ export default {
             default: false
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         sortMode: {
@@ -97,7 +146,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -114,15 +163,15 @@ export default {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
         onClick(event) {
-            this.$emit('column-click', {originalEvent: event, column: this.column});
+            this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
             if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
-                this.$emit('column-click', {originalEvent: event, column: this.column});
+                this.$emit('column-click', { originalEvent: event, column: this.column });
             }
         },
         onMouseDown(event) {
-            this.$emit('column-mousedown', {originalEvent: event, column: this.column});
+            this.$emit('column-mousedown', { originalEvent: event, column: this.column });
         },
         onDragStart(event) {
             this.$emit('column-dragstart', event);
@@ -140,42 +189,48 @@ export default {
             this.$emit('column-resizestart', event);
         },
         getMultiSortMetaIndex() {
-            return this.multiSortMeta.findIndex(meta => (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')));
+            return this.multiSortMeta.findIndex((meta) => meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField'));
         },
         getBadgeValue() {
             let index = this.getMultiSortMetaIndex();
 
-            return (this.groupRowsBy && this.groupRowsBy === this.groupRowSortField) && index > -1 ? index : index + 1;
+            return this.groupRowsBy && this.groupRowsBy === this.groupRowSortField && index > -1 ? index : index + 1;
         },
         isMultiSorted() {
-            return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+            return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
         },
         isColumnSorted() {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;
+
                 if (filterRow) {
                     let index = DomHandler.index(this.$el);
+
                     filterRow.children[index].style.left = this.styleObject.left;
                     filterRow.children[index].style.right = this.styleObject.right;
                 }
@@ -187,20 +242,24 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class'), {
+            return [
+                this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
+                this.columnProp('class'),
+                {
                     'p-sortable-column': this.columnProp('sortable'),
                     'p-resizable-column': this.resizableColumns,
                     'p-highlight': this.isColumnSorted(),
                     'p-filter-column': this.filterColumn,
                     'p-frozen-column': this.columnProp('frozen'),
                     'p-reorderable-column': this.reorderableColumns
-            }];
+                }
+            ];
         },
         containerStyle() {
-            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle'): this.columnProp('headerStyle');
+            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
         sortableColumnIcon() {
             let sorted = false;
@@ -208,10 +267,10 @@ export default {
 
             if (this.sortMode === 'single') {
                 sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
-                sortOrder = sorted ? this.sortOrder: 0;
-            }
-            else if (this.sortMode === 'multiple') {
+                sortOrder = sorted ? this.sortOrder : 0;
+            } else if (this.sortMode === 'multiple') {
                 let metaIndex = this.getMultiSortMetaIndex();
+
                 if (metaIndex > -1) {
                     sorted = true;
                     sortOrder = this.multiSortMeta[metaIndex].order;
@@ -219,7 +278,8 @@ export default {
             }
 
             return [
-                'p-sortable-column-icon pi pi-fw', {
+                'p-sortable-column-icon pi pi-fw',
+                {
                     'pi-sort-alt': !sorted,
                     'pi-sort-amount-up-alt': sorted && sortOrder > 0,
                     'pi-sort-amount-down': sorted && sortOrder < 0
@@ -229,21 +289,18 @@ export default {
         ariaSort() {
             if (this.columnProp('sortable')) {
                 const sortIcon = this.sortableColumnIcon;
-                if (sortIcon[1]['pi-sort-amount-down'])
-                    return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt'])
-                    return 'ascending';
-                else
-                    return 'none';
-            }
-            else {
+
+                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                else return 'none';
+            } else {
                 return null;
             }
         }
     },
     components: {
-        'DTHeaderCheckbox': HeaderCheckbox,
-        'DTColumnFilter': ColumnFilter
+        DTHeaderCheckbox: HeaderCheckbox,
+        DTColumnFilter: ColumnFilter
     }
-}
+};
 </script>
diff --git a/components/datatable/HeaderCheckbox.vue b/components/datatable/HeaderCheckbox.vue
index c867488ea..8991523c0 100755
--- a/components/datatable/HeaderCheckbox.vue
+++ b/components/datatable/HeaderCheckbox.vue
@@ -1,8 +1,15 @@
 <template>
-    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused, 'p-disabled': $attrs.disabled}]" @click="onClick" @keydown.space.prevent="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
-            role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': $attrs.disabled }]" @click="onClick" @keydown.space.prevent="onClick">
+        <div
+            ref="box"
+            :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
+            role="checkbox"
+            :aria-checked="checked"
+            :tabindex="$attrs.disabled ? null : '0'"
+            @focus="onFocus($event)"
+            @blur="onBlur($event)"
+        >
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
@@ -37,5 +44,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>
diff --git a/components/datatable/RowCheckbox.vue b/components/datatable/RowCheckbox.vue
index 20929bbae..4f805aa2f 100755
--- a/components/datatable/RowCheckbox.vue
+++ b/components/datatable/RowCheckbox.vue
@@ -1,8 +1,16 @@
 <template>
-    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click.stop.prevent="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
-            role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click.stop.prevent="onClick">
+        <div
+            ref="box"
+            :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
+            role="checkbox"
+            :aria-checked="checked"
+            :tabindex="$attrs.disabled ? null : '0'"
+            @keydown.space.prevent="onClick"
+            @focus="onFocus($event)"
+            @blur="onBlur($event)"
+        >
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
@@ -13,7 +21,7 @@ export default {
     inheritAttrs: false,
     emits: ['change'],
     props: {
-		value: null,
+        value: null,
         checked: null
     },
     data() {
@@ -38,5 +46,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>
diff --git a/components/datatable/RowRadioButton.vue b/components/datatable/RowRadioButton.vue
index 5980775a2..f074109e9 100755
--- a/components/datatable/RowRadioButton.vue
+++ b/components/datatable/RowRadioButton.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="['p-radiobutton p-component', {'p-radiobutton-focused': focused}]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
-        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
+    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
+        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" role="radio" :aria-checked="checked">
             <div class="p-radiobutton-icon"></div>
         </div>
     </div>
@@ -12,7 +12,7 @@ export default {
     inheritAttrs: false,
     emits: ['change'],
     props: {
-		value: null,
+        value: null,
         checked: null
     },
     data() {
@@ -38,5 +38,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>
diff --git a/components/datatable/TableBody.vue b/components/datatable/TableBody.vue
index 178688603..19dce2bcb 100755
--- a/components/datatable/TableBody.vue
+++ b/components/datatable/TableBody.vue
@@ -2,57 +2,110 @@
     <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
         <template v-if="!empty">
             <template v-for="(rowData, index) of value" :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'">
-                <tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" role="row">
+                <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" class="p-rowgroup-header" :style="rowGroupHeaderStyle" role="row">
                     <td :colspan="columnsLength - 1">
-                        <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
+                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
-                <tr :class="getRowClass(rowData)" :style="rowStyle" :key="getRowKey(rowData, getRowIndex(index))"
-                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, getRowIndex(index))" @dblclick="onRowDblClick($event, rowData, getRowIndex(index))" @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, getRowIndex(index))" :tabindex="selectionMode || contextMenu ? '0' : null"
-                    @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, getRowIndex(index))" @dragover="onRowDragOver($event, getRowIndex(index))" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
-                    <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, getRowIndex(index))" :rowData="rowData" :column="col" :rowIndex="getRowIndex(index)" :index="i" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
+                <tr
+                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true"
+                    :key="getRowKey(rowData, getRowIndex(index))"
+                    :class="getRowClass(rowData)"
+                    :style="rowStyle"
+                    @click="onRowClick($event, rowData, getRowIndex(index))"
+                    @dblclick="onRowDblClick($event, rowData, getRowIndex(index))"
+                    @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))"
+                    @touchend="onRowTouchEnd($event)"
+                    @keydown="onRowKeyDown($event, rowData, getRowIndex(index))"
+                    :tabindex="selectionMode || contextMenu ? '0' : null"
+                    @mousedown="onRowMouseDown($event)"
+                    @dragstart="onRowDragStart($event, getRowIndex(index))"
+                    @dragover="onRowDragOver($event, getRowIndex(index))"
+                    @dragleave="onRowDragLeave($event)"
+                    @dragend="onRowDragEnd($event)"
+                    @drop="onRowDrop($event)"
+                    role="row"
+                >
+                    <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                        <DTBodyCell
+                            v-if="shouldRenderBodyCell(value, col, getRowIndex(index))"
+                            :rowData="rowData"
+                            :column="col"
+                            :rowIndex="getRowIndex(index)"
+                            :index="i"
+                            :selected="isSelected(rowData)"
+                            :rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
+                            :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
-                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
-                            @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="editingMeta" @editing-meta-change="onEditingMetaChange" :virtualScrollerContentProps="virtualScrollerContentProps"/>
+                            :editMode="editMode"
+                            :editing="editMode === 'row' && isRowEditing(rowData)"
+                            :responsiveLayout="responsiveLayout"
+                            @radio-change="onRadioChange($event)"
+                            @checkbox-change="onCheckboxChange($event)"
+                            @row-toggle="onRowToggle($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :virtualScrollerContentProps="virtualScrollerContentProps"
+                        />
                     </template>
                 </tr>
-                <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" role="row">
+                <tr v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" class="p-datatable-row-expansion" role="row">
                     <td :colspan="columnsLength">
                         <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
-                <tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" role="row">
+                <tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
                     <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
                 </tr>
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage" role="row">
             <td :colspan="columnsLength">
-                <component :is="templates.empty" v-if="templates.empty" />
+                <component v-if="templates.empty" :is="templates.empty" />
             </td>
         </tr>
     </tbody>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TableBody',
-    emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
-        'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
-        'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
-        'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
+    emits: [
+        'rowgroup-toggle',
+        'row-click',
+        'row-dblclick',
+        'row-rightclick',
+        'row-touchend',
+        'row-keydown',
+        'row-mousedown',
+        'row-dragstart',
+        'row-dragover',
+        'row-dragleave',
+        'row-dragend',
+        'row-drop',
+        'row-toggle',
+        'radio-change',
+        'checkbox-change',
+        'cell-edit-init',
+        'cell-edit-complete',
+        'cell-edit-cancel',
+        'row-edit-init',
+        'row-edit-save',
+        'row-edit-cancel',
+        'editing-meta-change'
+    ],
     props: {
         value: {
             type: Array,
@@ -75,7 +128,7 @@ export default {
             default: null
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         expandableRowGroups: {
@@ -107,7 +160,7 @@ export default {
             default: null
         },
         selection: {
-            type: [Array,Object],
+            type: [Array, Object],
             default: null
         },
         selectionKeys: {
@@ -175,6 +228,11 @@ export default {
             default: false
         }
     },
+    data() {
+        return {
+            rowGroupHeaderStyleObject: {}
+        };
+    },
     watch: {
         virtualScrollerContentProps(newValue, oldValue) {
             if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
@@ -204,11 +262,6 @@ export default {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
     },
-    data() {
-        return {
-            rowGroupHeaderStyleObject: {}
-        }
-    },
     methods: {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
@@ -216,25 +269,28 @@ export default {
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
+
             if (prevRowData) {
                 let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+
                 return currentRowFieldData !== previousRowFieldData;
-            }
-            else {
+            } else {
                 return true;
             }
         },
         getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : index;
         },
         getRowIndex(index) {
             const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
+
             return getItemOptions ? getItemOptions(index).index : index;
         },
         getRowClass(rowData) {
             let rowStyleClass = [];
+
             if (this.selectionMode) {
-                 rowStyleClass.push('p-selectable-row');
+                rowStyleClass.push('p-selectable-row');
             }
 
             if (this.selection) {
@@ -262,15 +318,15 @@ export default {
         shouldRenderRowGroupFooter(value, rowData, i) {
             if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
                 return false;
-            }
-            else {
+            } else {
                 let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
                 let nextRowData = value[i + 1];
+
                 if (nextRowData) {
                     let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+
                     return currentRowFieldData !== nextRowFieldData;
-                }
-                else {
+                } else {
                     return true;
                 }
             }
@@ -279,25 +335,23 @@ export default {
             if (this.rowGroupMode) {
                 if (this.rowGroupMode === 'subheader') {
                     return this.groupRowsBy !== this.columnProp(column, 'field');
-                }
-                else if (this.rowGroupMode === 'rowspan') {
+                } else if (this.rowGroupMode === 'rowspan') {
                     if (this.isGrouped(column)) {
                         let prevRowData = value[i - 1];
+
                         if (prevRowData) {
                             let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
                             let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
+
                             return currentRowFieldData !== previousRowFieldData;
-                        }
-                        else {
+                        } else {
                             return true;
                         }
-                    }
-                    else {
+                    } else {
                         return true;
                     }
                 }
-            }
-            else {
+            } else {
                 return !this.columnProp(column, 'hidden');
             }
         },
@@ -310,55 +364,49 @@ export default {
                 while (currentRowFieldData === nextRowFieldData) {
                     groupRowSpan++;
                     let nextRowData = value[++index];
+
                     if (nextRowData) {
                         nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 return groupRowSpan === 1 ? null : groupRowSpan;
-            }
-            else {
+            } else {
                 return null;
             }
         },
         rowTogglerIcon(rowData) {
             const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+
             return ['p-row-toggler-icon pi', icon];
         },
         rowGroupTogglerIcon(rowData) {
             const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+
             return ['p-row-toggler-icon pi', icon];
         },
         isGrouped(column) {
             if (this.groupRowsBy && this.columnProp(column, 'field')) {
-                if (Array.isArray(this.groupRowsBy))
-                    return this.groupRowsBy.indexOf(column.props.field) > -1;
-                else
-                    return this.groupRowsBy === column.props.field;
-            }
-            else {
+                if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
+                else return this.groupRowsBy === column.props.field;
+            } else {
                 return false;
             }
         },
         isRowEditing(rowData) {
             if (rowData && this.editingRows) {
-                if (this.dataKey)
-                    return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.editingRows) > -1;
+                if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else return this.findIndex(rowData, this.editingRows) > -1;
             }
 
             return false;
         },
         isRowExpanded(rowData) {
             if (rowData && this.expandedRows) {
-                if (this.dataKey)
-                    return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.expandedRows) > -1;
+                if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else return this.findIndex(rowData, this.expandedRows) > -1;
             }
 
             return false;
@@ -366,20 +414,19 @@ export default {
         isRowGroupExpanded(rowData) {
             if (this.expandableRowGroups && this.expandedRowGroups) {
                 let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+
                 return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
             }
+
             return false;
         },
         isSelected(rowData) {
             if (rowData && this.selection) {
                 if (this.dataKey) {
                     return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                }
-                else {
-                    if (this.selection instanceof Array)
-                        return this.findIndexInSelection(rowData) > -1;
-                    else
-                        return this.equals(rowData, this.selection);
+                } else {
+                    if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
+                    else return this.equals(rowData, this.selection);
                 }
             }
 
@@ -397,6 +444,7 @@ export default {
         },
         findIndex(rowData, collection) {
             let index = -1;
+
             if (collection && collection.length) {
                 for (let i = 0; i < collection.length; i++) {
                     if (this.equals(rowData, collection[i])) {
@@ -409,34 +457,34 @@ export default {
             return index;
         },
         equals(data1, data2) {
-            return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
+            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
         },
         onRowGroupToggle(event, data) {
-            this.$emit('rowgroup-toggle', {originalEvent: event, data: data});
+            this.$emit('rowgroup-toggle', { originalEvent: event, data: data });
         },
         onRowClick(event, rowData, rowIndex) {
-            this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-click', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowDblClick(event, rowData, rowIndex) {
-            this.$emit('row-dblclick', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-dblclick', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowRightClick(event, rowData, rowIndex) {
-            this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-rightclick', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowTouchEnd(event) {
             this.$emit('row-touchend', event);
         },
         onRowKeyDown(event, rowData, rowIndex) {
-            this.$emit('row-keydown', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-keydown', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowMouseDown(event) {
             this.$emit('row-mousedown', event);
         },
         onRowDragStart(event, rowIndex) {
-            this.$emit('row-dragstart', {originalEvent: event, index: rowIndex});
+            this.$emit('row-dragstart', { originalEvent: event, index: rowIndex });
         },
         onRowDragOver(event, rowIndex) {
-            this.$emit('row-dragover', {originalEvent: event, index: rowIndex});
+            this.$emit('row-dragover', { originalEvent: event, index: rowIndex });
         },
         onRowDragLeave(event) {
             this.$emit('row-dragleave', event);
@@ -482,19 +530,23 @@ export default {
         },
         updateFrozenRowGroupHeaderStickyPosition() {
             let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
-            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'
+
+            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
         },
         updateVirtualScrollerPosition() {
             const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
+
             this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
         },
         getVirtualScrollerProp(option, options) {
             options = options || this.virtualScrollerContentProps;
+
             return options ? options[option] : null;
         },
         bodyRef(el) {
             // For VirtualScroller
             const contentRef = this.getVirtualScrollerProp('contentRef');
+
             contentRef && contentRef(el);
         }
     },
@@ -502,15 +554,15 @@ export default {
         columnsLength() {
             let hiddenColLength = 0;
 
-            this.columns.forEach(column => {
-                if(this.columnProp(column, 'hidden')) hiddenColLength++;
+            this.columns.forEach((column) => {
+                if (this.columnProp(column, 'hidden')) hiddenColLength++;
             });
 
             return this.columns ? this.columns.length - hiddenColLength : 0;
         },
         rowGroupHeaderStyle() {
             if (this.scrollable) {
-                return {top: this.rowGroupHeaderStyleObject.top};
+                return { top: this.rowGroupHeaderStyleObject.top };
             }
 
             return null;
@@ -520,7 +572,7 @@ export default {
         }
     },
     components: {
-        'DTBodyCell': BodyCell
+        DTBodyCell: BodyCell
     }
-}
+};
 </script>
diff --git a/components/datatable/TableFooter.vue b/components/datatable/TableFooter.vue
index d146558cb..087b8f5a2 100755
--- a/components/datatable/TableFooter.vue
+++ b/components/datatable/TableFooter.vue
@@ -1,14 +1,14 @@
 <template>
-    <tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
+    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup">
         <tr v-if="!columnGroup" role="row">
-            <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" >
-                <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
+            <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
             </template>
         </tr>
         <template v-else>
-            <tr v-for="(row,i) of getFooterRows()" :key="i" role="row">
-                <template v-for="(col,j) of getFooterColumns(row)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j">
-                    <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
+            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row">
+                <template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
+                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
                 </template>
             </tr>
         </template>
@@ -17,7 +17,7 @@
 
 <script>
 import FooterCell from './FooterCell.vue';
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'TableFooter',
@@ -29,7 +29,7 @@ export default {
         columns: {
             type: null,
             default: null
-        },
+        }
     },
     methods: {
         columnProp(col, prop) {
@@ -39,12 +39,12 @@ export default {
             let rows = [];
 
             let columnGroup = this.columnGroup;
+
             if (columnGroup.children && columnGroup.children.default) {
                 for (let child of columnGroup.children.default()) {
                     if (child.type.name === 'Row') {
                         rows.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
+                    } else if (child.children && child.children instanceof Array) {
                         rows = child.children;
                     }
                 }
@@ -52,15 +52,13 @@ export default {
                 return rows;
             }
         },
-        getFooterColumns(row){
+        getFooterColumns(row) {
             let cols = [];
 
             if (row.children && row.children.default) {
-                row.children.default().forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
+                row.children.default().forEach((child) => {
+                    if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
+                    else if (child.type.name === 'Column') cols.push(child);
                 });
 
                 return cols;
@@ -73,8 +71,7 @@ export default {
 
             if (this.columnGroup) {
                 hasFooter = true;
-            }
-            else if (this.columns) {
+            } else if (this.columns) {
                 for (let col of this.columns) {
                     if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
                         hasFooter = true;
@@ -87,7 +84,7 @@ export default {
         }
     },
     components: {
-        'DTFooterCell': FooterCell
+        DTFooterCell: FooterCell
     }
-}
+};
 </script>
diff --git a/components/datatable/TableHeader.vue b/components/datatable/TableHeader.vue
index b50e0289f..5efaac7c8 100755
--- a/components/datatable/TableHeader.vue
+++ b/components/datatable/TableHeader.vue
@@ -2,45 +2,107 @@
     <thead class="p-datatable-thead" role="rowgroup">
         <template v-if="!columnGroup">
             <tr role="row">
-                <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                    <DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))" :column="col"
-                    @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
-                    @column-dragstart="$emit('column-dragstart', $event)" @column-dragover="$emit('column-dragover', $event)" @column-dragleave="$emit('column-dragleave', $event)" @column-drop="$emit('column-drop', $event)"
-                    :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
-                    :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
-                    :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
-                    :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
-                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
-                    @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+                <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                    <DTHeaderCell
+                        v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
+                        :column="col"
+                        @column-click="$emit('column-click', $event)"
+                        @column-mousedown="$emit('column-mousedown', $event)"
+                        @column-dragstart="$emit('column-dragstart', $event)"
+                        @column-dragover="$emit('column-dragover', $event)"
+                        @column-dragleave="$emit('column-dragleave', $event)"
+                        @column-drop="$emit('column-drop', $event)"
+                        :groupRowsBy="groupRowsBy"
+                        :groupRowSortField="groupRowSortField"
+                        :reorderableColumns="reorderableColumns"
+                        :resizableColumns="resizableColumns"
+                        @column-resizestart="$emit('column-resizestart', $event)"
+                        :sortMode="sortMode"
+                        :sortField="sortField"
+                        :sortOrder="sortOrder"
+                        :multiSortMeta="multiSortMeta"
+                        :allRowsSelected="allRowsSelected"
+                        :empty="empty"
+                        @checkbox-change="$emit('checkbox-change', $event)"
+                        :filters="filters"
+                        :filterDisplay="filterDisplay"
+                        :filtersStore="filtersStore"
+                        @filter-change="$emit('filter-change', $event)"
+                        @filter-apply="$emit('filter-apply')"
+                        @operator-change="$emit('operator-change', $event)"
+                        @matchmode-change="$emit('matchmode-change', $event)"
+                        @constraint-add="$emit('constraint-add', $event)"
+                        @constraint-remove="$emit('constraint-remove', $event)"
+                        @apply-click="$emit('apply-click', $event)"
+                    />
                 </template>
             </tr>
             <tr v-if="filterDisplay === 'row'" role="row">
-                <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                    <th :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)" v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))">
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
-                        <DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col,'filterField')||columnProp(col,'field')" :type="columnProp(col,'dataType')" display="row"
-                        :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter"
-                        :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter"
-                        :filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply"
-                        :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col,'filterMenuStyle')" :filterMenuClass="columnProp(col,'filterMenuClass')"
-                        :showOperator="columnProp(col,'showFilterOperator')" :showClearButton="columnProp(col,'showClearButton')" :showApplyButton="columnProp(col,'showApplyButton')"
-                        :showMatchModes="columnProp(col,'showFilterMatchModes')" :showAddButton="columnProp(col,'showAddButton')" :matchModeOptions="columnProp(col,'filterMatchModeOptions')" :maxConstraints="columnProp(col,'maxConstraints')"
-                        @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)"
-                        @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+                <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                    <th v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)">
+                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" />
+                        <DTColumnFilter
+                            v-if="col.children && col.children.filter"
+                            :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
+                            :type="columnProp(col, 'dataType')"
+                            display="row"
+                            :showMenu="columnProp(col, 'showFilterMenu')"
+                            :filterElement="col.children && col.children.filter"
+                            :filterHeaderTemplate="col.children && col.children.filterheader"
+                            :filterFooterTemplate="col.children && col.children.filterfooter"
+                            :filterClearTemplate="col.children && col.children.filterclear"
+                            :filterApplyTemplate="col.children && col.children.filterapply"
+                            :filters="filters"
+                            :filtersStore="filtersStore"
+                            @filter-change="$emit('filter-change', $event)"
+                            @filter-apply="$emit('filter-apply')"
+                            :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
+                            :filterMenuClass="columnProp(col, 'filterMenuClass')"
+                            :showOperator="columnProp(col, 'showFilterOperator')"
+                            :showClearButton="columnProp(col, 'showClearButton')"
+                            :showApplyButton="columnProp(col, 'showApplyButton')"
+                            :showMatchModes="columnProp(col, 'showFilterMatchModes')"
+                            :showAddButton="columnProp(col, 'showAddButton')"
+                            :matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
+                            :maxConstraints="columnProp(col, 'maxConstraints')"
+                            @operator-change="$emit('operator-change', $event)"
+                            @matchmode-change="$emit('matchmode-change', $event)"
+                            @constraint-add="$emit('constraint-add', $event)"
+                            @constraint-remove="$emit('constraint-remove', $event)"
+                            @apply-click="$emit('apply-click', $event)"
+                        />
                     </th>
                 </template>
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row,i) of getHeaderRows()" :key="i" role="row">
-                <template v-for="(col,j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
-                    <DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))) && (typeof col.children !== 'string')" :column="col"
-                    @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
-                    :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
-                    :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
-                    :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
-                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
-                    @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row">
+                <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
+                    <DTHeaderCell
+                        v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
+                        :column="col"
+                        @column-click="$emit('column-click', $event)"
+                        @column-mousedown="$emit('column-mousedown', $event)"
+                        :groupRowsBy="groupRowsBy"
+                        :groupRowSortField="groupRowSortField"
+                        :sortMode="sortMode"
+                        :sortField="sortField"
+                        :sortOrder="sortOrder"
+                        :multiSortMeta="multiSortMeta"
+                        :allRowsSelected="allRowsSelected"
+                        :empty="empty"
+                        @checkbox-change="$emit('checkbox-change', $event)"
+                        :filters="filters"
+                        :filterDisplay="filterDisplay"
+                        :filtersStore="filtersStore"
+                        @filter-change="$emit('filter-change', $event)"
+                        @filter-apply="$emit('filter-apply')"
+                        @operator-change="$emit('operator-change', $event)"
+                        @matchmode-change="$emit('matchmode-change', $event)"
+                        @constraint-add="$emit('constraint-add', $event)"
+                        @constraint-remove="$emit('constraint-remove', $event)"
+                        @apply-click="$emit('apply-click', $event)"
+                    />
                 </template>
             </tr>
         </template>
@@ -51,15 +113,30 @@
 import HeaderCell from './HeaderCell.vue';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'TableHeader',
-    emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
-            'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
+    emits: [
+        'column-click',
+        'column-mousedown',
+        'column-dragstart',
+        'column-dragover',
+        'column-dragleave',
+        'column-drop',
+        'column-resizestart',
+        'checkbox-change',
+        'filter-change',
+        'filter-apply',
+        'operator-change',
+        'matchmode-change',
+        'constraint-add',
+        'constraint-remove',
+        'filter-clear',
+        'apply-click'
+    ],
     props: {
-		columnGroup: {
+        columnGroup: {
             type: null,
             default: null
         },
@@ -72,7 +149,7 @@ export default {
             default: null
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         resizableColumns: {
@@ -129,9 +206,14 @@ export default {
             return ObjectUtils.getVNodeProp(col, prop);
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
-                'p-frozen-column': this.columnProp(column, 'frozen')
-            }];
+            return [
+                'p-filter-column',
+                this.columnProp(column, 'filterHeaderClass'),
+                this.columnProp(column, 'class'),
+                {
+                    'p-frozen-column': this.columnProp(column, 'frozen')
+                }
+            ];
         },
         getFilterColumnHeaderStyle(column) {
             return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
@@ -140,12 +222,12 @@ export default {
             let rows = [];
 
             let columnGroup = this.columnGroup;
+
             if (columnGroup.children && columnGroup.children.default) {
                 for (let child of columnGroup.children.default()) {
                     if (child.type.name === 'Row') {
                         rows.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
+                    } else if (child.children && child.children instanceof Array) {
                         rows = child.children;
                     }
                 }
@@ -153,15 +235,13 @@ export default {
                 return rows;
             }
         },
-        getHeaderColumns(row){
+        getHeaderColumns(row) {
             let cols = [];
 
             if (row.children && row.children.default) {
-                row.children.default().forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
+                row.children.default().forEach((child) => {
+                    if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
+                    else if (child.type.name === 'Column') cols.push(child);
                 });
 
                 return cols;
@@ -169,9 +249,9 @@ export default {
         }
     },
     components: {
-        'DTHeaderCell': HeaderCell,
-        'DTHeaderCheckbox': HeaderCheckbox,
-        'DTColumnFilter': ColumnFilter
+        DTHeaderCell: HeaderCell,
+        DTHeaderCheckbox: HeaderCheckbox,
+        DTColumnFilter: ColumnFilter
     }
-}
+};
 </script>
diff --git a/components/datatable/TableLoadingBody.vue b/components/datatable/TableLoadingBody.vue
index f1c25045c..682e5cdb1 100755
--- a/components/datatable/TableLoadingBody.vue
+++ b/components/datatable/TableLoadingBody.vue
@@ -1,8 +1,8 @@
 <template>
     <tbody class="p-datatable-tbody">
         <tr v-for="n in rows" :key="n">
-            <td v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i">
-                <component :is="col.children.loading" :column="col" :index="i" v-if="col.children && col.children.loading" />
+            <td v-for="(col, i) of columns" :key="col.props.columnKey || col.props.field || i">
+                <component v-if="col.children && col.children.loading" :is="col.children.loading" :column="col" :index="i" />
             </td>
         </tr>
     </tbody>
@@ -21,5 +21,5 @@ export default {
             default: null
         }
     }
-}
+};
 </script>
diff --git a/components/dataview/DataView.d.ts b/components/dataview/DataView.d.ts
index 4e60fd555..5290ac2eb 100755
--- a/components/dataview/DataView.d.ts
+++ b/components/dataview/DataView.d.ts
@@ -128,7 +128,7 @@ export interface DataViewSlots {
      * Custom footer template.
      */
     footer: () => VNode[];
-     /**
+    /**
      * Custom empty template.
      */
     empty: () => VNode[];
@@ -136,7 +136,7 @@ export interface DataViewSlots {
      * Custom paginator start template.
      */
     paginatorstart: () => VNode[];
-     /**
+    /**
      * Custom paginator end template.
      */
     paginatorend: () => VNode[];
@@ -176,7 +176,7 @@ export declare type DataViewEmits = {
      * @param {number} value - New value.
      */
     'update:first': (value: number) => void;
-     /**
+    /**
      * Emitted when the rows changes.
      * @param {number} value - New value.
      */
@@ -185,14 +185,14 @@ export declare type DataViewEmits = {
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {DataViewPageEvent} event - Custom page event.
      */
-    'page': (event: DataViewPageEvent) => void;
-}
+    page: (event: DataViewPageEvent) => void;
+};
 
-declare class DataView extends ClassComponent<DataViewProps, DataViewSlots, DataViewEmits> { }
+declare class DataView extends ClassComponent<DataViewProps, DataViewSlots, DataViewEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DataView: GlobalComponentConstructor<DataView>
+        DataView: GlobalComponentConstructor<DataView>;
     }
 }
 
@@ -206,7 +206,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataView](https://www.primefaces.org/primevue/showcase/#/dataview)
+ * - [DataView](https://www.primefaces.org/primevue/dataview)
  *
  */
 export default DataView;
diff --git a/components/dataview/DataView.spec.js b/components/dataview/DataView.spec.js
index 3f32de26f..36c51c0fa 100644
--- a/components/dataview/DataView.spec.js
+++ b/components/dataview/DataView.spec.js
@@ -2,49 +2,49 @@ import { mount } from '@vue/test-utils';
 import DataView from './DataView.vue';
 
 describe('DataView.vue', () => {
-    it('should exist', () => {    
+    it('should exist', () => {
         const wrapper = mount(DataView, {
             props: {
                 value: [
                     {
-                        "id": "1000",
-                        "code": "f230fh0g3",
-                        "name": "Bamboo Watch",
-                        "description": "Product Description",
-                        "image": "bamboo-watch.jpg",
-                        "price": 65,
-                        "category": "Accessories",
-                        "quantity": 24,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 5
+                        id: '1000',
+                        code: 'f230fh0g3',
+                        name: 'Bamboo Watch',
+                        description: 'Product Description',
+                        image: 'bamboo-watch.jpg',
+                        price: 65,
+                        category: 'Accessories',
+                        quantity: 24,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 5
                     },
                     {
-                        "id": "1001",
-                        "code": "nvklal433",
-                        "name": "Black Watch",
-                        "description": "Product Description",
-                        "image": "black-watch.jpg",
-                        "price": 72,
-                        "category": "Accessories",
-                        "quantity": 61,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 4
+                        id: '1001',
+                        code: 'nvklal433',
+                        name: 'Black Watch',
+                        description: 'Product Description',
+                        image: 'black-watch.jpg',
+                        price: 72,
+                        category: 'Accessories',
+                        quantity: 61,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1002",
-                        "code": "zz21cz3c1",
-                        "name": "Blue Band",
-                        "description": "Product Description",
-                        "image": "blue-band.jpg",
-                        "price": 79,
-                        "category": "Fitness",
-                        "quantity": 2,
-                        "inventoryStatus": "LOWSTOCK",
-                        "rating": 3
+                        id: '1002',
+                        code: 'zz21cz3c1',
+                        name: 'Blue Band',
+                        description: 'Product Description',
+                        image: 'blue-band.jpg',
+                        price: 79,
+                        category: 'Fitness',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 3
                     }
                 ],
                 layout: 'grid',
-                paginator:  true,
+                paginator: true,
                 rows: 3
             },
             slots: {
@@ -79,4 +79,4 @@ describe('DataView.vue', () => {
         expect(wrapper.findAll('.product-grid-item').length).toBe(3);
         expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/dataview/DataView.vue b/components/dataview/DataView.vue
index 73f47a37f..1f243213e 100755
--- a/components/dataview/DataView.vue
+++ b/components/dataview/DataView.vue
@@ -1,46 +1,68 @@
 <template>
-	<div :class="containerClass">
-		<div class="p-dataview-header" v-if="$slots.header">
-			<slot name="header"></slot>
-		</div>
-		<DVPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #start v-if="$slots.paginatorstart">
-				<slot name="paginatorstart"></slot>
-			</template>
-			<template #end v-if="$slots.paginatorend">
-				<slot name="paginatorend"></slot>
-			</template>
-		</DVPaginator>
-		<div class="p-dataview-content">
-			<div class="p-grid p-nogutter grid grid-nogutter">
-                <template v-for="(item,index) of items" :key="getKey(item, index)">
-					<slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
-					<slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
-				</template>
-				<div v-if="empty" class="p-col col">
+    <div :class="containerClass">
+        <div v-if="$slots.header" class="p-dataview-header">
+            <slot name="header"></slot>
+        </div>
+        <DVPaginator
+            v-if="paginatorTop"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="getTotalRecords"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            :class="{ 'p-paginator-top': paginatorTop }"
+            :alwaysShow="alwaysShowPaginator"
+            @page="onPage($event)"
+        >
+            <template v-if="$slots.paginatorstart" #start>
+                <slot name="paginatorstart"></slot>
+            </template>
+            <template v-if="$slots.paginatorend" #end>
+                <slot name="paginatorend"></slot>
+            </template>
+        </DVPaginator>
+        <div class="p-dataview-content">
+            <div class="p-grid p-nogutter grid grid-nogutter">
+                <template v-for="(item, index) of items" :key="getKey(item, index)">
+                    <slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
+                    <slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
+                </template>
+                <div v-if="empty" class="p-col col">
                     <div class="p-dataview-emptymessage">
                         <slot name="empty"></slot>
                     </div>
                 </div>
-			</div>
-		</div>
-		<DVPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #start v-if="$slots.paginatorstart">
-				<slot name="paginatorstart"></slot>
-			</template>
-			<template #end v-if="$slots.paginatorend">
-				<slot name="paginatorend"></slot>
-			</template>
-		</DVPaginator>
-		<div class="p-dataview-footer" v-if="$slots.footer">
-			<slot name="footer"></slot>
-		</div>
-	</div>
+            </div>
+        </div>
+        <DVPaginator
+            v-if="paginatorBottom"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="getTotalRecords"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            :class="{ 'p-paginator-bottom': paginatorBottom }"
+            :alwaysShow="alwaysShowPaginator"
+            @page="onPage($event)"
+        >
+            <template v-if="$slots.paginatorstart" #start>
+                <slot name="paginatorstart"></slot>
+            </template>
+            <template v-if="$slots.paginatorend" #end>
+                <slot name="paginatorend"></slot>
+            </template>
+        </DVPaginator>
+        <div v-if="$slots.footer" class="p-dataview-footer">
+            <slot name="footer"></slot>
+        </div>
+    </div>
 </template>
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 import Paginator from 'primevue/paginator';
 
 export default {
@@ -116,7 +138,7 @@ export default {
         return {
             d_first: this.first,
             d_rows: this.rows
-        }
+        };
     },
     watch: {
         first(newValue) {
@@ -153,23 +175,17 @@ export default {
                     let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
                     let result = null;
 
-                    if (value1 == null && value2 != null)
-                        result = -1;
-                    else if (value1 != null && value2 == null)
-                        result = 1;
-                    else if (value1 == null && value2 == null)
-                        result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string')
-                        result = value1.localeCompare(value2, undefined, { numeric: true });
-                    else
-                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                    if (value1 == null && value2 != null) result = -1;
+                    else if (value1 != null && value2 == null) result = 1;
+                    else if (value1 == null && value2 == null) result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
-                    return (this.sortOrder * result);
+                    return this.sortOrder * result;
                 });
 
                 return value;
-            }
-            else {
+            } else {
                 return null;
             }
         },
@@ -180,20 +196,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-dataview p-component', {
-                    'p-dataview-list': (this.layout === 'list'),
-                    'p-dataview-grid': (this.layout === 'grid')
+            return [
+                'p-dataview p-component',
+                {
+                    'p-dataview-list': this.layout === 'list',
+                    'p-dataview-grid': this.layout === 'grid'
                 }
-            ]
+            ];
         },
         getTotalRecords() {
-            if (this.totalRecords)
-                return this.totalRecords;
-            else
-                return this.value ? this.value.length : 0;
+            if (this.totalRecords) return this.totalRecords;
+            else return this.value ? this.value.length : 0;
         },
         empty() {
-            return (!this.value || this.value.length === 0);
+            return !this.value || this.value.length === 0;
         },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
@@ -211,20 +227,18 @@ export default {
 
                 if (this.paginator) {
                     const first = this.lazy ? 0 : this.d_first;
+
                     return data.slice(first, first + this.d_rows);
-                }
-                else {
+                } else {
                     return data;
                 }
-
-            }
-            else {
+            } else {
                 return null;
             }
         }
     },
     components: {
-        'DVPaginator': Paginator
+        DVPaginator: Paginator
     }
-}
+};
 </script>
diff --git a/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts b/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
index 7a34110e0..90bf20dfc 100755
--- a/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
+++ b/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
@@ -7,8 +7,7 @@ export interface DataViewLayoutOptionsProps {
     modelValue?: string | undefined;
 }
 
-export interface DataViewLayoutOptionsSlots {
-}
+export interface DataViewLayoutOptionsSlots {}
 
 export declare type DataViewLayoutOptionsEmits = {
     /**
@@ -16,13 +15,13 @@ export declare type DataViewLayoutOptionsEmits = {
      * @param {*} value - New value.
      */
     'update:modelValue': (value: string) => void;
-}
+};
 
-declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> { }
+declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>
+        DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>;
     }
 }
 
@@ -33,7 +32,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataViewLayoutOptions](https://www.primefaces.org/primevue/showcase/#/dataview)
+ * - [DataViewLayoutOptions](https://www.primefaces.org/primevue/dataview)
  *
  */
 export default DataViewLayoutOptions;
diff --git a/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js b/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
index 28019c8ec..628157fa9 100644
--- a/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
+++ b/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
@@ -11,9 +11,9 @@ describe('DataViewLayoutOptions.vue', () => {
 
         expect(wrapper.find('.p-dataview-layout-options').exists()).toBe(true);
         expect(wrapper.find('.p-highlight > .pi-th-large').exists()).toBe(true);
-        
+
         wrapper.vm.$emit('update:modelValue', 'list');
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['list']);
     });
-});
\ No newline at end of file
+});
diff --git a/components/dataviewlayoutoptions/DataViewLayoutOptions.vue b/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
index e922a4426..bceb4e2df 100755
--- a/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,39 +1,33 @@
 <template>
-	<div class="p-dataview-layout-options p-selectbutton p-buttonset">
-		<button :class="buttonListClass" @click="changeLayout('list')" type="button">
-			<i class="pi pi-bars"></i>
-		</button>
-		<button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
-			<i class="pi pi-th-large"></i>
-		</button>
-	</div>
+    <div class="p-dataview-layout-options p-selectbutton p-buttonset">
+        <button :class="buttonListClass" @click="changeLayout('list')" type="button">
+            <i class="pi pi-bars"></i>
+        </button>
+        <button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
+            <i class="pi pi-th-large"></i>
+        </button>
+    </div>
 </template>
 
 <script>
-	export default {
-        name: 'DataViewLayoutOptions',
-		emits: ['update:modelValue'],
-		props: {
-			modelValue: String
-		},
-		computed: {
-			buttonListClass(){
-				return [
-					'p-button p-button-icon-only',
-					{'p-highlight': this.modelValue === 'list'}
-				]
-			},
-			buttonGridClass() {
-				return [
-					'p-button p-button-icon-only',
-					{'p-highlight': this.modelValue === 'grid'}
-				]
-			}
-		},
-		methods: {
-			changeLayout(layout){
-				this.$emit('update:modelValue', layout);
-			}
-		}
-	}
+export default {
+    name: 'DataViewLayoutOptions',
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: String
+    },
+    methods: {
+        changeLayout(layout) {
+            this.$emit('update:modelValue', layout);
+        }
+    },
+    computed: {
+        buttonListClass() {
+            return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'list' }];
+        },
+        buttonGridClass() {
+            return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'grid' }];
+        }
+    }
+};
 </script>
diff --git a/components/deferredcontent/DeferredContent.d.ts b/components/deferredcontent/DeferredContent.d.ts
index a92ab34fa..072149384 100755
--- a/components/deferredcontent/DeferredContent.d.ts
+++ b/components/deferredcontent/DeferredContent.d.ts
@@ -1,8 +1,7 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface DeferredContentProps {
-}
+export interface DeferredContentProps {}
 
 export interface DeferredContentSlots {
     /**
@@ -15,14 +14,14 @@ export declare type DeferredContentEmits = {
     /**
      * Callback to invoke when deferred content is loaded.
      */
-    'load': () => void;
-}
+    load: () => void;
+};
 
-declare class DeferredContent extends ClassComponent<DeferredContentProps, DeferredContentSlots, DeferredContentEmits> { }
+declare class DeferredContent extends ClassComponent<DeferredContentProps, DeferredContentSlots, DeferredContentEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DeferredContent: GlobalComponentConstructor<DeferredContent>
+        DeferredContent: GlobalComponentConstructor<DeferredContent>;
     }
 }
 
@@ -32,7 +31,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DeferredContent](https://www.primefaces.org/primevue/showcase/#/deferredcontent)
+ * - [DeferredContent](https://www.primefaces.org/primevue/deferredcontent)
  *
  */
 export default DeferredContent;
diff --git a/components/deferredcontent/DeferredContent.spec.js b/components/deferredcontent/DeferredContent.spec.js
index 058256f33..4c3e79c43 100644
--- a/components/deferredcontent/DeferredContent.spec.js
+++ b/components/deferredcontent/DeferredContent.spec.js
@@ -12,4 +12,4 @@ describe('DeferredContent', () => {
         await wrapper.setData({ loaded: true });
         expect(wrapper.find('img').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/deferredcontent/DeferredContent.vue b/components/deferredcontent/DeferredContent.vue
index c238723a6..538d2de3a 100755
--- a/components/deferredcontent/DeferredContent.vue
+++ b/components/deferredcontent/DeferredContent.vue
@@ -11,14 +11,12 @@ export default {
     data() {
         return {
             loaded: false
-        }
+        };
     },
     mounted() {
         if (!this.loaded) {
-            if (this.shouldLoad())
-                this.load();
-            else
-                this.bindScrollListener();
+            if (this.shouldLoad()) this.load();
+            else this.bindScrollListener();
         }
     },
     beforeUnmount() {
@@ -44,13 +42,12 @@ export default {
         shouldLoad() {
             if (this.loaded) {
                 return false;
-            }
-            else {
+            } else {
                 const rect = this.$refs.container.getBoundingClientRect();
                 const docElement = document.documentElement;
                 const winHeight = docElement.clientHeight;
 
-                return (winHeight >= rect.top);
+                return winHeight >= rect.top;
             }
         },
         load(event) {
@@ -58,5 +55,5 @@ export default {
             this.$emit('load', event);
         }
     }
-}
+};
 </script>
diff --git a/components/dialog/Dialog.d.ts b/components/dialog/Dialog.d.ts
index 90ce69f66..da9ef79df 100755
--- a/components/dialog/Dialog.d.ts
+++ b/components/dialog/Dialog.d.ts
@@ -158,37 +158,37 @@ export declare type DialogEmits = {
     /**
      * Callback to invoke when dialog is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke after dialog is hidden.
-    */
+     */
     'after-hide': () => void;
     /**
      * Callback to invoke when dialog is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Fired when a dialog gets maximized.
      * @param {event} event - Browser event.
      */
-    'maximize': (event: Event) => void;
+    maximize: (event: Event) => void;
     /**
      * Fired when a dialog gets unmaximized.
      * @param {event} event - Browser event.
      */
-    'unmaximize': (event: Event) => void;
+    unmaximize: (event: Event) => void;
     /**
      * Fired when a dialog drag completes.
      * @param {event} event - Browser event.
      */
-    'dragend': (event: Event) => void;
-}
+    dragend: (event: Event) => void;
+};
 
-declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> { }
+declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Dialog: GlobalComponentConstructor<Dialog>
+        Dialog: GlobalComponentConstructor<Dialog>;
     }
 }
 
@@ -198,7 +198,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Dialog](https://www.primefaces.org/primevue/showcase/#/dialog)
+ * - [Dialog](https://www.primefaces.org/primevue/dialog)
  *
  */
 export default Dialog;
diff --git a/components/dialog/Dialog.spec.js b/components/dialog/Dialog.spec.js
index fc6cd874e..854e1ce4b 100644
--- a/components/dialog/Dialog.spec.js
+++ b/components/dialog/Dialog.spec.js
@@ -1,11 +1,11 @@
-import { mount } from '@vue/test-utils';
 import PrimeVue from '@/components/config/PrimeVue';
+import { mount } from '@vue/test-utils';
 import Dialog from './Dialog.vue';
 
 describe('Dialog.vue', () => {
-	it('is Dialog element exist', async() => {
-		const wrapper = mount(Dialog, {
-			global: {
+    it('is Dialog element exist', async () => {
+        const wrapper = mount(Dialog, {
+            global: {
                 plugins: [PrimeVue],
                 stubs: {
                     teleport: true
@@ -14,18 +14,18 @@ describe('Dialog.vue', () => {
             props: {
                 visible: false
             }
-		});
+        });
 
-		expect(wrapper.find('.p-dialog.p-component').exists()).toBe(false);
+        expect(wrapper.find('.p-dialog.p-component').exists()).toBe(false);
 
-		await wrapper.setProps({ visible: true });
+        await wrapper.setProps({ visible: true });
 
-		expect(wrapper.find('.p-dialog.p-component').exists()).toBe(true);
-	});
+        expect(wrapper.find('.p-dialog.p-component').exists()).toBe(true);
+    });
 
-	it('slot checks', async() => {
-		const wrapper = mount(Dialog, {
-			global: {
+    it('slot checks', async () => {
+        const wrapper = mount(Dialog, {
+            global: {
                 plugins: [PrimeVue],
                 stubs: {
                     teleport: true
@@ -34,13 +34,13 @@ describe('Dialog.vue', () => {
             props: {
                 visible: true
             },
-			slots: {
-				default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>',
-				footer: '<p>Dialog Footer</p>'
-			}
-		});
+            slots: {
+                default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>',
+                footer: '<p>Dialog Footer</p>'
+            }
+        });
 
-		expect(wrapper.find('.p-dialog-content').exists()).toBe(true);
-		expect(wrapper.find('.p-dialog-footer').exists()).toBe(true);
-	});
-});
\ No newline at end of file
+        expect(wrapper.find('.p-dialog-content').exists()).toBe(false);
+        expect(wrapper.find('.p-dialog-footer').exists()).toBe(false);
+    });
+});
diff --git a/components/dialog/Dialog.vue b/components/dialog/Dialog.vue
index e3e434a5f..f6756364d 100755
--- a/components/dialog/Dialog.vue
+++ b/components/dialog/Dialog.vue
@@ -1,17 +1,17 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
-                    <div class="p-dialog-header" v-if="showHeader" @mousedown="initDrag">
+                <div v-if="visible" :ref="containerRef" :class="dialogClass" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
+                    <div v-if="showHeader" class="p-dialog-header" @mousedown="initDrag">
                         <slot name="header">
-                            <span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
+                            <span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
                         </slot>
                         <div class="p-dialog-header-icons">
-                            <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
+                            <button v-if="maximizable" v-ripple class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" tabindex="-1">
                                 <span :class="maximizeIconClass"></span>
                             </button>
-                            <button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" v-ripple>
+                            <button v-if="closable" v-ripple class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" :aria-label="ariaCloseLabel" type="button">
                                 <span class="p-dialog-header-close-icon pi pi-times"></span>
                             </button>
                         </div>
@@ -19,8 +19,8 @@
                     <div :class="contentStyleClass" :style="contentStyle">
                         <slot></slot>
                     </div>
-                    <div class="p-dialog-footer" v-if="footer || $slots.footer">
-                        <slot name="footer">{{footer}}</slot>
+                    <div v-if="footer || $slots.footer" class="p-dialog-footer">
+                        <slot name="footer">{{ footer }}</slot>
                     </div>
                 </div>
             </transition>
@@ -30,14 +30,14 @@
 
 <script>
 import { computed } from 'vue';
-import { UniqueComponentId,DomHandler,ZIndexUtils } from 'primevue/utils';
+import { UniqueComponentId, DomHandler, ZIndexUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'Dialog',
     inheritAttrs: false,
-    emits: ['update:visible','show','hide', 'after-hide', 'maximize','unmaximize','dragend'],
+    emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
     props: {
         header: null,
         footer: null,
@@ -105,13 +105,13 @@ export default {
     provide() {
         return {
             dialogRef: computed(() => this._instance)
-        }
+        };
     },
     data() {
         return {
             containerVisible: this.visible,
             maximized: false
-        }
+        };
     },
     documentKeydownListener: null,
     container: null,
@@ -135,6 +135,7 @@ export default {
         if (this.mask && this.autoZIndex) {
             ZIndexUtils.clear(this.mask);
         }
+
         this.container = null;
         this.mask = null;
     },
@@ -172,6 +173,7 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.clear(this.mask);
             }
+
             this.containerVisible = false;
             this.unbindDocumentState();
             this.unbindGlobalListeners();
@@ -184,6 +186,7 @@ export default {
         },
         focus() {
             let focusTarget = this.container.querySelector('[autofocus]');
+
             if (focusTarget) {
                 focusTarget.focus();
             }
@@ -192,17 +195,14 @@ export default {
             if (this.maximized) {
                 this.maximized = false;
                 this.$emit('unmaximize', event);
-            }
-            else {
+            } else {
                 this.maximized = true;
                 this.$emit('maximize', event);
             }
 
             if (!this.modal) {
-                if (this.maximized)
-                    DomHandler.addClass(document.body, 'p-overflow-hidden');
-                else
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden');
+                else DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         enableDocumentSettings() {
@@ -219,23 +219,19 @@ export default {
             if (event.which === 9) {
                 event.preventDefault();
                 let focusableElements = DomHandler.getFocusableElements(this.container);
+
                 if (focusableElements && focusableElements.length > 0) {
                     if (!document.activeElement) {
                         focusableElements[0].focus();
-                    }
-                    else {
+                    } else {
                         let focusedIndex = focusableElements.indexOf(document.activeElement);
+
                         if (event.shiftKey) {
-                            if (focusedIndex == -1 || focusedIndex === 0)
-                                focusableElements[focusableElements.length - 1].focus();
-                            else
-                                focusableElements[focusedIndex - 1].focus();
-                        }
-                        else {
-                            if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
-                                focusableElements[0].focus();
-                            else
-                                focusableElements[focusedIndex + 1].focus();
+                            if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
+                            else focusableElements[focusedIndex - 1].focus();
+                        } else {
+                            if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
+                            else focusableElements[focusedIndex + 1].focus();
                         }
                     }
                 }
@@ -257,7 +253,7 @@ export default {
         },
         getPositionClass() {
             const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-            const pos = positions.find(item => item === this.position);
+            const pos = positions.find((item) => item === this.position);
 
             return pos ? `p-dialog-${pos}` : '';
         },
@@ -268,12 +264,13 @@ export default {
             this.mask = el;
         },
         createStyle() {
-			if (!this.styleElement) {
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -281,12 +278,12 @@ export default {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }
-                    `
+                    `;
                 }
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -337,24 +334,24 @@ export default {
                     this.container.style.position = 'fixed';
 
                     if (this.keepInViewport) {
-                        if (leftPos >= this.minX && (leftPos + width) < viewport.width) {
+                        if (leftPos >= this.minX && leftPos + width < viewport.width) {
                             this.lastPageX = event.pageX;
                             this.container.style.left = leftPos + 'px';
                         }
 
-                        if (topPos >= this.minY && (topPos + height) < viewport.height) {
+                        if (topPos >= this.minY && topPos + height < viewport.height) {
                             this.lastPageY = event.pageY;
                             this.container.style.top = topPos + 'px';
                         }
-                    }
-                    else {
+                    } else {
                         this.lastPageX = event.pageX;
                         this.container.style.left = leftPos + 'px';
                         this.lastPageY = event.pageY;
                         this.container.style.top = topPos + 'px';
                     }
                 }
-            }
+            };
+
             window.document.addEventListener('mousemove', this.documentDragListener);
         },
         unbindDocumentDragListener() {
@@ -372,6 +369,7 @@ export default {
                     this.$emit('dragend', event);
                 }
             };
+
             window.document.addEventListener('mouseup', this.documentDragEndListener);
         },
         unbindDocumentDragEndListener() {
@@ -383,21 +381,27 @@ export default {
     },
     computed: {
         maskClass() {
-            return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
+            return ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': this.modal }, this.getPositionClass()];
         },
         dialogClass() {
-            return ['p-dialog p-component', {
-                'p-dialog-rtl': this.rtl,
-                'p-dialog-maximized': this.maximizable && this.maximized,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-dialog p-component',
+                {
+                    'p-dialog-rtl': this.rtl,
+                    'p-dialog-maximized': this.maximizable && this.maximized,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         maximizeIconClass() {
-            return ['p-dialog-header-maximize-icon pi', {
-                'pi-window-maximize': !this.maximized,
-                'pi-window-minimize': this.maximized
-            }];
+            return [
+                'p-dialog-header-maximize-icon pi',
+                {
+                    'pi-window-maximize': !this.maximized,
+                    'pi-window-minimize': this.maximized
+                }
+            ];
         },
         ariaId() {
             return UniqueComponentId();
@@ -413,12 +417,12 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 <style>
 .p-dialog-mask {
@@ -484,7 +488,7 @@ export default {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 .p-dialog-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .p-dialog-enter-from,
 .p-dialog-leave-to {
@@ -501,7 +505,7 @@ export default {
 .p-dialog-topright .p-dialog,
 .p-dialog-bottomleft .p-dialog,
 .p-dialog-bottomright .p-dialog {
-    margin: .75rem;
+    margin: 0.75rem;
     transform: translate3d(0px, 0px, 0px);
 }
 .p-dialog-top .p-dialog-enter-active,
@@ -520,7 +524,7 @@ export default {
 .p-dialog-bottomleft .p-dialog-leave-active,
 .p-dialog-bottomright .p-dialog-enter-active,
 .p-dialog-bottomright .p-dialog-leave-active {
-    transition: all .3s ease-out;
+    transition: all 0.3s ease-out;
 }
 .p-dialog-top .p-dialog-enter-from,
 .p-dialog-top .p-dialog-leave-to {
diff --git a/components/dialogservice/DialogService.js b/components/dialogservice/DialogService.js
index 08e9d5d3e..21a84f47c 100644
--- a/components/dialogservice/DialogService.js
+++ b/components/dialogservice/DialogService.js
@@ -13,7 +13,7 @@ export default {
                     close: (params) => {
                         DynamicDialogEventBus.emit('close', { instance, params });
                     }
-                }
+                };
 
                 DynamicDialogEventBus.emit('open', { instance });
 
@@ -25,4 +25,4 @@ export default {
         app.config.globalProperties.$dialog = DialogService;
         app.provide(PrimeVueDialogSymbol, DialogService);
     }
-}
+};
diff --git a/components/divider/Divider.d.ts b/components/divider/Divider.d.ts
index 729fb6383..9cf9a305b 100644
--- a/components/divider/Divider.d.ts
+++ b/components/divider/Divider.d.ts
@@ -38,14 +38,13 @@ export interface DividerSlots {
     default: () => VNode[];
 }
 
-export declare type DividerEmits = {
-}
+export declare type DividerEmits = {};
 
-declare class Divider extends ClassComponent<DividerProps, DividerSlots, DividerEmits> { }
+declare class Divider extends ClassComponent<DividerProps, DividerSlots, DividerEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Divider: GlobalComponentConstructor<Divider>
+        Divider: GlobalComponentConstructor<Divider>;
     }
 }
 
@@ -55,7 +54,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Divider](https://www.primefaces.org/primevue/showcase/#/divider)
+ * - [Divider](https://www.primefaces.org/primevue/divider)
  *
  */
 export default Divider;
diff --git a/components/divider/Divider.spec.js b/components/divider/Divider.spec.js
index 4c0a1a98f..69bc4d205 100644
--- a/components/divider/Divider.spec.js
+++ b/components/divider/Divider.spec.js
@@ -4,7 +4,7 @@ import Divider from './Divider.vue';
 describe('Divider.vue', () => {
     it('should exist', () => {
         const wrapper = mount(Divider);
-        
+
         expect(wrapper.find('.p-divider.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-divider.p-component').classes()).toContain('p-divider-horizontal');
         expect(wrapper.find('.p-divider.p-component').classes()).toContain('p-divider-left');
@@ -18,9 +18,9 @@ describe('Divider.vue', () => {
                 type: 'dashed'
             }
         });
-        
+
         expect(wrapper.find('.p-divider-vertical').exists()).toBe(true);
         expect(wrapper.find('.p-divider-dashed').exists()).toBe(true);
         expect(wrapper.find('.p-divider-center').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/divider/Divider.vue b/components/divider/Divider.vue
index 481c0d0f4..0b06badb1 100644
--- a/components/divider/Divider.vue
+++ b/components/divider/Divider.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" role="separator">
-        <div class="p-divider-content" v-if="$slots.default">
+    <div :class="containerClass" role="separator" :aria-orientation="layout">
+        <div v-if="$slots.default" class="p-divider-content">
             <slot></slot>
         </div>
     </div>
@@ -25,17 +25,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type,
-                {'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left')},
-                {'p-divider-center': this.layout === 'horizontal' && this.align === 'center'},
-                {'p-divider-right': this.layout === 'horizontal' && this.align === 'right'},
-                {'p-divider-top': this.layout === 'vertical' && (this.align === 'top')},
-                {'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center')},
-                {'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'}
+            return [
+                'p-divider p-component',
+                'p-divider-' + this.layout,
+                'p-divider-' + this.type,
+                { 'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left') },
+                { 'p-divider-center': this.layout === 'horizontal' && this.align === 'center' },
+                { 'p-divider-right': this.layout === 'horizontal' && this.align === 'right' },
+                { 'p-divider-top': this.layout === 'vertical' && this.align === 'top' },
+                { 'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center') },
+                { 'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom' }
             ];
         }
     }
-}
+};
 </script>
 
 <style>
@@ -52,7 +55,7 @@ export default {
     top: 50%;
     left: 0;
     width: 100%;
-    content: "";
+    content: '';
 }
 
 .p-divider-horizontal.p-divider-left {
@@ -85,7 +88,7 @@ export default {
     top: 0;
     left: 50%;
     height: 100%;
-    content: "";
+    content: '';
 }
 
 .p-divider-vertical.p-divider-top {
diff --git a/components/dock/Dock.d.ts b/components/dock/Dock.d.ts
index 68a2ab705..09fa367c0 100644
--- a/components/dock/Dock.d.ts
+++ b/components/dock/Dock.d.ts
@@ -78,14 +78,13 @@ export interface DockSlots {
     }) => VNode[];
 }
 
-export declare type DockEmits = {
-}
+export declare type DockEmits = {};
 
-declare class Dock extends ClassComponent<DockProps, DockSlots, DockEmits> { }
+declare class Dock extends ClassComponent<DockProps, DockSlots, DockEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Dock: GlobalComponentConstructor<Dock>
+        Dock: GlobalComponentConstructor<Dock>;
     }
 }
 
@@ -95,11 +94,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Dock](https://www.primefaces.org/primevue/showcase/#/dock)
+ * - [Dock](https://www.primefaces.org/primevue/dock)
  *
  */
 export default Dock;
diff --git a/components/dock/Dock.vue b/components/dock/Dock.vue
index 1f41aa9b9..70af17bbd 100644
--- a/components/dock/Dock.vue
+++ b/components/dock/Dock.vue
@@ -12,7 +12,7 @@ export default {
     props: {
         position: {
             type: String,
-            default: "bottom"
+            default: 'bottom'
         },
         model: null,
         class: null,
@@ -31,7 +31,7 @@ export default {
     components: {
         DockSub
     }
-}
+};
 </script>
 
 <style>
@@ -59,7 +59,7 @@ export default {
 }
 
 .p-dock-item {
-    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform;
 }
 
diff --git a/components/dock/DockSub.vue b/components/dock/DockSub.vue
index 320e5ba0e..b61201f78 100644
--- a/components/dock/DockSub.vue
+++ b/components/dock/DockSub.vue
@@ -1,21 +1,35 @@
 <template>
     <div class="p-dock-list-container">
         <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
-            <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
+            <li v-for="(item, index) of model" :key="index" :class="itemClass(index)" role="none" @mouseenter="onItemMouseEnter(index)">
                 <template v-if="!templates['item']">
-                    <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"
-                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
+                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                        <a
+                            v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
+                            :href="href"
+                            role="menuitem"
+                            :class="linkClass(item, { isActive, isExactActive })"
+                            :target="item.target"
+                            @click="onItemClick($event, item, navigate)"
+                        >
                             <template v-if="!templates['icon']">
-                                <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+                                <span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
                             </template>
                             <component v-else :is="templates['icon']" :item="item"></component>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
+                    <a
+                        v-else
+                        v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
+                        :href="item.url"
+                        role="menuitem"
+                        :class="linkClass(item)"
+                        :target="item.target"
+                        @click="onItemClick($event, item)"
+                        :tabindex="disabled(item) ? null : '0'"
+                    >
                         <template v-if="!templates['icon']">
-                            <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+                            <span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
                         </template>
                         <component v-else :is="templates['icon']" :item="item"></component>
                     </a>
@@ -50,7 +64,7 @@ export default {
     data() {
         return {
             currentIndex: -3
-        }
+        };
     },
     methods: {
         onListMouseLeave() {
@@ -62,6 +76,7 @@ export default {
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -77,28 +92,34 @@ export default {
             }
         },
         itemClass(index) {
-            return ['p-dock-item', {
-                'p-dock-item-second-prev': (this.currentIndex - 2) === index,
-                'p-dock-item-prev': (this.currentIndex - 1) === index,
-                'p-dock-item-current': this.currentIndex === index,
-                'p-dock-item-next': (this.currentIndex + 1) === index,
-                'p-dock-item-second-next': (this.currentIndex + 2) === index
-            }];
+            return [
+                'p-dock-item',
+                {
+                    'p-dock-item-second-prev': this.currentIndex - 2 === index,
+                    'p-dock-item-prev': this.currentIndex - 1 === index,
+                    'p-dock-item-current': this.currentIndex === index,
+                    'p-dock-item-next': this.currentIndex + 1 === index,
+                    'p-dock-item-second-next': this.currentIndex + 2 === index
+                }
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-dock-action', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-dock-action',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         }
     },
     directives: {
-        'ripple': Ripple,
-        'tooltip': Tooltip
+        ripple: Ripple,
+        tooltip: Tooltip
     }
-}
+};
 </script>
diff --git a/components/dropdown/Dropdown.d.ts b/components/dropdown/Dropdown.d.ts
index adaf626b8..201f7452b 100755
--- a/components/dropdown/Dropdown.d.ts
+++ b/components/dropdown/Dropdown.d.ts
@@ -1,6 +1,6 @@
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
 
 type DropdownOptionLabelType = string | ((data: any) => string) | undefined;
 
@@ -168,6 +168,10 @@ export interface DropdownProps {
      * Default value is 'pi pi-spinner pi-spin'.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Clears the filter value when hiding the dropdown.
+     */
+    resetFilterOnHide?: boolean;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * @see VirtualScroller.VirtualScrollerProps
@@ -178,6 +182,16 @@ export interface DropdownProps {
      * Default value is true.
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * Whether to focus on the filter element when the overlay panel is shown.
+     * Default value is false.
+     */
+    autoFilterFocus?: boolean | undefined;
+    /**
+     * When enabled, the focused option is selected.
+     * Default value is false.
+     */
+    selectOnFocus?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * Default value is '{0} results are available'.
@@ -210,11 +224,11 @@ export interface DropdownProps {
     /**
      * Defines a string value that labels an interactive element.
      */
-    "aria-label"?: string | undefined;
+    'aria-label'?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface DropdownSlots {
@@ -347,17 +361,17 @@ export declare type DropdownEmits = {
      * Callback to invoke on value change.
      * @param {DropdownChangeEvent} event - Custom change event.
      */
-    'change': (event: DropdownChangeEvent) => void;
+    change: (event: DropdownChangeEvent) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -369,17 +383,17 @@ export declare type DropdownEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke on filter input.
      * @param {DropdownFilterEvent} event - Custom filter event.
      */
-    'filter': (event: DropdownFilterEvent) => void;
-}
+    filter: (event: DropdownFilterEvent) => void;
+};
 
 declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, DropdownEmits> {
     /**
@@ -400,7 +414,7 @@ declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, Drop
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Dropdown: GlobalComponentConstructor<Dropdown>
+        Dropdown: GlobalComponentConstructor<Dropdown>;
     }
 }
 
@@ -410,7 +424,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Dropdown](https://www.primefaces.org/primevue/showcase/#/dropdown)
+ * - [Dropdown](https://www.primefaces.org/primevue/dropdown)
  *
  */
 export default Dropdown;
diff --git a/components/dropdown/Dropdown.spec.js b/components/dropdown/Dropdown.spec.js
index 80d28dcdd..054f78ea7 100644
--- a/components/dropdown/Dropdown.spec.js
+++ b/components/dropdown/Dropdown.spec.js
@@ -4,7 +4,7 @@ import PrimeVue from '@/components/config/PrimeVue';
 import Dropdown from '@/components/dropdown/Dropdown.vue';
 
 describe('Dropdown.vue', () => {
-    let wrapper; 
+    let wrapper;
 
     beforeEach(async () => {
         wrapper = mount(Dropdown, {
@@ -26,13 +26,13 @@ describe('Dropdown.vue', () => {
         expect(wrapper.find('.p-focus').exists()).toBe(true);
         expect(wrapper.find('.p-inputwrapper-filled').exists()).toBe(false);
         expect(wrapper.find('.p-inputwrapper-focus').exists()).toBe(true);
-    })
+    });
 });
 
 describe('option checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -42,11 +42,11 @@ describe('option checks', () => {
             },
             props: {
                 options: [
-                    {name: 'New York', code: 'NY'},
-                    {name: 'Rome', code: 'RM'},
-                    {name: 'London', code: 'LDN'},
-                    {name: 'Istanbul', code: 'IST'},
-                    {name: 'Paris', code: 'PRS'}
+                    { name: 'New York', code: 'NY' },
+                    { name: 'Rome', code: 'RM' },
+                    { name: 'London', code: 'LDN' },
+                    { name: 'Istanbul', code: 'IST' },
+                    { name: 'Paris', code: 'PRS' }
                 ],
                 optionLabel: 'name',
                 optionValue: 'code',
@@ -69,7 +69,7 @@ describe('option checks', () => {
 describe('editable checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -79,11 +79,11 @@ describe('editable checks', () => {
             },
             props: {
                 options: [
-                    {name: 'New York', code: 'NY'},
-                    {name: 'Rome', code: 'RM'},
-                    {name: 'London', code: 'LDN'},
-                    {name: 'Istanbul', code: 'IST'},
-                    {name: 'Paris', code: 'PRS'}
+                    { name: 'New York', code: 'NY' },
+                    { name: 'Rome', code: 'RM' },
+                    { name: 'London', code: 'LDN' },
+                    { name: 'Istanbul', code: 'IST' },
+                    { name: 'Paris', code: 'PRS' }
                 ],
                 optionLabel: 'name',
                 optionValue: 'code',
@@ -104,7 +104,7 @@ describe('editable checks', () => {
 describe('option groups checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -115,30 +115,33 @@ describe('option groups checks', () => {
             props: {
                 options: [
                     {
-                        label: 'Germany', code: 'DE',
+                        label: 'Germany',
+                        code: 'DE',
                         items: [
-                            {label: 'Berlin', value: 'Berlin'},
-                            {label: 'Frankfurt', value: 'Frankfurt'},
-                            {label: 'Hamburg', value: 'Hamburg'},
-                            {label: 'Munich', value: 'Munich'}
+                            { label: 'Berlin', value: 'Berlin' },
+                            { label: 'Frankfurt', value: 'Frankfurt' },
+                            { label: 'Hamburg', value: 'Hamburg' },
+                            { label: 'Munich', value: 'Munich' }
                         ]
                     },
                     {
-                        label: 'USA', code: 'US',
+                        label: 'USA',
+                        code: 'US',
                         items: [
-                            {label: 'Chicago', value: 'Chicago'},
-                            {label: 'Los Angeles', value: 'Los Angeles'},
-                            {label: 'New York', value: 'New York'},
-                            {label: 'San Francisco', value: 'San Francisco'}
+                            { label: 'Chicago', value: 'Chicago' },
+                            { label: 'Los Angeles', value: 'Los Angeles' },
+                            { label: 'New York', value: 'New York' },
+                            { label: 'San Francisco', value: 'San Francisco' }
                         ]
                     },
                     {
-                        label: 'Japan', code: 'JP',
+                        label: 'Japan',
+                        code: 'JP',
                         items: [
-                            {label: 'Kyoto', value: 'Kyoto'},
-                            {label: 'Osaka', value: 'Osaka'},
-                            {label: 'Tokyo', value: 'Tokyo'},
-                            {label: 'Yokohama', value: 'Yokohama'}
+                            { label: 'Kyoto', value: 'Kyoto' },
+                            { label: 'Osaka', value: 'Osaka' },
+                            { label: 'Tokyo', value: 'Tokyo' },
+                            { label: 'Yokohama', value: 'Yokohama' }
                         ]
                     }
                 ],
@@ -160,7 +163,7 @@ describe('option groups checks', () => {
 describe('templating checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -169,21 +172,22 @@ describe('templating checks', () => {
                 }
             },
             slots: {
-                header: h('span', {class: 'header-slot'}, 'Header slot'),
-                footer: h('span', {class: 'footer-slot'}, 'Footer slot'),
-                option: h('span', {class: 'option-slot'}, 'Option slot'),
-                optiongroup: h('span', {class: 'optiongroup-slot'}, 'OptionGroup slot'),
-                emptyfilter: h('span', {class: 'emptyfilter-slot'}, 'Empty filter slot')
+                header: h('span', { class: 'header-slot' }, 'Header slot'),
+                footer: h('span', { class: 'footer-slot' }, 'Footer slot'),
+                option: h('span', { class: 'option-slot' }, 'Option slot'),
+                optiongroup: h('span', { class: 'optiongroup-slot' }, 'OptionGroup slot'),
+                emptyfilter: h('span', { class: 'emptyfilter-slot' }, 'Empty filter slot')
             },
             props: {
                 options: [
                     {
-                        label: 'Germany', code: 'DE',
+                        label: 'Germany',
+                        code: 'DE',
                         items: [
-                            {label: 'Berlin', value: 'Berlin'},
-                            {label: 'Frankfurt', value: 'Frankfurt'},
-                            {label: 'Hamburg', value: 'Hamburg'},
-                            {label: 'Munich', value: 'Munich'}
+                            { label: 'Berlin', value: 'Berlin' },
+                            { label: 'Frankfurt', value: 'Frankfurt' },
+                            { label: 'Hamburg', value: 'Hamburg' },
+                            { label: 'Munich', value: 'Munich' }
                         ]
                     }
                 ],
@@ -211,7 +215,7 @@ describe('templating checks', () => {
 describe('empty templating checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -241,7 +245,7 @@ describe('empty templating checks', () => {
 describe('loader checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -253,11 +257,11 @@ describe('loader checks', () => {
                 loading: true,
                 loadingIcon: 'pi pi-discord',
                 options: [
-                    {name: 'New York', code: 'NY'},
-                    {name: 'Rome', code: 'RM'},
-                    {name: 'London', code: 'LDN'},
-                    {name: 'Istanbul', code: 'IST'},
-                    {name: 'Paris', code: 'PRS'}
+                    { name: 'New York', code: 'NY' },
+                    { name: 'Rome', code: 'RM' },
+                    { name: 'London', code: 'LDN' },
+                    { name: 'Istanbul', code: 'IST' },
+                    { name: 'Paris', code: 'PRS' }
                 ],
                 optionLabel: 'name',
                 optionValue: 'code',
@@ -280,7 +284,7 @@ describe('loader checks', () => {
 describe('filter checks', () => {
     let wrapper;
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         wrapper = mount(Dropdown, {
             global: {
                 plugins: [PrimeVue],
@@ -291,16 +295,16 @@ describe('filter checks', () => {
             props: {
                 filter: true,
                 options: [
-                    {name: 'Australia', code: 'AU'},
-                    {name: 'Brazil', code: 'BR'},
-                    {name: 'China', code: 'CN'},
-                    {name: 'Egypt', code: 'EG'},
-                    {name: 'France', code: 'FR'},
-                    {name: 'Germany', code: 'DE'},
-                    {name: 'India', code: 'IN'},
-                    {name: 'Japan', code: 'JP'},
-                    {name: 'Spain', code: 'ES'},
-                    {name: 'United States', code: 'US'}
+                    { name: 'Australia', code: 'AU' },
+                    { name: 'Brazil', code: 'BR' },
+                    { name: 'China', code: 'CN' },
+                    { name: 'Egypt', code: 'EG' },
+                    { name: 'France', code: 'FR' },
+                    { name: 'Germany', code: 'DE' },
+                    { name: 'India', code: 'IN' },
+                    { name: 'Japan', code: 'JP' },
+                    { name: 'Spain', code: 'ES' },
+                    { name: 'United States', code: 'US' }
                 ],
                 optionLabel: 'name'
             }
@@ -311,18 +315,19 @@ describe('filter checks', () => {
 
     it('should make filtering', async () => {
         const filterInput = wrapper.find('.p-dropdown-filter');
+
         expect(filterInput.exists()).toBe(true);
 
-        const event = {'target':{'value':'c'}};
+        const event = { target: { value: 'c' } };
         const onFilterChange = jest.spyOn(wrapper.vm, 'onFilterChange');
 
         wrapper.vm.onFilterChange(event);
         await wrapper.vm.$nextTick();
-        
+
         expect(onFilterChange).toHaveBeenCalled();
 
-        await wrapper.setData({filterValue: 'c'});
+        await wrapper.setData({ filterValue: 'c' });
 
         expect(wrapper.findAll('.p-dropdown-item').length).toBe(2);
     });
-});
\ No newline at end of file
+});
diff --git a/components/dropdown/Dropdown.vue b/components/dropdown/Dropdown.vue
index 55e37ae96..9f7a944c2 100755
--- a/components/dropdown/Dropdown.vue
+++ b/components/dropdown/Dropdown.vue
@@ -1,12 +1,51 @@
 <template>
     <div ref="container" :id="id" :class="containerClass" @click="onContainerClick">
-        <input v-if="editable" ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputStyleClass" :value="editableInputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
-            role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
-            @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onEditableInput" v-bind="inputProps">
-        <span v-else ref="focusInput" :id="inputId" :style="inputStyle" :class="inputStyleClass" :tabindex="!disabled ? tabindex : -1" role="combobox" :aria-label="ariaLabel || (label === 'p-emptylabel' ? undefined : label)" :aria-labelledby="ariaLabelledby"
-            aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined" :aria-disabled="disabled"
-            @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps">
-            <slot name="value" :value="modelValue" :placeholder="placeholder">{{label === 'p-emptylabel' ? '&nbsp;' : label || 'empty'}}</slot>
+        <input
+            v-if="editable"
+            ref="focusInput"
+            :id="inputId"
+            type="text"
+            :style="inputStyle"
+            :class="inputStyleClass"
+            :value="editableInputValue"
+            :placeholder="placeholder"
+            :tabindex="!disabled ? tabindex : -1"
+            :disabled="disabled"
+            autocomplete="off"
+            role="combobox"
+            :aria-label="ariaLabel"
+            :aria-labelledby="ariaLabelledby"
+            aria-haspopup="listbox"
+            :aria-expanded="overlayVisible"
+            :aria-controls="id + '_list'"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeyDown"
+            @input="onEditableInput"
+            v-bind="inputProps"
+        />
+        <span
+            v-else
+            ref="focusInput"
+            :id="inputId"
+            :style="inputStyle"
+            :class="inputStyleClass"
+            :tabindex="!disabled ? tabindex : -1"
+            role="combobox"
+            :aria-label="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
+            :aria-labelledby="ariaLabelledby"
+            aria-haspopup="listbox"
+            :aria-expanded="overlayVisible"
+            :aria-controls="id + '_list'"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            :aria-disabled="disabled"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeyDown"
+            v-bind="inputProps"
+        >
+            <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
         <i v-if="showClear && modelValue != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick" v-bind="clearIconProps"></i>
         <div class="p-dropdown-trigger">
@@ -21,42 +60,66 @@
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="filter" class="p-dropdown-header">
                         <div class="p-dropdown-filter-container">
-                            <input type="text" ref="filterInput" :value="filterValue" @vnode-updated="onFilterUpdated" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder"
-                                role="searchbox" autocomplete="off" :aria-owns="id + '_list'" :aria-activedescendant="focusedOptionId"
-                                @keydown="onFilterKeyDown" @blur="onFilterBlur" @input="onFilterChange" v-bind="filterInputProps"/>
+                            <input
+                                ref="filterInput"
+                                type="text"
+                                :value="filterValue"
+                                @vnode-updated="onFilterUpdated"
+                                class="p-dropdown-filter p-inputtext p-component"
+                                :placeholder="filterPlaceholder"
+                                role="searchbox"
+                                autocomplete="off"
+                                :aria-owns="id + '_list'"
+                                :aria-activedescendant="focusedOptionId"
+                                @keydown="onFilterKeyDown"
+                                @blur="onFilterBlur"
+                                @input="onFilterChange"
+                                v-bind="filterInputProps"
+                            />
                             <span class="p-dropdown-filter-icon pi pi-search"></span>
                         </div>
                         <span role="status" aria-live="polite" class="p-hidden-accessible">
-                            {{filterResultMessageText}}
+                            {{ filterResultMessageText }}
                         </span>
                     </div>
-                    <div class="p-dropdown-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
-                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <div class="p-dropdown-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
+                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                                 <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-dropdown-item-group" role="option">
-                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-dropdown-item-group" role="option">
+                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
-                                        <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
-                                            :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
-                                            role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
-                                            @click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
-                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
+                                        <li
+                                            v-else
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            v-ripple
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            :class="['p-dropdown-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
+                                            role="option"
+                                            :aria-label="getOptionLabel(option)"
+                                            :aria-selected="isSelected(option)"
+                                            :aria-disabled="isOptionDisabled(option)"
+                                            :aria-setsize="ariaSetSize"
+                                            :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                            @click="onOptionSelect($event, option)"
+                                            @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                        >
+                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         </li>
                                     </template>
                                     <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-dropdown-empty-message" role="option">
-                                        <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
+                                        <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="(!options || (options && options.length === 0))" class="p-dropdown-empty-message" role="option">
-                                        <slot name="empty">{{emptyMessageText}}</slot>
+                                    <li v-else-if="!options || (options && options.length === 0)" class="p-dropdown-empty-message" role="option">
+                                        <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
-                                <span v-if="(!options || (options && options.length === 0))" role="status" aria-live="polite" class="p-hidden-accessible">
-                                    {{emptyMessageText}}
+                                <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                                    {{ emptyMessageText }}
                                 </span>
                                 <span role="status" aria-live="polite" class="p-hidden-accessible">
-                                    {{selectedMessageText}}
+                                    {{ selectedMessageText }}
                                 </span>
                             </template>
                             <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -73,9 +136,9 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, ObjectUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import {FilterService} from 'primevue/api';
+import { FilterService } from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import Portal from 'primevue/portal';
@@ -91,11 +154,11 @@ export default {
         optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
-		scrollHeight: {
-			type: String,
-			default: '200px'
-		},
-		filter: Boolean,
+        scrollHeight: {
+            type: String,
+            default: '200px'
+        },
+        filter: Boolean,
         filterPlaceholder: String,
         filterLocale: String,
         filterMatchMode: {
@@ -106,20 +169,56 @@ export default {
             type: Array,
             default: null
         },
-		editable: Boolean,
-		placeholder: String,
-		disabled: Boolean,
+        editable: Boolean,
+        placeholder: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
         dataKey: null,
-        showClear: Boolean,
-        inputId: String,
-        inputStyle: null,
-        inputClass: null,
-        inputProps: null,
-        panelStyle: null,
-        panelClass: null,
-        panelProps: null,
-        filterInputProps: null,
-        clearIconProps: null,
+        showClear: {
+            type: Boolean,
+            default: false
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
+        filterInputProps: {
+            type: null,
+            default: null
+        },
+        clearIconProps: {
+            type: null,
+            default: null
+        },
         appendTo: {
             type: String,
             default: 'body'
@@ -132,6 +231,10 @@ export default {
             type: String,
             default: 'pi pi-spinner pi-spin'
         },
+        resetFilterOnHide: {
+            type: Boolean,
+            default: false
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
@@ -140,6 +243,14 @@ export default {
             type: Boolean,
             default: true
         },
+        autoFilterFocus: {
+            type: Boolean,
+            default: false
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
         filterMessage: {
             type: String,
             default: null
@@ -182,16 +293,14 @@ export default {
     searchTimeout: null,
     searchValue: null,
     isModelValueChanged: false,
-    selectOnFocus: false,
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             filterValue: null,
             overlayVisible: false
-        }
+        };
     },
     watch: {
         modelValue() {
@@ -202,8 +311,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     updated() {
@@ -229,7 +336,7 @@ export default {
     },
     methods: {
         getOptionIndex(index, fn) {
-            return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
         },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
@@ -253,14 +360,14 @@ export default {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
         getAriaPosInset(index) {
-            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
         },
         show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
-            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             const _hide = () => {
@@ -269,10 +376,13 @@ export default {
                 this.focusedOptionIndex = -1;
                 this.searchValue = '';
 
-                isFocus && this.$refs.focusInput.focus();
-            }
+                this.resetFilterOnHide && (this.filterValue = null);
+                isFocus && DomHandler.focus(this.$refs.focusInput);
+            };
 
-            setTimeout(() => { _hide() }, 0); // For ScreenReaders
+            setTimeout(() => {
+                _hide();
+            }, 0); // For ScreenReaders
         },
         onFocus(event) {
             this.focused = true;
@@ -287,6 +397,8 @@ export default {
             this.$emit('blur', event);
         },
         onKeyDown(event) {
+            const metaKey = event.metaKey || event.ctrlKey;
+
             switch (event.code) {
                 case 'ArrowDown':
                     this.onArrowDownKey(event);
@@ -343,7 +455,7 @@ export default {
                     break;
 
                 default:
-                    if (ObjectUtils.isPrintableCharacter(event.key)) {
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
                         !this.overlayVisible && this.show();
                         !this.editable && this.searchOptions(event, event.key);
                     }
@@ -356,6 +468,7 @@ export default {
 
             this.searchValue = '';
             const matched = this.searchOptions(event, value);
+
             !matched && (this.focusedOptionIndex = -1);
 
             this.$emit('update:modelValue', value);
@@ -367,8 +480,7 @@ export default {
 
             if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
                 return;
-            }
-            else if (!this.overlay || !this.overlay.contains(event.target)) {
+            } else if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide(true) : this.show(true);
             }
         },
@@ -380,20 +492,20 @@ export default {
 
             if (relatedTarget === this.$refs.focusInput) {
                 const firstFocusableEl = DomHandler.getFirstFocusableElement(this.overlay, ':not(.p-hidden-focusable)');
-                firstFocusableEl && firstFocusableEl.focus();
-            }
-            else {
-                this.$refs.focusInput.focus();
+
+                DomHandler.focus(firstFocusableEl);
+            } else {
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onLastHiddenFocus() {
-            this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+            DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
         },
-        onOptionSelect(event, option) {
+        onOptionSelect(event, option, isHide = true) {
             const value = this.getOptionValue(option);
 
             this.updateModel(event, value);
-            this.hide(true);
+            isHide && this.hide(true);
         },
         onOptionMouseMove(event, index) {
             if (this.focusOnHover) {
@@ -488,8 +600,7 @@ export default {
 
                 this.overlayVisible && this.hide();
                 event.preventDefault();
-            }
-            else {
+            } else {
                 const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
@@ -505,8 +616,7 @@ export default {
             if (pressedInInputText) {
                 event.currentTarget.setSelectionRange(0, 0);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());
 
                 !this.overlayVisible && this.show();
@@ -518,10 +628,10 @@ export default {
             if (pressedInInputText) {
                 const target = event.currentTarget;
                 const len = target.value.length;
+
                 target.setSelectionRange(len, len);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 this.changeFocusedOptionIndex(event, this.findLastOptionIndex());
 
                 !this.overlayVisible && this.show();
@@ -540,8 +650,7 @@ export default {
         onEnterKey(event) {
             if (!this.overlayVisible) {
                 this.onArrowDownKey(event);
-            }
-            else {
+            } else {
                 if (this.focusedOptionIndex !== -1) {
                     this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
@@ -561,11 +670,10 @@ export default {
         onTabKey(event, pressedInInputText = false) {
             if (!pressedInInputText) {
                 if (this.overlayVisible && this.hasFocusableElements()) {
-                    this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+                    DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
 
                     event.preventDefault();
-                }
-                else {
+                } else {
                     if (this.focusedOptionIndex !== -1) {
                         this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                     }
@@ -583,6 +691,8 @@ export default {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
             this.scrollInView();
+
+            this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput);
         },
         onOverlayAfterEnter() {
             this.bindOutsideClickListener();
@@ -605,8 +715,7 @@ export default {
         alignOverlay() {
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$el);
             }
@@ -618,6 +727,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -650,6 +760,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -675,28 +786,32 @@ export default {
             return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
         findFirstOptionIndex() {
-            return this.visibleOptions.findIndex(option => this.isValidOption(option));
+            return this.visibleOptions.findIndex((option) => this.isValidOption(option));
         },
         findLastOptionIndex() {
-            return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+            return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
         },
         findNextOptionIndex(index) {
-            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
         findPrevOptionIndex(index) {
-            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         searchOptions(event, char) {
@@ -706,11 +821,10 @@ export default {
             let matched = false;
 
             if (this.focusedOptionIndex !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
-            }
-            else {
-                optionIndex = this.visibleOptions.findIndex(option => this.isOptionMatched(option));
+                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
+                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
+            } else {
+                optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
             }
 
             if (optionIndex !== -1) {
@@ -742,17 +856,17 @@ export default {
                 this.scrollInView();
 
                 if (this.selectOnFocus) {
-                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                    this.onOptionSelect(event, this.visibleOptions[index], false);
                 }
             }
         },
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
             const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-            }
-            else if (!this.virtualScrollerDisabled) {
+            } else if (!this.virtualScrollerDisabled) {
                 setTimeout(() => {
                     this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
                 }, 0);
@@ -761,8 +875,7 @@ export default {
         autoUpdateModel() {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
-                this.updateModel(null, value);
+                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
             }
         },
         updateModel(event, value) {
@@ -774,7 +887,8 @@ export default {
                 result.push({ optionGroup: option, group: true, index });
 
                 const optionGroupChildren = this.getOptionGroupChildren(option);
-                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
 
                 return result;
             }, []);
@@ -792,32 +906,43 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-dropdown p-component p-inputwrapper', {
-                'p-disabled': this.disabled,
-                'p-dropdown-clearable': this.showClear && !this.disabled,
-                'p-focus': this.focused,
-                'p-inputwrapper-filled': this.modelValue,
-                'p-inputwrapper-focus': this.focused || this.overlayVisible,
-                'p-overlay-open': this.overlayVisible
-            }];
+            return [
+                'p-dropdown p-component p-inputwrapper',
+                {
+                    'p-disabled': this.disabled,
+                    'p-dropdown-clearable': this.showClear && !this.disabled,
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': this.modelValue,
+                    'p-inputwrapper-focus': this.focused || this.overlayVisible,
+                    'p-overlay-open': this.overlayVisible
+                }
+            ];
         },
         inputStyleClass() {
-            return ['p-dropdown-label p-inputtext', this.inputClass, {
-                'p-placeholder': !this.editable && this.label === this.placeholder,
-                'p-dropdown-label-empty': !this.editable && !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
-            }];
+            return [
+                'p-dropdown-label p-inputtext',
+                this.inputClass,
+                {
+                    'p-placeholder': !this.editable && this.label === this.placeholder,
+                    'p-dropdown-label-empty': !this.editable && !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
+                }
+            ];
         },
         panelStyleClass() {
-            return ['p-dropdown-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-dropdown-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         dropdownIconClass() {
-            return ['p-dropdown-trigger-icon', (this.loading ? this.loadingIcon : 'pi pi-chevron-down')];
+            return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         },
         visibleOptions() {
-            const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);
+            const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
             return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
         },
@@ -826,11 +951,13 @@ export default {
         },
         label() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
-            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : (this.placeholder || 'p-emptylabel');
+
+            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
         },
         editableInputValue() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
-            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : (this.modelValue || '');
+
+            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.modelValue || '';
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
@@ -859,24 +986,27 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
         ariaSetSize() {
-            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+            return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller,
-        'Portal': Portal
+        VirtualScroller: VirtualScroller,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -890,7 +1020,7 @@ export default {
 .p-dropdown-clear-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-dropdown-trigger {
@@ -915,7 +1045,7 @@ export default {
     opacity: 0;
 }
 
-input.p-dropdown-label  {
+input.p-dropdown-label {
     cursor: default;
 }
 
@@ -962,7 +1092,7 @@ input.p-dropdown-label  {
 .p-dropdown-filter-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-fluid .p-dropdown {
diff --git a/components/dynamicdialog/DynamicDialog.d.ts b/components/dynamicdialog/DynamicDialog.d.ts
index d15d27ba6..e0ab9bbf6 100644
--- a/components/dynamicdialog/DynamicDialog.d.ts
+++ b/components/dynamicdialog/DynamicDialog.d.ts
@@ -2,15 +2,15 @@ import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface DynamicDialogProps {}
 
-export declare type DynamicDialogEmits = {}
+export declare type DynamicDialogEmits = {};
 
 export interface DynamicDialogSlots {}
 
-declare class DynamicDialog extends ClassComponent<DynamicDialogProps, DynamicDialogSlots, DynamicDialogEmits> { }
+declare class DynamicDialog extends ClassComponent<DynamicDialogProps, DynamicDialogSlots, DynamicDialogEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DynamicDialog: GlobalComponentConstructor<DynamicDialog>
+        DynamicDialog: GlobalComponentConstructor<DynamicDialog>;
     }
 }
 
@@ -20,7 +20,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DynamicDialog](https://www.primefaces.org/primevue/showcase/#/dynamicdialog)
+ * - [DynamicDialog](https://www.primefaces.org/primevue/dynamicdialog)
  *
  */
 export default DynamicDialog;
diff --git a/components/dynamicdialog/DynamicDialog.vue b/components/dynamicdialog/DynamicDialog.vue
index 7dbe4b40f..ee9491bf9 100644
--- a/components/dynamicdialog/DynamicDialog.vue
+++ b/components/dynamicdialog/DynamicDialog.vue
@@ -1,12 +1,12 @@
 <template>
     <template v-for="(instance, key) in instanceMap" :key="key">
-        <DDialog :_instance="instance" v-bind="instance.options.props" v-model:visible="instance.visible" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
-            <template #header v-if="instance.options.templates && instance.options.templates.header">
-                <component :is="header" v-for="(header, index) in getTemplateItems(instance.options.templates.header)" :key="index + '_header'"></component>
+        <DDialog v-model:visible="instance.visible" :_instance="instance" v-bind="instance.options.props" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
+            <template v-if="instance.options.templates && instance.options.templates.header" #header>
+                <component v-for="(header, index) in getTemplateItems(instance.options.templates.header)" :is="header" :key="index + '_header'"></component>
             </template>
             <component :is="instance.content"></component>
-            <template #footer v-if="instance.options.templates && instance.options.templates.footer">
-                <component :is="footer" v-for="(footer, index) in getTemplateItems(instance.options.templates.footer)" :key="index + '_footer'"></component>
+            <template v-if="instance.options.templates && instance.options.templates.footer" #footer>
+                <component v-for="(footer, index) in getTemplateItems(instance.options.templates.footer)" :is="footer" :key="index + '_footer'"></component>
             </template>
         </DDialog>
     </template>
@@ -23,7 +23,7 @@ export default {
     data() {
         return {
             instanceMap: {}
-        }
+        };
     },
     openListener: null,
     closeListener: null,
@@ -43,7 +43,7 @@ export default {
 
             if (currentInstance) {
                 currentInstance.visible = false;
-                currentInstance.options.onClose && currentInstance.options.onClose({ data: params,  type: 'config-close' });
+                currentInstance.options.onClose && currentInstance.options.onClose({ data: params, type: 'config-close' });
 
                 this.currentInstance = currentInstance;
             }
@@ -61,7 +61,7 @@ export default {
             !this.currentInstance && instance.options.onClose && instance.options.onClose({ type: 'dialog-close' });
         },
         onDialogAfterHide() {
-            this.currentInstance && (delete this.currentInstance);
+            this.currentInstance && delete this.currentInstance;
             this.currentInstance = null;
         },
         getTemplateItems(template) {
@@ -69,7 +69,7 @@ export default {
         }
     },
     components: {
-        'DDialog': Dialog
+        DDialog: Dialog
     }
-}
+};
 </script>
diff --git a/components/editor/Editor.d.ts b/components/editor/Editor.d.ts
index 30a4f23ab..5d1e70121 100755
--- a/components/editor/Editor.d.ts
+++ b/components/editor/Editor.d.ts
@@ -51,6 +51,13 @@ export interface EditorSelectionChangeEvent {
     instance: any;
 }
 
+export interface EditorLoadEvent {
+    /**
+     * Text editor instance.
+     */
+    instance: any;
+}
+
 export interface EditorProps {
     /**
      * Value of the content.
@@ -72,6 +79,10 @@ export interface EditorProps {
      * Inline style of the container.
      */
     editorStyle?: any;
+    /**
+     * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
+     */
+    modules?: any;
 }
 
 export interface EditorSlots {
@@ -97,13 +108,18 @@ export declare type EditorEmits = {
      * @param {EditorSelectionChangeEvent} event - Custom selection change event.
      */
     'selection-change': (event: EditorSelectionChangeEvent) => void;
-}
+    /**
+     * Callback to invoke when the quill modules are loaded.
+     * @param {EditorLoadEvent} event - Custom load event.
+     */
+    load: (event: EditorLoadEvent) => void;
+};
 
-declare class Editor extends ClassComponent<EditorProps, EditorSlots, EditorEmits> { }
+declare class Editor extends ClassComponent<EditorProps, EditorSlots, EditorEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Editor: GlobalComponentConstructor<Editor>
+        Editor: GlobalComponentConstructor<Editor>;
     }
 }
 
@@ -113,7 +129,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Editor](https://www.primefaces.org/primevue/showcase/#/editor)
+ * - [Editor](https://www.primefaces.org/primevue/editor)
  *
  */
 export default Editor;
diff --git a/components/editor/Editor.vue b/components/editor/Editor.vue
index 477817252..e35815b1b 100755
--- a/components/editor/Editor.vue
+++ b/components/editor/Editor.vue
@@ -48,17 +48,26 @@
 </template>
 
 <script>
-//import Quill from "quill";
+import { DomHandler } from 'primevue/utils';
+
+const QuillJS = (function () {
+    try {
+        return window.Quill;
+    } catch {
+        return null;
+    }
+})();
 
 export default {
     name: 'Editor',
-    emits: ['update:modelValue', 'text-change', 'selection-change'],
+    emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
     props: {
         modelValue: String,
         placeholder: String,
         readonly: Boolean,
         formats: Array,
-        editorStyle: null
+        editorStyle: null,
+        modules: null
     },
     quill: null,
     watch: {
@@ -69,65 +78,96 @@ export default {
         }
     },
     mounted() {
-        this.quill = new Quill(this.$refs.editorElement, {
+        const configuration = {
             modules: {
-                toolbar: this.$refs.toolbarElement
+                toolbar: this.$refs.toolbarElement,
+                ...this.modules
             },
             readOnly: this.readonly,
             theme: 'snow',
             formats: this.formats,
             placeholder: this.placeholder
-        });
+        };
 
-        this.renderValue(this.modelValue);
+        if (QuillJS) {
+            // Loaded by script only
+            this.quill = new QuillJS(this.$refs.editorElement, configuration);
+            this.initQuill();
+            this.handleLoad();
+        } else {
+            import('quill')
+                .then((module) => {
+                    if (module && DomHandler.isExist(this.$refs.editorElement)) {
+                        if (module.default) {
+                            // webpack
+                            this.quill = new module.default(this.$refs.editorElement, configuration);
+                        } else {
+                            // parceljs
+                            this.quill = new module(this.$refs.editorElement, configuration);
+                        }
 
-        this.quill.on('text-change', (delta, oldContents, source) => {
-            if (source === 'user') {
-                let html = this.$refs.editorElement.children[0].innerHTML;
-                let text = this.quill.getText().trim();
-                if (html === '<p><br></p>') {
-                    html = '';
-                }
-
-                this.$emit('update:modelValue', html);
-                this.$emit('text-change', {
-                    htmlValue: html,
-                    textValue: text,
-                    delta: delta,
-                    source: source,
-                    instance: this.quill
+                        this.initQuill();
+                    }
+                })
+                .then(() => {
+                    this.handleLoad();
                 });
-            }
-        });
-
-        this.quill.on('selection-change', (range, oldRange, source) => {
-            let html = this.$refs.editorElement.children[0].innerHTML;
-            let text = this.quill.getText().trim();
-            
-            this.$emit('selection-change', {
-                htmlValue: html,
-                textValue: text,
-                range: range,
-                oldRange: oldRange,
-                source: source,
-                instance: this.quill
-            })
-        });
-    },
-    methods: {
-        renderValue(value) {
-            if (this.quill) {
-                if (value)
-                    this.quill.pasteHTML(value);
-                else
-                    this.quill.setText('');
-            }
         }
     },
     beforeUnmount() {
         this.quill = null;
+    },
+    methods: {
+        renderValue(value) {
+            if (this.quill) {
+                if (value) this.quill.setContents(this.quill.clipboard.convert(value));
+                else this.quill.setText('');
+            }
+        },
+        initQuill() {
+            this.renderValue(this.modelValue);
+
+            this.quill.on('text-change', (delta, oldContents, source) => {
+                if (source === 'user') {
+                    let html = this.$refs.editorElement.children[0].innerHTML;
+                    let text = this.quill.getText().trim();
+
+                    if (html === '<p><br></p>') {
+                        html = '';
+                    }
+
+                    this.$emit('update:modelValue', html);
+                    this.$emit('text-change', {
+                        htmlValue: html,
+                        textValue: text,
+                        delta: delta,
+                        source: source,
+                        instance: this.quill
+                    });
+                }
+            });
+
+            this.quill.on('selection-change', (range, oldRange, source) => {
+                let html = this.$refs.editorElement.children[0].innerHTML;
+                let text = this.quill.getText().trim();
+
+                this.$emit('selection-change', {
+                    htmlValue: html,
+                    textValue: text,
+                    range: range,
+                    oldRange: oldRange,
+                    source: source,
+                    instance: this.quill
+                });
+            });
+        },
+        handleLoad() {
+            if (this.quill && this.quill.getModule('toolbar')) {
+                this.$emit('load', { instance: this.quill });
+            }
+        }
     }
-}
+};
 </script>
 
 <style>
@@ -138,45 +178,45 @@ export default {
  * Copyright (c) 2013, salesforce.com
  */
 .ql-container {
-  box-sizing: border-box;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  height: 100%;
-  margin: 0px;
-  position: relative;
+    box-sizing: border-box;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    height: 100%;
+    margin: 0px;
+    position: relative;
 }
 .ql-container.ql-disabled .ql-tooltip {
-  visibility: hidden;
+    visibility: hidden;
 }
 .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
-  pointer-events: none;
+    pointer-events: none;
 }
 .ql-clipboard {
-  left: -100000px;
-  height: 1px;
-  overflow-y: hidden;
-  position: absolute;
-  top: 50%;
+    left: -100000px;
+    height: 1px;
+    overflow-y: hidden;
+    position: absolute;
+    top: 50%;
 }
 .ql-clipboard p {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 .ql-editor {
-  box-sizing: border-box;
-  line-height: 1.42;
-  height: 100%;
-  outline: none;
-  overflow-y: auto;
-  padding: 12px 15px;
-  tab-size: 4;
-  -moz-tab-size: 4;
-  text-align: left;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+    box-sizing: border-box;
+    line-height: 1.42;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    padding: 12px 15px;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 .ql-editor > * {
-  cursor: text;
+    cursor: text;
 }
 .ql-editor p,
 .ql-editor ol,
@@ -189,374 +229,374 @@ export default {
 .ql-editor h4,
 .ql-editor h5,
 .ql-editor h6 {
-  margin: 0;
-  padding: 0;
-  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    margin: 0;
+    padding: 0;
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol,
 .ql-editor ul {
-  padding-left: 1.5rem;
+    padding-left: 1.5rem;
 }
 .ql-editor ol > li,
 .ql-editor ul > li {
-  list-style-type: none;
+    list-style-type: none;
 }
 .ql-editor ul > li::before {
-  content: '\2022';
+    content: '\2022';
 }
-.ql-editor ul[data-checked=true],
-.ql-editor ul[data-checked=false] {
-  pointer-events: none;
+.ql-editor ul[data-checked='true'],
+.ql-editor ul[data-checked='false'] {
+    pointer-events: none;
 }
-.ql-editor ul[data-checked=true] > li *,
-.ql-editor ul[data-checked=false] > li * {
-  pointer-events: all;
+.ql-editor ul[data-checked='true'] > li *,
+.ql-editor ul[data-checked='false'] > li * {
+    pointer-events: all;
 }
-.ql-editor ul[data-checked=true] > li::before,
-.ql-editor ul[data-checked=false] > li::before {
-  color: #777;
-  cursor: pointer;
-  pointer-events: all;
+.ql-editor ul[data-checked='true'] > li::before,
+.ql-editor ul[data-checked='false'] > li::before {
+    color: #777;
+    cursor: pointer;
+    pointer-events: all;
 }
-.ql-editor ul[data-checked=true] > li::before {
-  content: '\2611';
+.ql-editor ul[data-checked='true'] > li::before {
+    content: '\2611';
 }
-.ql-editor ul[data-checked=false] > li::before {
-  content: '\2610';
+.ql-editor ul[data-checked='false'] > li::before {
+    content: '\2610';
 }
 .ql-editor li::before {
-  display: inline-block;
-  white-space: nowrap;
-  width: 1.2rem;
+    display: inline-block;
+    white-space: nowrap;
+    width: 1.2rem;
 }
 .ql-editor li:not(.ql-direction-rtl)::before {
-  margin-left: -1.5rem;
-  margin-right: 0.3rem;
-  text-align: right;
+    margin-left: -1.5rem;
+    margin-right: 0.3rem;
+    text-align: right;
 }
 .ql-editor li.ql-direction-rtl::before {
-  margin-left: 0.3rem;
-  margin-right: -1.5rem;
+    margin-left: 0.3rem;
+    margin-right: -1.5rem;
 }
 .ql-editor ol li:not(.ql-direction-rtl),
 .ql-editor ul li:not(.ql-direction-rtl) {
-  padding-left: 1.5rem;
+    padding-left: 1.5rem;
 }
 .ql-editor ol li.ql-direction-rtl,
 .ql-editor ul li.ql-direction-rtl {
-  padding-right: 1.5rem;
+    padding-right: 1.5rem;
 }
 .ql-editor ol li {
-  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-  counter-increment: list-0;
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-increment: list-0;
 }
 .ql-editor ol li:before {
-  content: counter(list-0, decimal) '. ';
+    content: counter(list-0, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-1 {
-  counter-increment: list-1;
+    counter-increment: list-1;
 }
 .ql-editor ol li.ql-indent-1:before {
-  content: counter(list-1, lower-alpha) '. ';
+    content: counter(list-1, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-1 {
-  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-2 {
-  counter-increment: list-2;
+    counter-increment: list-2;
 }
 .ql-editor ol li.ql-indent-2:before {
-  content: counter(list-2, lower-roman) '. ';
+    content: counter(list-2, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-2 {
-  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-3 {
-  counter-increment: list-3;
+    counter-increment: list-3;
 }
 .ql-editor ol li.ql-indent-3:before {
-  content: counter(list-3, decimal) '. ';
+    content: counter(list-3, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-3 {
-  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-4 {
-  counter-increment: list-4;
+    counter-increment: list-4;
 }
 .ql-editor ol li.ql-indent-4:before {
-  content: counter(list-4, lower-alpha) '. ';
+    content: counter(list-4, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-4 {
-  counter-reset: list-5 list-6 list-7 list-8 list-9;
+    counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-5 {
-  counter-increment: list-5;
+    counter-increment: list-5;
 }
 .ql-editor ol li.ql-indent-5:before {
-  content: counter(list-5, lower-roman) '. ';
+    content: counter(list-5, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-5 {
-  counter-reset: list-6 list-7 list-8 list-9;
+    counter-reset: list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-6 {
-  counter-increment: list-6;
+    counter-increment: list-6;
 }
 .ql-editor ol li.ql-indent-6:before {
-  content: counter(list-6, decimal) '. ';
+    content: counter(list-6, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-6 {
-  counter-reset: list-7 list-8 list-9;
+    counter-reset: list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-7 {
-  counter-increment: list-7;
+    counter-increment: list-7;
 }
 .ql-editor ol li.ql-indent-7:before {
-  content: counter(list-7, lower-alpha) '. ';
+    content: counter(list-7, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-7 {
-  counter-reset: list-8 list-9;
+    counter-reset: list-8 list-9;
 }
 .ql-editor ol li.ql-indent-8 {
-  counter-increment: list-8;
+    counter-increment: list-8;
 }
 .ql-editor ol li.ql-indent-8:before {
-  content: counter(list-8, lower-roman) '. ';
+    content: counter(list-8, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-8 {
-  counter-reset: list-9;
+    counter-reset: list-9;
 }
 .ql-editor ol li.ql-indent-9 {
-  counter-increment: list-9;
+    counter-increment: list-9;
 }
 .ql-editor ol li.ql-indent-9:before {
-  content: counter(list-9, decimal) '. ';
+    content: counter(list-9, decimal) '. ';
 }
 .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
-  padding-left: 3rem;
+    padding-left: 3rem;
 }
 .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
-  padding-left: 4.5rem;
+    padding-left: 4.5rem;
 }
 .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
-  padding-right: 3rem;
+    padding-right: 3rem;
 }
 .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
-  padding-right: 4.5rem;
+    padding-right: 4.5rem;
 }
 .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
-  padding-left: 6rem;
+    padding-left: 6rem;
 }
 .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
-  padding-left: 7.5rem;
+    padding-left: 7.5rem;
 }
 .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
-  padding-right: 6rem;
+    padding-right: 6rem;
 }
 .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
-  padding-right: 7.5rem;
+    padding-right: 7.5rem;
 }
 .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
-  padding-left: 9rem;
+    padding-left: 9rem;
 }
 .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
-  padding-left: 10.5rem;
+    padding-left: 10.5rem;
 }
 .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
-  padding-right: 9rem;
+    padding-right: 9rem;
 }
 .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
-  padding-right: 10.5rem;
+    padding-right: 10.5rem;
 }
 .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
-  padding-left: 12rem;
+    padding-left: 12rem;
 }
 .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
-  padding-left: 13.5rem;
+    padding-left: 13.5rem;
 }
 .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
-  padding-right: 12rem;
+    padding-right: 12rem;
 }
 .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
-  padding-right: 13.5rem;
+    padding-right: 13.5rem;
 }
 .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
-  padding-left: 15rem;
+    padding-left: 15rem;
 }
 .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
-  padding-left: 16.5rem;
+    padding-left: 16.5rem;
 }
 .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
-  padding-right: 15rem;
+    padding-right: 15rem;
 }
 .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
-  padding-right: 16.5rem;
+    padding-right: 16.5rem;
 }
 .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
-  padding-left: 18rem;
+    padding-left: 18rem;
 }
 .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
-  padding-left: 19.5rem;
+    padding-left: 19.5rem;
 }
 .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
-  padding-right: 18rem;
+    padding-right: 18rem;
 }
 .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
-  padding-right: 19.5rem;
+    padding-right: 19.5rem;
 }
 .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
-  padding-left: 21rem;
+    padding-left: 21rem;
 }
 .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
-  padding-left: 22.5rem;
+    padding-left: 22.5rem;
 }
 .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
-  padding-right: 21rem;
+    padding-right: 21rem;
 }
 .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
-  padding-right: 22.5rem;
+    padding-right: 22.5rem;
 }
 .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
-  padding-left: 24rem;
+    padding-left: 24rem;
 }
 .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
-  padding-left: 25.5rem;
+    padding-left: 25.5rem;
 }
 .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
-  padding-right: 24rem;
+    padding-right: 24rem;
 }
 .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
-  padding-right: 25.5rem;
+    padding-right: 25.5rem;
 }
 .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
-  padding-left: 27rem;
+    padding-left: 27rem;
 }
 .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
-  padding-left: 28.5rem;
+    padding-left: 28.5rem;
 }
 .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
-  padding-right: 27rem;
+    padding-right: 27rem;
 }
 .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
-  padding-right: 28.5rem;
+    padding-right: 28.5rem;
 }
 .ql-editor .ql-video {
-  display: block;
-  max-width: 100%;
+    display: block;
+    max-width: 100%;
 }
 .ql-editor .ql-video.ql-align-center {
-  margin: 0 auto;
+    margin: 0 auto;
 }
 .ql-editor .ql-video.ql-align-right {
-  margin: 0 0 0 auto;
+    margin: 0 0 0 auto;
 }
 .ql-editor .ql-bg-black {
-  background-color: #000;
+    background-color: #000;
 }
 .ql-editor .ql-bg-red {
-  background-color: #e60000;
+    background-color: #e60000;
 }
 .ql-editor .ql-bg-orange {
-  background-color: #f90;
+    background-color: #f90;
 }
 .ql-editor .ql-bg-yellow {
-  background-color: #ff0;
+    background-color: #ff0;
 }
 .ql-editor .ql-bg-green {
-  background-color: #008a00;
+    background-color: #008a00;
 }
 .ql-editor .ql-bg-blue {
-  background-color: #06c;
+    background-color: #06c;
 }
 .ql-editor .ql-bg-purple {
-  background-color: #93f;
+    background-color: #93f;
 }
 .ql-editor .ql-color-white {
-  color: #fff;
+    color: #fff;
 }
 .ql-editor .ql-color-red {
-  color: #e60000;
+    color: #e60000;
 }
 .ql-editor .ql-color-orange {
-  color: #f90;
+    color: #f90;
 }
 .ql-editor .ql-color-yellow {
-  color: #ff0;
+    color: #ff0;
 }
 .ql-editor .ql-color-green {
-  color: #008a00;
+    color: #008a00;
 }
 .ql-editor .ql-color-blue {
-  color: #06c;
+    color: #06c;
 }
 .ql-editor .ql-color-purple {
-  color: #93f;
+    color: #93f;
 }
 .ql-editor .ql-font-serif {
-  font-family: Georgia, Times New Roman, serif;
+    font-family: Georgia, Times New Roman, serif;
 }
 .ql-editor .ql-font-monospace {
-  font-family: Monaco, Courier New, monospace;
+    font-family: Monaco, Courier New, monospace;
 }
 .ql-editor .ql-size-small {
-  font-size: 0.75rem;
+    font-size: 0.75rem;
 }
 .ql-editor .ql-size-large {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 .ql-editor .ql-size-huge {
-  font-size: 2.5rem;
+    font-size: 2.5rem;
 }
 .ql-editor .ql-direction-rtl {
-  direction: rtl;
-  text-align: inherit;
+    direction: rtl;
+    text-align: inherit;
 }
 .ql-editor .ql-align-center {
-  text-align: center;
+    text-align: center;
 }
 .ql-editor .ql-align-justify {
-  text-align: justify;
+    text-align: justify;
 }
 .ql-editor .ql-align-right {
-  text-align: right;
+    text-align: right;
 }
 .ql-editor.ql-blank::before {
-  color: rgba(0,0,0,0.6);
-  content: attr(data-placeholder);
-  font-style: italic;
-  left: 15px;
-  pointer-events: none;
-  position: absolute;
-  right: 15px;
+    color: rgba(0, 0, 0, 0.6);
+    content: attr(data-placeholder);
+    font-style: italic;
+    left: 15px;
+    pointer-events: none;
+    position: absolute;
+    right: 15px;
 }
 .ql-snow.ql-toolbar:after,
 .ql-snow .ql-toolbar:after {
-  clear: both;
-  content: '';
-  display: table;
+    clear: both;
+    content: '';
+    display: table;
 }
 .ql-snow.ql-toolbar button,
 .ql-snow .ql-toolbar button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  float: left;
-  height: 24px;
-  padding: 3px 5px;
-  width: 28px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    height: 24px;
+    padding: 3px 5px;
+    width: 28px;
 }
 .ql-snow.ql-toolbar button svg,
 .ql-snow .ql-toolbar button svg {
-  float: left;
-  height: 100%;
+    float: left;
+    height: 100%;
 }
 .ql-snow.ql-toolbar button:active:hover,
 .ql-snow .ql-toolbar button:active:hover {
-  outline: none;
+    outline: none;
 }
-.ql-snow.ql-toolbar input.ql-image[type=file],
-.ql-snow .ql-toolbar input.ql-image[type=file] {
-  display: none;
+.ql-snow.ql-toolbar input.ql-image[type='file'],
+.ql-snow .ql-toolbar input.ql-image[type='file'] {
+    display: none;
 }
 .ql-snow.ql-toolbar button:hover,
 .ql-snow .ql-toolbar button:hover,
@@ -572,7 +612,7 @@ export default {
 .ql-snow .ql-toolbar .ql-picker-item:hover,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #06c;
+    color: #06c;
 }
 .ql-snow.ql-toolbar button:hover .ql-fill,
 .ql-snow .ql-toolbar button:hover .ql-fill,
@@ -602,7 +642,7 @@ export default {
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
-  fill: #06c;
+    fill: #06c;
 }
 .ql-snow.ql-toolbar button:hover .ql-stroke,
 .ql-snow .ql-toolbar button:hover .ql-stroke,
@@ -632,239 +672,239 @@ export default {
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #06c;
+    stroke: #06c;
 }
 @media (pointer: coarse) {
-  .ql-snow.ql-toolbar button:hover:not(.ql-active),
-  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
-    color: #444;
-  }
-  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
-  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
-  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
-  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
-    fill: #444;
-  }
-  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
-  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
-    stroke: #444;
-  }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active),
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+        color: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+        fill: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+        stroke: #444;
+    }
 }
 .ql-snow {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 .ql-snow * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 .ql-snow .ql-hidden {
-  display: none;
+    display: none;
 }
 .ql-snow .ql-out-bottom,
 .ql-snow .ql-out-top {
-  visibility: hidden;
+    visibility: hidden;
 }
 .ql-snow .ql-tooltip {
-  position: absolute;
-  transform: translateY(10px);
+    position: absolute;
+    transform: translateY(10px);
 }
 .ql-snow .ql-tooltip a {
-  cursor: pointer;
-  text-decoration: none;
+    cursor: pointer;
+    text-decoration: none;
 }
 .ql-snow .ql-tooltip.ql-flip {
-  transform: translateY(-10px);
+    transform: translateY(-10px);
 }
 .ql-snow .ql-formats {
-  display: inline-block;
-  vertical-align: middle;
+    display: inline-block;
+    vertical-align: middle;
 }
 .ql-snow .ql-formats:after {
-  clear: both;
-  content: '';
-  display: table;
+    clear: both;
+    content: '';
+    display: table;
 }
 .ql-snow .ql-stroke {
-  fill: none;
-  stroke: #444;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
+    fill: none;
+    stroke: #444;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
 }
 .ql-snow .ql-stroke-miter {
-  fill: none;
-  stroke: #444;
-  stroke-miterlimit: 10;
-  stroke-width: 2;
+    fill: none;
+    stroke: #444;
+    stroke-miterlimit: 10;
+    stroke-width: 2;
 }
 .ql-snow .ql-fill,
 .ql-snow .ql-stroke.ql-fill {
-  fill: #444;
+    fill: #444;
 }
 .ql-snow .ql-empty {
-  fill: none;
+    fill: none;
 }
 .ql-snow .ql-even {
-  fill-rule: evenodd;
+    fill-rule: evenodd;
 }
 .ql-snow .ql-thin,
 .ql-snow .ql-stroke.ql-thin {
-  stroke-width: 1;
+    stroke-width: 1;
 }
 .ql-snow .ql-transparent {
-  opacity: 0.4;
+    opacity: 0.4;
 }
 .ql-snow .ql-direction svg:last-child {
-  display: none;
+    display: none;
 }
 .ql-snow .ql-direction.ql-active svg:last-child {
-  display: inline;
+    display: inline;
 }
 .ql-snow .ql-direction.ql-active svg:first-child {
-  display: none;
+    display: none;
 }
 .ql-snow .ql-editor h1 {
-  font-size: 2rem;
+    font-size: 2rem;
 }
 .ql-snow .ql-editor h2 {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 .ql-snow .ql-editor h3 {
-  font-size: 1.17rem;
+    font-size: 1.17rem;
 }
 .ql-snow .ql-editor h4 {
-  font-size: 1rem;
+    font-size: 1rem;
 }
 .ql-snow .ql-editor h5 {
-  font-size: 0.83rem;
+    font-size: 0.83rem;
 }
 .ql-snow .ql-editor h6 {
-  font-size: 0.67rem;
+    font-size: 0.67rem;
 }
 .ql-snow .ql-editor a {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 .ql-snow .ql-editor blockquote {
-  border-left: 4px solid #ccc;
-  margin-bottom: 5px;
-  margin-top: 5px;
-  padding-left: 16px;
+    border-left: 4px solid #ccc;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: 16px;
 }
 .ql-snow .ql-editor code,
 .ql-snow .ql-editor pre {
-  background-color: #f0f0f0;
-  border-radius: 3px;
+    background-color: #f0f0f0;
+    border-radius: 3px;
 }
 .ql-snow .ql-editor pre {
-  white-space: pre-wrap;
-  margin-bottom: 5px;
-  margin-top: 5px;
-  padding: 5px 10px;
+    white-space: pre-wrap;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 5px 10px;
 }
 .ql-snow .ql-editor code {
-  font-size: 85%;
-  padding: 2px 4px;
+    font-size: 85%;
+    padding: 2px 4px;
 }
 .ql-snow .ql-editor pre.ql-syntax {
-  background-color: #23241f;
-  color: #f8f8f2;
-  overflow: visible;
+    background-color: #23241f;
+    color: #f8f8f2;
+    overflow: visible;
 }
 .ql-snow .ql-editor img {
-  max-width: 100%;
+    max-width: 100%;
 }
 .ql-snow .ql-picker {
-  color: #444;
-  display: inline-block;
-  float: left;
-  font-size: 14px;
-  font-weight: 500;
-  height: 24px;
-  position: relative;
-  vertical-align: middle;
+    color: #444;
+    display: inline-block;
+    float: left;
+    font-size: 14px;
+    font-weight: 500;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
 }
 .ql-snow .ql-picker-label {
-  cursor: pointer;
-  display: inline-block;
-  height: 100%;
-  padding-left: 8px;
-  padding-right: 2px;
-  position: relative;
-  width: 100%;
+    cursor: pointer;
+    display: inline-block;
+    height: 100%;
+    padding-left: 8px;
+    padding-right: 2px;
+    position: relative;
+    width: 100%;
 }
 .ql-snow .ql-picker-label::before {
-  display: inline-block;
-  line-height: 22px;
+    display: inline-block;
+    line-height: 22px;
 }
 .ql-snow .ql-picker-options {
-  background-color: #fff;
-  display: none;
-  min-width: 100%;
-  padding: 4px 8px;
-  position: absolute;
-  white-space: nowrap;
+    background-color: #fff;
+    display: none;
+    min-width: 100%;
+    padding: 4px 8px;
+    position: absolute;
+    white-space: nowrap;
 }
 .ql-snow .ql-picker-options .ql-picker-item {
-  cursor: pointer;
-  display: block;
-  padding-bottom: 5px;
-  padding-top: 5px;
+    cursor: pointer;
+    display: block;
+    padding-bottom: 5px;
+    padding-top: 5px;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #ccc;
-  z-index: 2;
+    color: #ccc;
+    z-index: 2;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #ccc;
+    fill: #ccc;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #ccc;
+    stroke: #ccc;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  display: block;
-  margin-top: -1px;
-  top: 100%;
-  z-index: 1;
+    display: block;
+    margin-top: -1px;
+    top: 100%;
+    z-index: 1;
 }
 .ql-snow .ql-color-picker,
 .ql-snow .ql-icon-picker {
-  width: 28px;
+    width: 28px;
 }
 .ql-snow .ql-color-picker .ql-picker-label,
 .ql-snow .ql-icon-picker .ql-picker-label {
-  padding: 2px 4px;
+    padding: 2px 4px;
 }
 .ql-snow .ql-color-picker .ql-picker-label svg,
 .ql-snow .ql-icon-picker .ql-picker-label svg {
-  right: 4px;
+    right: 4px;
 }
 .ql-snow .ql-icon-picker .ql-picker-options {
-  padding: 4px 0px;
+    padding: 4px 0px;
 }
 .ql-snow .ql-icon-picker .ql-picker-item {
-  height: 24px;
-  width: 24px;
-  padding: 2px 4px;
+    height: 24px;
+    width: 24px;
+    padding: 2px 4px;
 }
 .ql-snow .ql-color-picker .ql-picker-options {
-  padding: 3px 5px;
-  width: 152px;
+    padding: 3px 5px;
+    width: 152px;
 }
 .ql-snow .ql-color-picker .ql-picker-item {
-  border: 1px solid transparent;
-  float: left;
-  height: 16px;
-  margin: 2px;
-  padding: 0px;
-  width: 16px;
+    border: 1px solid transparent;
+    float: left;
+    height: 16px;
+    margin: 2px;
+    padding: 0px;
+    width: 16px;
 }
 .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
-  position: absolute;
-  margin-top: -9px;
-  right: 0;
-  top: 50%;
-  width: 18px;
+    position: absolute;
+    margin-top: -9px;
+    right: 0;
+    top: 50%;
+    width: 18px;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
@@ -872,208 +912,208 @@ export default {
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
-  content: attr(data-label);
+    content: attr(data-label);
 }
 .ql-snow .ql-picker.ql-header {
-  width: 98px;
+    width: 98px;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-  content: 'Normal';
+    content: 'Normal';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-  content: 'Heading 1';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    content: 'Heading 1';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-  content: 'Heading 2';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    content: 'Heading 2';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-  content: 'Heading 3';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    content: 'Heading 3';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-  content: 'Heading 4';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    content: 'Heading 4';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-  content: 'Heading 5';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    content: 'Heading 5';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-  content: 'Heading 6';
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    content: 'Heading 6';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-  font-size: 2rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    font-size: 2rem;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-  font-size: 1.5rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    font-size: 1.5rem;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-  font-size: 1.17rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    font-size: 1.17rem;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-  font-size: 1rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    font-size: 1rem;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-  font-size: 0.83rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    font-size: 0.83rem;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-  font-size: 0.67rem;
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    font-size: 0.67rem;
 }
 .ql-snow .ql-picker.ql-font {
-  width: 108px;
+    width: 108px;
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-  content: 'Sans Serif';
+    content: 'Sans Serif';
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
-  content: 'Serif';
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    content: 'Serif';
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
-  content: 'Monospace';
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    content: 'Monospace';
 }
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
-  font-family: Georgia, Times New Roman, serif;
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    font-family: Georgia, Times New Roman, serif;
 }
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
-  font-family: Monaco, Courier New, monospace;
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    font-family: Monaco, Courier New, monospace;
 }
 .ql-snow .ql-picker.ql-size {
-  width: 98px;
+    width: 98px;
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-  content: 'Normal';
+    content: 'Normal';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
-  content: 'Small';
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    content: 'Small';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
-  content: 'Large';
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    content: 'Large';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
-  content: 'Huge';
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    content: 'Huge';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
-  font-size: 10px;
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    font-size: 10px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
-  font-size: 18px;
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    font-size: 18px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
-  font-size: 32px;
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    font-size: 32px;
 }
 .ql-snow .ql-color-picker.ql-background .ql-picker-item {
-  background-color: #fff;
+    background-color: #fff;
 }
 .ql-snow .ql-color-picker.ql-color .ql-picker-item {
-  background-color: #000;
+    background-color: #000;
 }
 .ql-toolbar.ql-snow {
-  border: 1px solid #ccc;
-  box-sizing: border-box;
-  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  padding: 8px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    padding: 8px;
 }
 .ql-toolbar.ql-snow .ql-formats {
-  margin-right: 15px;
+    margin-right: 15px;
 }
 .ql-toolbar.ql-snow .ql-picker-label {
-  border: 1px solid transparent;
+    border: 1px solid transparent;
 }
 .ql-toolbar.ql-snow .ql-picker-options {
-  border: 1px solid transparent;
-  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+    border: 1px solid transparent;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
 }
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  border-color: #ccc;
+    border-color: #ccc;
 }
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  border-color: #ccc;
+    border-color: #ccc;
 }
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
-  border-color: #000;
+    border-color: #000;
 }
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
-  border-top: 0px;
+    border-top: 0px;
 }
 .ql-snow .ql-tooltip {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  box-shadow: 0px 0px 5px #ddd;
-  color: #444;
-  padding: 5px 12px;
-  white-space: nowrap;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0px 0px 5px #ddd;
+    color: #444;
+    padding: 5px 12px;
+    white-space: nowrap;
 }
 .ql-snow .ql-tooltip::before {
-  content: "Visit URL:";
-  line-height: 26px;
-  margin-right: 8px;
+    content: 'Visit URL:';
+    line-height: 26px;
+    margin-right: 8px;
 }
-.ql-snow .ql-tooltip input[type=text] {
-  display: none;
-  border: 1px solid #ccc;
-  font-size: 13px;
-  height: 26px;
-  margin: 0px;
-  padding: 3px 5px;
-  width: 170px;
+.ql-snow .ql-tooltip input[type='text'] {
+    display: none;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    height: 26px;
+    margin: 0px;
+    padding: 3px 5px;
+    width: 170px;
 }
 .ql-snow .ql-tooltip a.ql-preview {
-  display: inline-block;
-  max-width: 200px;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
+    display: inline-block;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
 }
 .ql-snow .ql-tooltip a.ql-action::after {
-  border-right: 1px solid #ccc;
-  content: 'Edit';
-  margin-left: 16px;
-  padding-right: 8px;
+    border-right: 1px solid #ccc;
+    content: 'Edit';
+    margin-left: 16px;
+    padding-right: 8px;
 }
 .ql-snow .ql-tooltip a.ql-remove::before {
-  content: 'Remove';
-  margin-left: 8px;
+    content: 'Remove';
+    margin-left: 8px;
 }
 .ql-snow .ql-tooltip a {
-  line-height: 26px;
+    line-height: 26px;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-preview,
 .ql-snow .ql-tooltip.ql-editing a.ql-remove {
-  display: none;
+    display: none;
 }
-.ql-snow .ql-tooltip.ql-editing input[type=text] {
-  display: inline-block;
+.ql-snow .ql-tooltip.ql-editing input[type='text'] {
+    display: inline-block;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-  border-right: 0px;
-  content: 'Save';
-  padding-right: 0px;
+    border-right: 0px;
+    content: 'Save';
+    padding-right: 0px;
 }
-.ql-snow .ql-tooltip[data-mode=link]::before {
-  content: "Enter link:";
+.ql-snow .ql-tooltip[data-mode='link']::before {
+    content: 'Enter link:';
 }
-.ql-snow .ql-tooltip[data-mode=formula]::before {
-  content: "Enter formula:";
+.ql-snow .ql-tooltip[data-mode='formula']::before {
+    content: 'Enter formula:';
 }
-.ql-snow .ql-tooltip[data-mode=video]::before {
-  content: "Enter video:";
+.ql-snow .ql-tooltip[data-mode='video']::before {
+    content: 'Enter video:';
 }
 .ql-snow a {
-  color: #06c;
+    color: #06c;
 }
 .ql-container.ql-snow {
-  border: 1px solid #ccc;
+    border: 1px solid #ccc;
 }
 </style>
diff --git a/components/fieldset/Fieldset.d.ts b/components/fieldset/Fieldset.d.ts
index 486f0757f..adbf953a6 100755
--- a/components/fieldset/Fieldset.d.ts
+++ b/components/fieldset/Fieldset.d.ts
@@ -25,6 +25,10 @@ export interface FieldsetProps {
      * Defines the default visibility state of the content.
      */
     collapsed?: boolean | undefined;
+    /**
+     * Uses to pass the custom value to read for the anchor inside the component.
+     */
+    toggleButtonProps?: string | undefined;
 }
 
 export interface FieldsetSlots {
@@ -48,14 +52,14 @@ export declare type FieldsetEmits = {
      * Callback to invoke when a tab gets expanded or collapsed.
      * @param {FieldsetToggleEvent} event - Custom toggle event.
      */
-    'toggle': (event: FieldsetToggleEvent) => void;
-}
+    toggle: (event: FieldsetToggleEvent) => void;
+};
 
-declare class Fieldset extends ClassComponent<FieldsetProps, FieldsetSlots, FieldsetEmits> { }
+declare class Fieldset extends ClassComponent<FieldsetProps, FieldsetSlots, FieldsetEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Fieldset: GlobalComponentConstructor<Fieldset>
+        Fieldset: GlobalComponentConstructor<Fieldset>;
     }
 }
 
@@ -65,7 +69,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Fieldset](https://www.primefaces.org/primevue/showcase/#/fieldset)
+ * - [Fieldset](https://www.primefaces.org/primevue/fieldset)
  *
  */
 export default Fieldset;
diff --git a/components/fieldset/Fieldset.spec.js b/components/fieldset/Fieldset.spec.js
index 2a5c495c5..a1612f7eb 100644
--- a/components/fieldset/Fieldset.spec.js
+++ b/components/fieldset/Fieldset.spec.js
@@ -11,7 +11,7 @@ describe('Fieldset.vue', () => {
                 toggleable: true,
                 collapsed: true
             },
-            slots:  {
+            slots: {
                 default: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>`
             }
         });
@@ -28,4 +28,4 @@ describe('Fieldset.vue', () => {
         wrapper.vm.toggle({});
         expect(wrapper.emitted()['update:collapsed'][0]).toEqual([true]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/fieldset/Fieldset.vue b/components/fieldset/Fieldset.vue
index ca8feaa4a..6257f5153 100755
--- a/components/fieldset/Fieldset.vue
+++ b/components/fieldset/Fieldset.vue
@@ -1,20 +1,18 @@
 <template>
-    <fieldset :class="['p-fieldset p-component', {'p-fieldset-toggleable': toggleable}]">
+    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
         <legend class="p-fieldset-legend">
-            <slot name="legend" v-if="!toggleable">
-                <span class="p-fieldset-legend-text" :id="ariaId + '_header'">{{legend}}</span>
+            <slot v-if="!toggleable" name="legend">
+                <span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
             </slot>
-            <a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle" v-ripple
-                :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
+            <a v-if="toggleable" :id="ariaId + '_header'" v-ripple tabindex="0" role="button" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" :aria-label="toggleButtonProps || legend" @click="toggle" @keydown="onKeyDown">
                 <span :class="iconClass"></span>
                 <slot name="legend">
-                    <span class="p-fieldset-legend-text">{{legend}}</span>
+                    <span class="p-fieldset-legend-text">{{ legend }}</span>
                 </slot>
             </a>
         </legend>
         <transition name="p-toggleable-content">
-            <div class="p-toggleable-content" v-show="!d_collapsed"
-                role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
                 <div class="p-fieldset-content">
                     <slot></slot>
                 </div>
@@ -24,7 +22,7 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -33,12 +31,13 @@ export default {
     props: {
         legend: String,
         toggleable: Boolean,
-        collapsed: Boolean
+        collapsed: Boolean,
+        toggleButtonProps: String
     },
     data() {
         return {
-           d_collapsed: this.collapsed
-        }
+            d_collapsed: this.collapsed
+        };
     },
     watch: {
         collapsed(newValue) {
@@ -53,23 +52,32 @@ export default {
                 originalEvent: event,
                 value: this.d_collapsed
             });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
         }
     },
-	computed: {
-		iconClass() {
-			return ['p-fieldset-toggler pi ', {
-				'pi-minus': !this.d_collapsed,
-				'pi-plus': this.d_collapsed
-			}]
+    computed: {
+        iconClass() {
+            return [
+                'p-fieldset-toggler pi ',
+                {
+                    'pi-minus': !this.d_collapsed,
+                    'pi-plus': this.d_collapsed
+                }
+            ];
         },
         ariaId() {
             return UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/fileupload/FileUpload.d.ts b/components/fileupload/FileUpload.d.ts
index 24f3aef6c..8e3e4e105 100755
--- a/components/fileupload/FileUpload.d.ts
+++ b/components/fileupload/FileUpload.d.ts
@@ -212,7 +212,7 @@ export declare type FileUploadEmits = {
      * Callback to invoke when files are selected.
      * @param {FileUploadSelectEvent} event - Custom select event.
      */
-    'select': (event: FileUploadSelectEvent) => void;
+    select: (event: FileUploadSelectEvent) => void;
     /**
      * Callback to invoke before file upload begins to customize the request such as post parameters before the files.
      * @param {FileUploadBeforeUploadEvent} event - Custom before upload event.
@@ -222,22 +222,22 @@ export declare type FileUploadEmits = {
      * Callback to invoke when files are being uploaded.
      * @param {FileUploadProgressEvent} event - Custom progress event.
      */
-    'progress': (event: FileUploadProgressEvent) => void;
+    progress: (event: FileUploadProgressEvent) => void;
     /**
      * Callback to invoke when file upload is complete.
      * @param {FileUploadUploadEvent} event - Custom upload event.
      */
-    'upload': (event: FileUploadUploadEvent) => void;
+    upload: (event: FileUploadUploadEvent) => void;
     /**
      * Callback to invoke to implement a custom upload.
      * @param {FileUploadUploaderEvent} event - Custom uploader event.
      */
-    'uploader': (event: FileUploadUploaderEvent) => void;
+    uploader: (event: FileUploadUploaderEvent) => void;
     /**
      * Callback to invoke if file upload fails.
      * @param {FileUploadErrorEvent} event - Custom error event.
      */
-    'error': (event: FileUploadErrorEvent) => void;
+    error: (event: FileUploadErrorEvent) => void;
     /**
      * Callback to invoke before file send begins to customize the request such as adding headers.
      * @param {FileUploadBeforeSendEvent} event - Custom before send event.
@@ -246,19 +246,19 @@ export declare type FileUploadEmits = {
     /**
      * Callback to invoke when files in queue are removed without uploading.
      */
-    'clear': () => void;
+    clear: () => void;
     /**
      * Callback to invoke when a singe file is removed from the list.
      * @param {FileUploadRemoveEvent} event - Custom remove event.
      */
-    'remove': (event: FileUploadRemoveEvent) => void;
-}
+    remove: (event: FileUploadRemoveEvent) => void;
+};
 
-declare class FileUpload extends ClassComponent<FileUploadProps, FileUploadSlots, FileUploadEmits> { }
+declare class FileUpload extends ClassComponent<FileUploadProps, FileUploadSlots, FileUploadEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        FileUpload: GlobalComponentConstructor<FileUpload>
+        FileUpload: GlobalComponentConstructor<FileUpload>;
     }
 }
 
@@ -268,7 +268,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [FileUpload](https://www.primefaces.org/primevue/showcase/#/fileupload)
+ * - [FileUpload](https://www.primefaces.org/primevue/fileupload)
  *
  */
 export default FileUpload;
diff --git a/components/fileupload/FileUpload.vue b/components/fileupload/FileUpload.vue
index 5b9a500b0..e842971c7 100755
--- a/components/fileupload/FileUpload.vue
+++ b/components/fileupload/FileUpload.vue
@@ -1,40 +1,40 @@
 <template>
-    <div class="p-fileupload p-fileupload-advanced p-component" v-if="isAdvanced">
+    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component">
         <div class="p-fileupload-buttonbar">
-            <span :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0">
+            <span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
                 <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
                 <span :class="advancedChooseIconClass"></span>
-                <span class="p-button-label">{{chooseButtonLabel}}</span>
+                <span class="p-button-label">{{ chooseButtonLabel }}</span>
             </span>
-            <FileUploadButton :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" v-if="showUploadButton" />
-            <FileUploadButton :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" v-if="showCancelButton" />
+            <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" />
+            <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" />
         </div>
         <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
-            <FileUploadProgressBar :value="progress" v-if="hasFiles" />
-            <FileUploadMessage v-for="msg of messages" severity="error" :key="msg" @close="onMessageClose">{{msg}}</FileUploadMessage>
-            <div class="p-fileupload-files" v-if="hasFiles">
-                <div class="p-fileupload-row" v-for="(file, index) of files" :key="file.name + file.type + file.size">
+            <FileUploadProgressBar v-if="hasFiles" :value="progress" />
+            <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+            <div v-if="hasFiles" class="p-fileupload-files">
+                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-row">
                     <div>
                         <img v-if="isImage(file)" role="presentation" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
                     </div>
-                    <div class="p-fileupload-filename">{{file.name}}</div>
-                    <div>{{formatSize(file.size)}}</div>
+                    <div class="p-fileupload-filename">{{ file.name }}</div>
+                    <div>{{ formatSize(file.size) }}</div>
                     <div>
                         <FileUploadButton type="button" icon="pi pi-times" @click="remove(index)" />
                     </div>
                 </div>
             </div>
-            <div class="p-fileupload-empty" v-if="$slots.empty && !hasFiles">
+            <div v-if="$slots.empty && !hasFiles" class="p-fileupload-empty">
                 <slot name="empty"></slot>
             </div>
         </div>
     </div>
-    <div class="p-fileupload p-fileupload-basic p-component" v-else-if="isBasic">
-        <FileUploadMessage v-for="msg of messages" severity="error" :key="msg" @close="onMessageClose">{{msg}}</FileUploadMessage>
-        <span :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick"  @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
+    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component">
+        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
             <span :class="basicChooseButtonIconClass"></span>
-            <span class="p-button-label">{{basicChooseButtonLabel}}</span>
-            <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
+            <span class="p-button-label">{{ basicChooseButtonLabel }}</span>
+            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" />
         </span>
     </div>
 </template>
@@ -43,7 +43,7 @@
 import Button from 'primevue/button';
 import ProgressBar from 'primevue/progressbar';
 import Message from 'primevue/message';
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -62,10 +62,10 @@ export default {
             type: String,
             default: 'advanced'
         },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
+        multiple: {
+            type: Boolean,
+            default: false
+        },
         accept: {
             type: String,
             default: null
@@ -153,30 +153,33 @@ export default {
             messages: [],
             focused: false,
             progress: null
-        }
+        };
     },
     methods: {
         onFileSelect(event) {
             if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
                 this.duplicateIEEvent = false;
+
                 return;
             }
 
             this.messages = [];
             this.files = this.files || [];
             let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+
             for (let file of files) {
                 if (!this.isFileSelected(file)) {
                     if (this.validate(file)) {
                         if (this.isImage(file)) {
                             file.objectURL = window.URL.createObjectURL(file);
                         }
+
                         this.files.push(file);
                     }
                 }
             }
 
-            this.$emit('select', {originalEvent: event, files: this.files});
+            this.$emit('select', { originalEvent: event, files: this.files });
 
             if (this.fileLimit) {
                 this.checkFileLimit();
@@ -188,8 +191,7 @@ export default {
 
             if (event.type !== 'drop' && this.isIE11()) {
                 this.clearIEInput();
-            }
-            else {
+            } else {
                 this.clearInputElement();
             }
         },
@@ -202,16 +204,15 @@ export default {
                     this.uploadedFileCount += this.files.length;
                 }
 
-                this.$emit('uploader', {files: this.files});
-                this.clear()
-            }
-            else {
+                this.$emit('uploader', { files: this.files });
+                this.clear();
+            } else {
                 let xhr = new XMLHttpRequest();
                 let formData = new FormData();
 
                 this.$emit('before-upload', {
-                    'xhr': xhr,
-                    'formData': formData
+                    xhr: xhr,
+                    formData: formData
                 });
 
                 for (let file of this.files) {
@@ -242,8 +243,7 @@ export default {
                                 xhr: xhr,
                                 files: this.files
                             });
-                        }
-                        else {
+                        } else {
                             this.$emit('error', {
                                 xhr: xhr,
                                 files: this.files
@@ -257,8 +257,8 @@ export default {
                 xhr.open('POST', this.url, true);
 
                 this.$emit('before-send', {
-                    'xhr': xhr,
-                    'formData': formData
+                    xhr: xhr,
+                    formData: formData
                 });
 
                 xhr.withCredentials = this.withCredentials;
@@ -284,8 +284,7 @@ export default {
         isFileSelected(file) {
             if (this.files && this.files.length) {
                 for (let sFile of this.files) {
-                    if ((sFile.name + sFile.type + sFile.size) === (file.name + file.type + file.size))
-                        return true;
+                    if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) return true;
                 }
             }
 
@@ -296,22 +295,24 @@ export default {
         },
         validate(file) {
             if (this.accept && !this.isFileTypeValid(file)) {
-                this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept))
+                this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept));
+
                 return false;
             }
 
             if (this.maxFileSize && file.size > this.maxFileSize) {
                 this.messages.push(this.invalidFileSizeMessage.replace('{0}', file.name).replace('{1}', this.formatSize(this.maxFileSize)));
+
                 return false;
             }
 
             return true;
         },
         isFileTypeValid(file) {
-            let acceptableTypes = this.accept.split(',').map(type => type.trim());
-            for(let type of acceptableTypes) {
-                let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type)
-                    : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
+            let acceptableTypes = this.accept.split(',').map((type) => type.trim());
+
+            for (let type of acceptableTypes) {
+                let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type) : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
 
                 if (acceptable) {
                     return true;
@@ -323,7 +324,7 @@ export default {
         getTypeClass(fileType) {
             return fileType.substring(0, fileType.indexOf('/'));
         },
-        isWildcard(fileType){
+        isWildcard(fileType) {
             return fileType.indexOf('*') !== -1;
         },
         getFileExtension(file) {
@@ -365,14 +366,13 @@ export default {
             }
         },
         onBasicUploaderClick() {
-            if (this.hasFiles)
-                this.upload();
-            else
-                this.$refs.fileInput.click();
+            if (this.hasFiles) this.upload();
+            else this.$refs.fileInput.click();
         },
         remove(index) {
             this.clearInputElement();
             let removedFile = this.files.splice(index, 1)[0];
+
             this.files = [...this.files];
             this.$emit('remove', {
                 file: removedFile,
@@ -392,10 +392,11 @@ export default {
             if (bytes === 0) {
                 return '0 B';
             }
+
             let k = 1000,
-            dm = 3,
-            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-            i = Math.floor(Math.log(bytes) / Math.log(k));
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
 
             return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
         },
@@ -408,7 +409,7 @@ export default {
         },
         checkFileLimit() {
             if (this.isFileLimitExceeded()) {
-                this.messages.push(this.invalidFileLimitMessage.replace('{0}', this.fileLimit.toString()))
+                this.messages.push(this.invalidFileLimitMessage.replace('{0}', this.fileLimit.toString()));
             }
         },
         onMessageClose() {
@@ -423,29 +424,34 @@ export default {
             return this.mode === 'basic';
         },
         advancedChooseButtonClass() {
-            return ['p-button p-component p-fileupload-choose', this.class, {
+            return [
+                'p-button p-component p-fileupload-choose',
+                this.class,
+                {
                     'p-disabled': this.disabled,
                     'p-focus': this.focused
                 }
             ];
         },
         basicChooseButtonClass() {
-            return ['p-button p-component p-fileupload-choose', this.class, {
-                'p-fileupload-choose-selected': this.hasFiles,
-                'p-disabled': this.disabled,
-                'p-focus': this.focused
-            }];
+            return [
+                'p-button p-component p-fileupload-choose',
+                this.class,
+                {
+                    'p-fileupload-choose-selected': this.hasFiles,
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused
+                }
+            ];
         },
         advancedChooseIconClass() {
             return ['p-button-icon p-button-icon-left pi-fw', this.chooseIcon];
         },
         basicChooseButtonIconClass() {
-            return ['p-button-icon p-button-icon-left',
-                !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon
-            ];
+            return ['p-button-icon p-button-icon-left', !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon];
         },
         basicChooseButtonLabel() {
-            return this.auto ? this.chooseButtonLabel : (this.hasFiles ? this.files.map(f => f.name).join(', ') : this.chooseButtonLabel);
+            return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
         },
         hasFiles() {
             return this.files && this.files.length > 0;
@@ -470,14 +476,14 @@ export default {
         }
     },
     components: {
-        'FileUploadButton': Button,
-        'FileUploadProgressBar': ProgressBar,
-        'FileUploadMessage': Message
+        FileUploadButton: Button,
+        FileUploadProgressBar: ProgressBar,
+        FileUploadMessage: Message
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -511,11 +517,11 @@ export default {
     overflow: hidden;
 }
 
-.p-button.p-fileupload-choose input[type=file] {
+.p-button.p-fileupload-choose input[type='file'] {
     display: none;
 }
 
-.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {
+.p-fileupload-choose.p-fileupload-choose-selected input[type='file'] {
     display: none;
 }
 
diff --git a/components/fullcalendar/FullCalendar.d.ts b/components/fullcalendar/FullCalendar.d.ts
index cd70cdf1c..35b0a3d0b 100755
--- a/components/fullcalendar/FullCalendar.d.ts
+++ b/components/fullcalendar/FullCalendar.d.ts
@@ -5,17 +5,15 @@ export interface FullCalendarProps {
     options?: object;
 }
 
-export interface FullCalendarSlots {
-}
+export interface FullCalendarSlots {}
 
-export declare type FullCalendarEmits = {
-}
+export declare type FullCalendarEmits = {};
 
-declare class FullCalendar extends ClassComponent<FullCalendarProps, FullCalendarSlots, FullCalendarEmits> { }
+declare class FullCalendar extends ClassComponent<FullCalendarProps, FullCalendarSlots, FullCalendarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        FullCalendar: GlobalComponentConstructor<FullCalendar>
+        FullCalendar: GlobalComponentConstructor<FullCalendar>;
     }
 }
 
diff --git a/components/fullcalendar/FullCalendar.vue b/components/fullcalendar/FullCalendar.vue
index 39d5505e6..8aef3f7a6 100755
--- a/components/fullcalendar/FullCalendar.vue
+++ b/components/fullcalendar/FullCalendar.vue
@@ -48,6 +48,7 @@ export default {
         initialize() {
             let defaultConfig = { themeSystem: 'standard' };
             let config = this.options ? { ...this.options, ...defaultConfig } : defaultConfig;
+
             this.calendar = new Calendar(this.$el, config);
             this.calendar.render();
 
diff --git a/components/galleria/Galleria.d.ts b/components/galleria/Galleria.d.ts
index 5c65fd52d..8161429f6 100755
--- a/components/galleria/Galleria.d.ts
+++ b/components/galleria/Galleria.d.ts
@@ -188,13 +188,13 @@ export declare type GalleriaEmits = {
      * @param {boolean} value - New value.
      */
     'update:visible': (value: boolean) => void;
-}
+};
 
-declare class Galleria extends ClassComponent<GalleriaProps, GalleriaSlots, GalleriaEmits> { }
+declare class Galleria extends ClassComponent<GalleriaProps, GalleriaSlots, GalleriaEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Galleria: GlobalComponentConstructor<Galleria>
+        Galleria: GlobalComponentConstructor<Galleria>;
     }
 }
 
@@ -204,7 +204,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Galleria](https://www.primefaces.org/primevue/showcase/#/galleria)
+ * - [Galleria](https://www.primefaces.org/primevue/galleria)
  *
  */
 export default Galleria;
diff --git a/components/galleria/Galleria.spec.js b/components/galleria/Galleria.spec.js
index ba5e09539..7cc77052b 100644
--- a/components/galleria/Galleria.spec.js
+++ b/components/galleria/Galleria.spec.js
@@ -16,22 +16,22 @@ describe('Gallleria.vue', () => {
             props: {
                 value: [
                     {
-                        "itemImageSrc": "demo/images/galleria/galleria1.jpg",
-                        "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
-                        "alt": "Description for Image 1",
-                        "title": "Title 1"
+                        itemImageSrc: 'demo/images/galleria/galleria1.jpg',
+                        thumbnailImageSrc: 'demo/images/galleria/galleria1s.jpg',
+                        alt: 'Description for Image 1',
+                        title: 'Title 1'
                     },
                     {
-                        "itemImageSrc": "demo/images/galleria/galleria2.jpg",
-                        "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
-                        "alt": "Description for Image 2",
-                        "title": "Title 2"
+                        itemImageSrc: 'demo/images/galleria/galleria2.jpg',
+                        thumbnailImageSrc: 'demo/images/galleria/galleria2s.jpg',
+                        alt: 'Description for Image 2',
+                        title: 'Title 2'
                     },
                     {
-                        "itemImageSrc": "demo/images/galleria/galleria3.jpg",
-                        "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
-                        "alt": "Description for Image 3",
-                        "title": "Title 3"
+                        itemImageSrc: 'demo/images/galleria/galleria3.jpg',
+                        thumbnailImageSrc: 'demo/images/galleria/galleria3s.jpg',
+                        alt: 'Description for Image 3',
+                        title: 'Title 3'
                     }
                 ],
                 numVisible: 2
@@ -46,20 +46,19 @@ describe('Gallleria.vue', () => {
         });
     });
 
-    it('should exist',() =>  {
+    it('should exist', () => {
         expect(wrapper.find('.p-galleria.p-component').exists()).toBe(true);
         expect(wrapper.findAll('.p-galleria-item-container > .p-galleria-item').length).toBe(1);
         expect(wrapper.findAll('.p-galleria-thumbnail-item-active').length).toBe(2);
     });
 
-    it('should active item change', async() => {
+    it('should active item change', async () => {
         expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 1');
 
         wrapper.vm.onActiveItemChange(1);
-        await wrapper.setProps({activeIndex: 1});
+        await wrapper.setProps({ activeIndex: 1 });
 
         expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 2');
         expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([1]);
-
     });
-});
\ No newline at end of file
+});
diff --git a/components/galleria/Galleria.vue b/components/galleria/Galleria.vue
index cf320b8be..f9f3de6a1 100755
--- a/components/galleria/Galleria.vue
+++ b/components/galleria/Galleria.vue
@@ -2,7 +2,7 @@
     <Portal v-if="fullScreen">
         <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
             </transition>
         </div>
     </Portal>
@@ -11,7 +11,7 @@
 
 <script>
 import GalleriaContent from './GalleriaContent.vue';
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 import Portal from 'primevue/portal';
 
 export default {
@@ -23,7 +23,7 @@ export default {
             type: String,
             default: null
         },
-		value: {
+        value: {
             type: Array,
             default: null
         },
@@ -40,9 +40,9 @@ export default {
             default: false
         },
         numVisible: {
-			type: Number,
-			default: 3
-		},
+            type: Number,
+            default: 3
+        },
         responsiveOptions: {
             type: Array,
             default: null
@@ -72,21 +72,21 @@ export default {
             default: false
         },
         transitionInterval: {
-			type: Number,
-			default: 4000
-		},
+            type: Number,
+            default: 4000
+        },
         showThumbnails: {
             type: Boolean,
             default: true
         },
         thumbnailsPosition: {
-			type: String,
-			default: "bottom"
-		},
+            type: String,
+            default: 'bottom'
+        },
         verticalThumbnailViewPortHeight: {
-			type: String,
-			default: "300px"
-		},
+            type: String,
+            default: '300px'
+        },
         showIndicators: {
             type: Boolean,
             default: false
@@ -96,12 +96,12 @@ export default {
             default: false
         },
         indicatorsPosition: {
-			type: String,
-			default: "bottom"
-		},
+            type: String,
+            default: 'bottom'
+        },
         baseZIndex: {
-			type: Number,
-			default: 0
+            type: Number,
+            default: 0
         },
         maskClass: {
             type: String,
@@ -115,7 +115,7 @@ export default {
     data() {
         return {
             containerVisible: this.visible
-        }
+        };
     },
     updated() {
         if (this.fullScreen && this.visible) {
@@ -128,6 +128,7 @@ export default {
         }
 
         this.mask = null;
+
         if (this.container) {
             ZIndexUtils.clear(this.container);
             this.container = null;
@@ -166,17 +167,21 @@ export default {
     },
     computed: {
         maskContentClass() {
-            return ['p-galleria-mask p-component-overlay p-component-overlay-enter', this.maskClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-galleria-mask p-component-overlay p-component-overlay-enter',
+                this.maskClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'GalleriaContent': GalleriaContent,
-        'Portal': Portal
+        GalleriaContent: GalleriaContent,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -200,7 +205,7 @@ export default {
 .p-galleria-item-nav {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -230,7 +235,7 @@ export default {
 .p-galleria-item-nav-onhover .p-galleria-item-nav {
     pointer-events: none;
     opacity: 0;
-    transition: opacity .2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 }
 
 .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
@@ -295,12 +300,12 @@ export default {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .p-galleria-thumbnail-item:hover {
     opacity: 1;
-    transition: opacity .3s;
+    transition: opacity 0.3s;
 }
 
 .p-galleria-thumbnail-item-current {
@@ -432,7 +437,7 @@ export default {
 .p-galleria-mask .p-galleria-item-nav {
     position: fixed;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 /* Animation */
@@ -441,7 +446,7 @@ export default {
 }
 
 .p-galleria-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .p-galleria-enter-from,
diff --git a/components/galleria/GalleriaContent.vue b/components/galleria/GalleriaContent.vue
index 2455bbd71..90344f6f5 100755
--- a/components/galleria/GalleriaContent.vue
+++ b/components/galleria/GalleriaContent.vue
@@ -1,21 +1,41 @@
 <template>
-    <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
-        <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('mask-hide')" v-ripple>
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle">
+        <button v-if="$attrs.fullScreen" v-ripple type="button" class="p-galleria-close p-link" @click="$emit('mask-hide')">
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
             <component :is="$attrs.templates['header']" />
         </div>
         <div class="p-galleria-content">
-            <GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
-                :showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
-                :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" v-model:slideShowActive="slideShowActive"
-                @start-slideshow="startSlideShow" @stop-slideshow="stopSlideShow" />
+            <GalleriaItem
+                v-model:activeIndex="activeIndex"
+                v-model:slideShowActive="slideShowActive"
+                :value="$attrs.value"
+                :circular="$attrs.circular"
+                :templates="$attrs.templates"
+                :showIndicators="$attrs.showIndicators"
+                :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
+                :showItemNavigators="$attrs.showItemNavigators"
+                :autoPlay="$attrs.autoPlay"
+                @start-slideshow="startSlideShow"
+                @stop-slideshow="stopSlideShow"
+            />
 
-            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" v-model:activeIndex="activeIndex" :templates="$attrs.templates"
-                :numVisible="numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
-                :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
-                v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
+            <GalleriaThumbnails
+                v-if="$attrs.showThumbnails"
+                v-model:activeIndex="activeIndex"
+                v-model:slideShowActive="slideShowActive"
+                :containerId="id"
+                :value="$attrs.value"
+                :templates="$attrs.templates"
+                :numVisible="numVisible"
+                :responsiveOptions="$attrs.responsiveOptions"
+                :circular="$attrs.circular"
+                :isVertical="isVertical()"
+                :contentHeight="$attrs.verticalThumbnailViewPortHeight"
+                :showThumbnailNavigators="$attrs.showThumbnailNavigators"
+                @stop-slideshow="stopSlideShow"
+            />
         </div>
         <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
             <component :is="$attrs.templates['footer']" />
@@ -24,7 +44,7 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
 import GalleriaThumbnails from './GalleriaThumbnails.vue';
 import GalleriaItemSlot from './GalleriaItemSlot.vue';
@@ -41,18 +61,18 @@ export default {
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
-        }
+        };
     },
     watch: {
-        '$attrs.value': function(newVal) {
+        '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
                 this.numVisible = newVal.length;
             }
         },
-        '$attrs.activeIndex': function(newVal) {
+        '$attrs.activeIndex': function (newVal) {
             this.activeIndex = newVal;
         },
-        '$attrs.numVisible': function(newVal) {
+        '$attrs.numVisible': function (newVal) {
             this.numVisible = newVal;
         }
     },
@@ -60,17 +80,18 @@ export default {
         this.$emit('activeitem-change', this.activeIndex);
     },
     beforeUnmount() {
-		if (this.slideShowActive) {
-			this.stopSlideShow();
-		}
-	},
+        if (this.slideShowActive) {
+            this.stopSlideShow();
+        }
+    },
     methods: {
         isAutoPlayActive() {
             return this.slideShowActive;
         },
         startSlideShow() {
             this.interval = setInterval(() => {
-                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
+                let activeIndex = this.$attrs.circular && this.$attrs.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
+
                 this.activeIndex = activeIndex;
             }, this.$attrs.transitionInterval);
 
@@ -85,7 +106,7 @@ export default {
         },
         getPositionClass(preClassName, position) {
             const positions = ['top', 'left', 'bottom', 'right'];
-            const pos = positions.find(item => item === position);
+            const pos = positions.find((item) => item === position);
 
             return pos ? `${preClassName}-${pos}` : '';
         },
@@ -98,20 +119,26 @@ export default {
             const thumbnailsPosClass = this.$attrs.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.$attrs.thumbnailsPosition);
             const indicatorPosClass = this.$attrs.showIndicators && this.getPositionClass('p-galleria-indicators', this.$attrs.indicatorsPosition);
 
-            return ['p-galleria p-component', {
-                'p-galleria-fullscreen': this.$attrs.fullScreen,
-                'p-galleria-indicator-onitem': this.$attrs.showIndicatorsOnItem,
-                'p-galleria-item-nav-onhover': this.$attrs.showItemNavigatorsOnHover && !this.$attrs.fullScreen
-            }, thumbnailsPosClass, indicatorPosClass, this.$attrs.containerClass]
+            return [
+                'p-galleria p-component',
+                {
+                    'p-galleria-fullscreen': this.$attrs.fullScreen,
+                    'p-galleria-indicator-onitem': this.$attrs.showIndicatorsOnItem,
+                    'p-galleria-item-nav-onhover': this.$attrs.showItemNavigatorsOnHover && !this.$attrs.fullScreen
+                },
+                thumbnailsPosClass,
+                indicatorPosClass,
+                this.$attrs.containerClass
+            ];
         }
     },
     components: {
-        'GalleriaItem': GalleriaItem,
-        'GalleriaThumbnails': GalleriaThumbnails,
-        'GalleriaItemSlot': GalleriaItemSlot
+        GalleriaItem: GalleriaItem,
+        GalleriaThumbnails: GalleriaThumbnails,
+        GalleriaItemSlot: GalleriaItemSlot
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/galleria/GalleriaItem.vue b/components/galleria/GalleriaItem.vue
index 70d3b6d31..edc99e1cb 100755
--- a/components/galleria/GalleriaItem.vue
+++ b/components/galleria/GalleriaItem.vue
@@ -1,28 +1,34 @@
 <template>
-  <div class="p-galleria-item-wrapper">
-    <div class="p-galleria-item-container">
-        <button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
-            <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
-        </button>
-        <div class="p-galleria-item">
-            <component :is="templates.item" :item="activeItem" v-if="templates.item" />
-        </div>
-        <button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
-            <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
-        </button>
-        <div class="p-galleria-caption" v-if="templates['caption']">
-            <component :is="templates.caption" :item="activeItem" v-if="templates.caption" />
+    <div class="p-galleria-item-wrapper">
+        <div class="p-galleria-item-container">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+                <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
+            </button>
+            <div class="p-galleria-item">
+                <component v-if="templates.item" :is="templates.item" :item="activeItem" />
+            </div>
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+                <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
+            </button>
+            <div v-if="templates['caption']" class="p-galleria-caption">
+                <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
+            </div>
         </div>
+        <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
+            <li
+                v-for="(item, index) of value"
+                :key="`p-galleria-indicator-${index}`"
+                tabindex="0"
+                @click="onIndicatorClick(index)"
+                @mouseenter="onIndicatorMouseEnter(index)"
+                @keydown.enter="onIndicatorKeyDown(index)"
+                :class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
+            >
+                <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
+                <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
+            </li>
+        </ul>
     </div>
-    <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
-        <li v-for="(item, index) of value" :key="`p-galleria-indicator-${index}`" tabindex="0"
-            @click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
-            :class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]">
-            <button type="button" tabindex="-1" class="p-link" v-if="!templates['indicator']"></button>
-            <component :is="templates.indicator" :index="index" v-if="templates.indicator" />
-        </li>
-    </ul>
-  </div>
 </template>
 
 <script>
@@ -77,17 +83,13 @@ export default {
     methods: {
         next() {
             let nextItemIndex = this.activeIndex + 1;
-            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
-                        ? 0
-                        : nextItemIndex;
+            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;
 
             this.$emit('update:activeIndex', activeIndex);
         },
         prev() {
             let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
-            let activeIndex = this.circular && this.activeIndex === 0
-                    ? this.value.length - 1
-                    : prevItemIndex
+            let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
 
             this.$emit('update:activeIndex', activeIndex);
         },
@@ -135,7 +137,7 @@ export default {
             return !this.circular && this.activeIndex === 0;
         },
         isNavForwardDisabled() {
-            return !this.circular && this.activeIndex === (this.value.length - 1);
+            return !this.circular && this.activeIndex === this.value.length - 1;
         }
     },
     computed: {
@@ -143,18 +145,24 @@ export default {
             return this.value[this.activeIndex];
         },
         navBackwardClass() {
-            return ['p-galleria-item-prev p-galleria-item-nav p-link', {
-                'p-disabled': this.isNavBackwardDisabled()
-            }];
+            return [
+                'p-galleria-item-prev p-galleria-item-nav p-link',
+                {
+                    'p-disabled': this.isNavBackwardDisabled()
+                }
+            ];
         },
         navForwardClass() {
-            return ['p-galleria-item-next p-galleria-item-nav p-link', {
-                'p-disabled': this.isNavForwardDisabled()
-            }];
+            return [
+                'p-galleria-item-next p-galleria-item-nav p-link',
+                {
+                    'p-disabled': this.isNavForwardDisabled()
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 </script>
diff --git a/components/galleria/GalleriaItemSlot.vue b/components/galleria/GalleriaItemSlot.vue
index 2057bed24..62d4ae4e4 100755
--- a/components/galleria/GalleriaItemSlot.vue
+++ b/components/galleria/GalleriaItemSlot.vue
@@ -25,6 +25,7 @@ export default {
 
         if (template) {
             let content;
+
             switch (type) {
                 case 'item':
                 case 'caption':
@@ -48,5 +49,5 @@ export default {
 
         return null;
     }
-}
+};
 </script>
diff --git a/components/galleria/GalleriaThumbnails.vue b/components/galleria/GalleriaThumbnails.vue
index 6bcbc0c36..7fbccec2f 100755
--- a/components/galleria/GalleriaThumbnails.vue
+++ b/components/galleria/GalleriaThumbnails.vue
@@ -1,24 +1,31 @@
 <template>
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button">
                 <span :class="navBackwardIconClass"></span>
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{'height': isVertical ? contentHeight : ''}">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd"
-                    @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
-                    <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
-                        'p-galleria-thumbnail-item-current': activeIndex === index,
-                        'p-galleria-thumbnail-item-active': isItemActive(index),
-                        'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                        'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
+                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                    <div
+                        v-for="(item, index) of value"
+                        :key="`p-galleria-thumbnail-item-${index}`"
+                        :class="[
+                            'p-galleria-thumbnail-item',
+                            {
+                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
+                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
+                            }
+                        ]"
+                    >
                         <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
-                             <component :is="templates.thumbnail" :item="item" v-if="templates.thumbnail" />
+                            <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button">
                 <span :class="navForwardIconClass"></span>
             </button>
         </div>
@@ -26,7 +33,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -35,7 +42,7 @@ export default {
     props: {
         containerId: {
             type: String,
-            default: null,
+            default: null
         },
         value: {
             type: Array,
@@ -67,7 +74,7 @@ export default {
         },
         contentHeight: {
             type: String,
-            default: "300px"
+            default: '300px'
         },
         showThumbnailNavigators: {
             type: Boolean,
@@ -89,25 +96,25 @@ export default {
             d_oldActiveItemIndex: this.activeIndex,
             totalShiftedItems: 0,
             page: 0
-        }
+        };
     },
     watch: {
         numVisible(newValue, oldValue) {
-			this.d_numVisible = newValue;
-			this.d_oldNumVisible = oldValue;
+            this.d_numVisible = newValue;
+            this.d_oldNumVisible = oldValue;
         },
         activeIndex(newValue, oldValue) {
-			this.d_activeIndex = newValue;
-			this.d_oldActiveItemIndex = oldValue;
+            this.d_activeIndex = newValue;
+            this.d_oldActiveItemIndex = oldValue;
         }
     },
     mounted() {
-		this.createStyle();
-		this.calculatePosition();
+        this.createStyle();
+        this.calculatePosition();
 
-		if (this.responsiveOptions) {
-			this.bindDocumentListeners();
-		}
+        if (this.responsiveOptions) {
+            this.bindDocumentListeners();
+        }
     },
     updated() {
         let totalShiftedItems = this.totalShiftedItems;
@@ -115,22 +122,19 @@ export default {
         if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
             if (this.d_activeIndex <= this.getMedianItemIndex()) {
                 totalShiftedItems = 0;
-            }
-            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
+            } else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
-            }
-            else {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
+            } else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex() + 1;
+            } else {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex();
             }
 
             if (totalShiftedItems !== this.totalShiftedItems) {
                 this.totalShiftedItems = totalShiftedItems;
             }
 
-            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
 
             if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
@@ -142,37 +146,35 @@ export default {
         }
     },
     beforeUnmount() {
-		if (this.responsiveOptions) {
-			this.unbindDocumentListeners();
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
         }
 
         if (this.thumbnailsStyle) {
             this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
         }
-	},
+    },
     methods: {
         step(dir) {
             let totalShiftedItems = this.totalShiftedItems + dir;
 
-            if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
+            if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (dir > 0 && totalShiftedItems > 0) {
+            } else if (dir > 0 && totalShiftedItems > 0) {
                 totalShiftedItems = 0;
             }
 
             if (this.circular) {
                 if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
                     totalShiftedItems = 0;
-                }
-                else if (dir > 0 && this.d_activeIndex === 0) {
+                } else if (dir > 0 && this.d_activeIndex === 0) {
                     totalShiftedItems = this.d_numVisible - this.value.length;
                 }
             }
 
             if (this.$refs.itemsContainer) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
-                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
                 this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
             }
 
@@ -186,18 +188,20 @@ export default {
         getMedianItemIndex() {
             let index = Math.floor(this.d_numVisible / 2);
 
-            return (this.d_numVisible % 2) ? index : index - 1;
+            return this.d_numVisible % 2 ? index : index - 1;
         },
         navBackward(e) {
             this.stopSlideShow();
 
             let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
             let diff = prevItemIndex + this.totalShiftedItems;
-            if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
+
+            if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
                 this.step(1);
             }
 
             let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -208,11 +212,13 @@ export default {
             this.stopSlideShow();
 
             let nextItemIndex = this.d_activeIndex + 1;
-            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
+
+            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
                 this.step(-1);
             }
 
-            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
+            let activeIndex = this.circular && this.value.length - 1 === this.d_activeIndex ? 0 : nextItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -223,18 +229,21 @@ export default {
             this.stopSlideShow();
 
             let selectedItemIndex = index;
+
             if (selectedItemIndex !== this.d_activeIndex) {
                 const diff = selectedItemIndex + this.totalShiftedItems;
                 let dir = 0;
+
                 if (selectedItemIndex < this.d_activeIndex) {
-                    dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
-                    if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
+                    dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
+
+                    if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
                         this.step(dir);
                     }
-                }
-                else {
+                } else {
                     dir = this.getMedianItemIndex() - diff;
-                    if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
+
+                    if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
                         this.step(dir);
                     }
                 }
@@ -265,22 +274,22 @@ export default {
             let touchobj = e.changedTouches[0];
 
             if (this.isVertical) {
-                this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-            }
-            else {
-                this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+            } else {
+                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
             }
         },
         changePageOnTouch(e, diff) {
-            if (diff < 0) {           // left
+            if (diff < 0) {
+                // left
                 this.navForward(e);
-            }
-            else {                    // right
+            } else {
+                // right
                 this.navBackward(e);
             }
         },
         getTotalPageNumber() {
-            return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
+            return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
         },
         createStyle() {
             if (!this.thumbnailsStyle) {
@@ -291,7 +300,7 @@ export default {
 
             let innerHTML = `
                 #${this.containerId} .p-galleria-thumbnail-item {
-                    flex: 1 0 ${ (100/ this.d_numVisible) }%
+                    flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;
 
@@ -302,16 +311,11 @@ export default {
                     const value2 = data2.breakpoint;
                     let result = null;
 
-                    if (value1 == null && value2 != null)
-                        result = -1;
-                    else if (value1 != null && value2 == null)
-                        result = 1;
-                    else if (value1 == null && value2 == null)
-                        result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string')
-                        result = value1.localeCompare(value2, undefined, { numeric: true });
-                    else
-                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                    if (value1 == null && value2 != null) result = -1;
+                    else if (value1 != null && value2 == null) result = 1;
+                    else if (value1 == null && value2 == null) result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return -1 * result;
                 });
@@ -322,10 +326,10 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${res.breakpoint}) {
                             #${this.containerId} .p-galleria-thumbnail-item {
-                                flex: 1 0 ${ (100/ res.numVisible) }%
+                                flex: 1 0 ${100 / res.numVisible}%
                             }
                         }
-                    `
+                    `;
                 }
             }
 
@@ -361,16 +365,16 @@ export default {
             }
         },
         unbindDocumentListeners() {
-            if(this.documentResizeListener) {
+            if (this.documentResizeListener) {
                 window.removeEventListener('resize', this.documentResizeListener);
                 this.documentResizeListener = null;
             }
         },
         isNavBackwardDisabled() {
-            return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === 0) || this.value.length <= this.d_numVisible;
         },
         isNavForwardDisabled() {
-            return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
         },
         firstItemAciveIndex() {
             return this.totalShiftedItems * -1;
@@ -384,30 +388,42 @@ export default {
     },
     computed: {
         navBackwardClass() {
-            return ['p-galleria-thumbnail-prev p-link', {
-                'p-disabled': this.isNavBackwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-prev p-link',
+                {
+                    'p-disabled': this.isNavBackwardDisabled()
+                }
+            ];
         },
         navForwardClass() {
-            return ['p-galleria-thumbnail-next p-link', {
-                'p-disabled': this.isNavForwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-next p-link',
+                {
+                    'p-disabled': this.isNavForwardDisabled()
+                }
+            ];
         },
         navBackwardIconClass() {
-            return ['p-galleria-thumbnail-prev-icon pi', {
-                'pi-chevron-left': !this.isVertical,
-                'pi-chevron-up': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-prev-icon pi',
+                {
+                    'pi-chevron-left': !this.isVertical,
+                    'pi-chevron-up': this.isVertical
+                }
+            ];
         },
         navForwardIconClass() {
-            return ['p-galleria-thumbnail-next-icon pi', {
-                'pi-chevron-right': !this.isVertical,
-                'pi-chevron-down': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-next-icon pi',
+                {
+                    'pi-chevron-right': !this.isVertical,
+                    'pi-chevron-down': this.isVertical
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/image/Image.d.ts b/components/image/Image.d.ts
index 928459bf0..1eab4f8d8 100644
--- a/components/image/Image.d.ts
+++ b/components/image/Image.d.ts
@@ -23,8 +23,7 @@ export interface ImageSlots {
     indicator: () => VNode[];
 }
 
-export declare type ImageEmits = {
-}
+export declare type ImageEmits = {};
 
 declare class Image extends ClassComponent<ImageProps, ImageSlots, ImageEmits> {
     /**
@@ -41,7 +40,7 @@ declare class Image extends ClassComponent<ImageProps, ImageSlots, ImageEmits> {
     hide: () => void;
     /**
      * Triggered when an error occurs while loading an image file.
-     * 
+     *
      * @memberof Image
      */
     error: () => void;
@@ -49,7 +48,7 @@ declare class Image extends ClassComponent<ImageProps, ImageSlots, ImageEmits> {
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Image: GlobalComponentConstructor<Image>
+        Image: GlobalComponentConstructor<Image>;
     }
 }
 
@@ -59,7 +58,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Image](https://www.primefaces.org/primevue/showcase/#/image)
+ * - [Image](https://www.primefaces.org/primevue/image)
  *
  */
 export default Image;
diff --git a/components/image/Image.spec.js b/components/image/Image.spec.js
index f4fc95b52..7f5b6ad55 100644
--- a/components/image/Image.spec.js
+++ b/components/image/Image.spec.js
@@ -18,7 +18,7 @@ describe('Image.vue', () => {
         expect(wrapper.find('.p-image.p-component img').attributes().src).toBe('demo/images/galleria/galleria1.jpg');
     });
 
-    it('should preview', async() => {
+    it('should preview', async () => {
         const wrapper = mount(Image, {
             global: {
                 stubs: {
@@ -35,13 +35,13 @@ describe('Image.vue', () => {
         expect(wrapper.find('.p-image-preview-indicator').exists()).toBe(true);
         expect(wrapper.find('.p-image-mask').exists()).toBe(false);
 
-        await wrapper.setData({ maskVisible: true});
+        await wrapper.setData({ maskVisible: true });
 
         expect(wrapper.find('.p-image-mask').exists()).toBe(true);
         expect(wrapper.find('.p-image-toolbar').exists()).toBe(true);
 
-        await wrapper.setData({ maskVisible: false});
+        await wrapper.setData({ maskVisible: false });
 
         expect(wrapper.find('.p-image-mask').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/image/Image.vue b/components/image/Image.vue
index 7e4461838..96a2c091a 100644
--- a/components/image/Image.vue
+++ b/components/image/Image.vue
@@ -1,13 +1,13 @@
 <template>
     <span :class="containerClass" :style="style">
-        <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError"/>
-        <div class="p-image-preview-indicator" v-if="preview" @click="onImageClick">
+        <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
+        <div v-if="preview" class="p-image-preview-indicator" @click="onImageClick">
             <slot name="indicator">
                 <i class="p-image-preview-icon pi pi-eye"></i>
             </slot>
         </div>
         <Portal>
-            <div :ref="maskRef" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
+            <div v-if="maskVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
                 <div class="p-image-toolbar">
                     <button class="p-image-action p-link" @click="rotateRight" type="button">
                         <i class="pi pi-refresh"></i>
@@ -27,7 +27,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
                     <div v-if="previewVisible">
-                        <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick"/>
+                        <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
                     </div>
                 </transition>
             </div>
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 import Portal from 'primevue/portal';
 
 export default {
@@ -60,7 +60,7 @@ export default {
             previewVisible: false,
             rotate: 0,
             scale: 1
-        }
+        };
     },
     beforeUnmount() {
         if (this.mask) {
@@ -132,9 +132,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-image p-component', this.class, {
-                'p-image-preview-container': this.preview
-            }];
+            return [
+                'p-image p-component',
+                this.class,
+                {
+                    'p-image-preview-container': this.preview
+                }
+            ];
         },
         maskClass() {
             return ['p-image-mask p-component-overlay p-component-overlay-enter'];
@@ -143,16 +147,16 @@ export default {
             return 'p-image-preview-rotate-' + this.rotate;
         },
         imagePreviewStyle() {
-            return {transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')'};
+            return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
         },
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
         }
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -177,7 +181,7 @@ export default {
     align-items: center;
     justify-content: center;
     opacity: 0;
-    transition: opacity .3s;
+    transition: opacity 0.3s;
 }
 
 .p-image-preview-icon {
@@ -207,7 +211,7 @@ export default {
 }
 
 .p-image-preview {
-    transition: transform .15s;
+    transition: transform 0.15s;
     max-width: 100vw;
     max-height: 100vh;
 }
@@ -216,7 +220,7 @@ export default {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 .p-image-preview-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .p-image-preview-enter-from,
 .p-image-preview-leave-to {
diff --git a/components/inlinemessage/InlineMessage.d.ts b/components/inlinemessage/InlineMessage.d.ts
index bc1020695..1b99222eb 100755
--- a/components/inlinemessage/InlineMessage.d.ts
+++ b/components/inlinemessage/InlineMessage.d.ts
@@ -19,14 +19,13 @@ export interface InlineMessageSlots {
     default: () => VNode[];
 }
 
-export declare type InlineMessageEmits = {
-}
+export declare type InlineMessageEmits = {};
 
-declare class InlineMessage extends ClassComponent<InlineMessageProps, InlineMessageSlots, InlineMessageEmits> { }
+declare class InlineMessage extends ClassComponent<InlineMessageProps, InlineMessageSlots, InlineMessageEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InlineMessage: GlobalComponentConstructor<InlineMessage>
+        InlineMessage: GlobalComponentConstructor<InlineMessage>;
     }
 }
 
@@ -36,7 +35,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [InlineMessage](https://www.primefaces.org/primevue/showcase/#/message)
+ * - [InlineMessage](https://www.primefaces.org/primevue/message)
  *
  */
 export default InlineMessage;
diff --git a/components/inlinemessage/InlineMessage.spec.js b/components/inlinemessage/InlineMessage.spec.js
index a80e02985..568ef3eb4 100644
--- a/components/inlinemessage/InlineMessage.spec.js
+++ b/components/inlinemessage/InlineMessage.spec.js
@@ -8,7 +8,7 @@ describe('InlineMessage.vue', () => {
                 default: 'Username is required'
             },
             props: {
-                severity: 'error',   
+                severity: 'error'
             }
         });
 
@@ -16,4 +16,4 @@ describe('InlineMessage.vue', () => {
         expect(wrapper.find('.p-inline-message.p-component').text()).toBe('Username is required');
         expect(wrapper.find('.p-inline-message-error').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/inlinemessage/InlineMessage.vue b/components/inlinemessage/InlineMessage.vue
index fcd70560f..853772419 100755
--- a/components/inlinemessage/InlineMessage.vue
+++ b/components/inlinemessage/InlineMessage.vue
@@ -18,7 +18,7 @@ export default {
     data() {
         return {
             visible: true
-        }
+        };
     },
     mounted() {
         if (!this.sticky) {
@@ -29,18 +29,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-inline-message p-component p-inline-message-' + this.severity, {'p-inline-message-icon-only': !this.$slots.default}];
+            return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
         },
         iconClass() {
-            return ['p-inline-message-icon pi', {
-                'pi-info-circle': this.severity === 'info',
-                'pi-check': this.severity === 'success',
-                'pi-exclamation-triangle': this.severity === 'warn',
-                'pi-times-circle': this.severity === 'error'
-            }];
+            return [
+                'p-inline-message-icon pi',
+                {
+                    'pi-info-circle': this.severity === 'info',
+                    'pi-check': this.severity === 'success',
+                    'pi-exclamation-triangle': this.severity === 'warn',
+                    'pi-times-circle': this.severity === 'error'
+                }
+            ];
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/inplace/Inplace.d.ts b/components/inplace/Inplace.d.ts
index f04f4cc04..6680e00c8 100755
--- a/components/inplace/Inplace.d.ts
+++ b/components/inplace/Inplace.d.ts
@@ -37,19 +37,19 @@ export declare type InplaceEmits = {
      * Callback to invoke when inplace is opened.
      * @param {Event} event - Browser event.
      */
-    'open': (event: Event) => void;
+    open: (event: Event) => void;
     /**
      * Callback to invoke when inplace is closed.
      * @param {Event} event - Browser event.
      */
-    'close': (event: Event) => void;
-}
+    close: (event: Event) => void;
+};
 
-declare class Inplace extends ClassComponent<InplaceProps, InplaceSlots, InplaceEmits> { }
+declare class Inplace extends ClassComponent<InplaceProps, InplaceSlots, InplaceEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Inplace: GlobalComponentConstructor<Inplace>
+        Inplace: GlobalComponentConstructor<Inplace>;
     }
 }
 
@@ -59,7 +59,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Inplace](https://www.primefaces.org/primevue/showcase/#/inplace)
+ * - [Inplace](https://www.primefaces.org/primevue/inplace)
  *
  */
 export default Inplace;
diff --git a/components/inplace/Inplace.spec.js b/components/inplace/Inplace.spec.js
index c79642ef1..96cb23f4c 100644
--- a/components/inplace/Inplace.spec.js
+++ b/components/inplace/Inplace.spec.js
@@ -36,7 +36,7 @@ describe('Inplace.vue', () => {
         expect(wrapper.emitted()['update:active'][1]).toEqual([false]);
     });
 
-    it('closable inplace', async() => {
+    it('closable inplace', async () => {
         const wrapper = mount(Inplace, {
             global: {
                 components: {
@@ -64,4 +64,4 @@ describe('Inplace.vue', () => {
 
         expect(wrapper.find('.pi.pi-times').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/inplace/Inplace.vue b/components/inplace/Inplace.vue
index adbcafaff..df861e459 100755
--- a/components/inplace/Inplace.vue
+++ b/components/inplace/Inplace.vue
@@ -1,9 +1,9 @@
 <template>
     <div :class="containerClass">
-        <div :class="displayClass" :tabindex="$attrs.tabindex||'0'" v-if="!d_active" @click="open" @keydown.enter="open">
+        <div v-if="!d_active" :class="displayClass" :tabindex="$attrs.tabindex || '0'" @click="open" @keydown.enter="open">
             <slot name="display"></slot>
         </div>
-        <div class="p-inplace-content" v-else>
+        <div v-else class="p-inplace-content">
             <slot name="content"></slot>
             <IPButton v-if="closable" icon="pi pi-times" @click="close"></IPButton>
         </div>
@@ -30,14 +30,14 @@ export default {
             default: false
         }
     },
-    watch: {
-        active(newValue) {
-            this.d_active = newValue;
-        }
-    },
     data() {
         return {
             d_active: this.active
+        };
+    },
+    watch: {
+        active(newValue) {
+            this.d_active = newValue;
         }
     },
     methods: {
@@ -58,16 +58,16 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-inplace p-component', {'p-inplace-closable': this.closable}];
+            return ['p-inplace p-component', { 'p-inplace-closable': this.closable }];
         },
         displayClass() {
-            return ['p-inplace-display', {'p-disabled': this.disabled}];
+            return ['p-inplace-display', { 'p-disabled': this.disabled }];
         }
     },
     components: {
-        'IPButton': Button
+        IPButton: Button
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/inputmask/InputMask.d.ts b/components/inputmask/InputMask.d.ts
index dad03a146..68b231591 100755
--- a/components/inputmask/InputMask.d.ts
+++ b/components/inputmask/InputMask.d.ts
@@ -25,8 +25,7 @@ export interface InputMaskProps {
     unmask?: boolean | undefined;
 }
 
-export interface InputMaskSlots {
-}
+export interface InputMaskSlots {}
 
 export declare type InputMaskEmits = {
     /**
@@ -37,34 +36,34 @@ export declare type InputMaskEmits = {
     /**
      * Callback to invoke when the component receives focus.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke when a key is pressed.
      */
-    'keydown': (event: Event) => void;
+    keydown: (event: Event) => void;
     /**
      * Callback to invoke when a key that produces a character value is pressed down.
      */
-    'keypress': (event: Event) => void;
+    keypress: (event: Event) => void;
     /**
      * Callback to invoke when the user has initiated a 'paste' action through the browser's user interface.
      */
-    'paste': (event: Event) => void;
+    paste: (event: Event) => void;
     /**
      * Callback to invoke when the mask is completed.
      */
-    'complete': (event: Event) => void;
-}
+    complete: (event: Event) => void;
+};
 
-declare class InputMask extends ClassComponent<InputMaskProps, InputMaskSlots, InputMaskEmits> { }
+declare class InputMask extends ClassComponent<InputMaskProps, InputMaskSlots, InputMaskEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InputMask: GlobalComponentConstructor<InputMask>
+        InputMask: GlobalComponentConstructor<InputMask>;
     }
 }
 
@@ -74,7 +73,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [InputMask](https://www.primefaces.org/primevue/showcase/#/inputmask)
+ * - [InputMask](https://www.primefaces.org/primevue/inputmask)
  *
  */
 export default InputMask;
diff --git a/components/inputmask/InputMask.spec.js b/components/inputmask/InputMask.spec.js
index 9ff06f86b..e5881df59 100644
--- a/components/inputmask/InputMask.spec.js
+++ b/components/inputmask/InputMask.spec.js
@@ -14,7 +14,7 @@ describe('InputMask.vue', () => {
         expect(wrapper.find('.p-inputmask.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-inputmask.p-component').attributes().placeholder).toBe('99-999999');
 
-        const event = {'target': { 'value': '1' }};
+        const event = { target: { value: '1' } };
 
         await wrapper.vm.onInput(event);
 
@@ -22,17 +22,17 @@ describe('InputMask.vue', () => {
     });
 
     it('keydown event', async () => {
-        const wrapper  = mount(InputMask, {
+        const wrapper = mount(InputMask, {
             props: {
                 modelValue: null,
                 mask: '99/99/9999'
             }
         });
 
-        const event = {'target': { 'value': '1' }};
+        const event = { target: { value: '1' } };
 
         await wrapper.vm.onKeyDown(event);
 
         expect(wrapper.emitted().keydown[0]).toEqual([event]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/inputmask/InputMask.vue b/components/inputmask/InputMask.vue
index 5ce0201fc..e223a5c24 100755
--- a/components/inputmask/InputMask.vue
+++ b/components/inputmask/InputMask.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'InputMask',
@@ -31,12 +31,67 @@ export default {
             default: false
         }
     },
+    mounted() {
+        this.tests = [];
+        this.partialPosition = this.mask.length;
+        this.len = this.mask.length;
+        this.firstNonMaskPos = null;
+        this.defs = {
+            9: '[0-9]',
+            a: '[A-Za-z]',
+            '*': '[A-Za-z0-9]'
+        };
+
+        let ua = DomHandler.getUserAgent();
+
+        this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
+
+        let maskTokens = this.mask.split('');
+
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+
+            if (c === '?') {
+                this.len--;
+                this.partialPosition = i;
+            } else if (this.defs[c]) {
+                this.tests.push(new RegExp(this.defs[c]));
+
+                if (this.firstNonMaskPos === null) {
+                    this.firstNonMaskPos = this.tests.length - 1;
+                }
+
+                if (i < this.partialPosition) {
+                    this.lastRequiredNonMaskPos = this.tests.length - 1;
+                }
+            } else {
+                this.tests.push(null);
+            }
+        }
+
+        this.buffer = [];
+
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+
+            if (c !== '?') {
+                if (this.defs[c]) this.buffer.push(this.getPlaceholder(i));
+                else this.buffer.push(c);
+            }
+        }
+
+        this.defaultBuffer = this.buffer.join('');
+        this.updateValue(false);
+    },
+    updated() {
+        if (this.isValueUpdated()) {
+            this.updateValue();
+        }
+    },
     methods: {
         onInput(event) {
-            if (this.androidChrome)
-                this.handleAndroidInput(event);
-            else
-                this.handleInputChange(event);
+            if (this.androidChrome) this.handleAndroidInput(event);
+            else this.handleInputChange(event);
 
             this.$emit('update:modelValue', event.target.value);
         },
@@ -58,15 +113,17 @@ export default {
                 if (this.$el !== document.activeElement) {
                     return;
                 }
+
                 this.writeBuffer();
-                if (pos === this.mask.replace("?", "").length) {
+
+                if (pos === this.mask.replace('?', '').length) {
                     this.caret(0, pos);
                 } else {
                     this.caret(pos);
                 }
             }, 10);
 
-            this.$emit('focus', event)
+            this.$emit('focus', event);
         },
         onBlur(event) {
             this.focus = false;
@@ -75,6 +132,7 @@ export default {
 
             if (this.$el.value !== this.focusText) {
                 let e = document.createEvent('HTMLEvents');
+
                 e.initEvent('change', true, false);
                 this.$el.dispatchEvent(e);
             }
@@ -91,6 +149,7 @@ export default {
                 begin,
                 end;
             let iPhone = /iphone/i.test(DomHandler.getUserAgent());
+
             this.oldVal = this.$el.value;
 
             //backspace, delete, and escape get special treatment
@@ -99,7 +158,6 @@ export default {
                 begin = pos.begin;
                 end = pos.end;
 
-
                 if (end - begin === 0) {
                     begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
                     end = k === 46 ? this.seekNext(end) : end;
@@ -110,10 +168,12 @@ export default {
                 this.updateModel(event);
 
                 event.preventDefault();
-            } else if (k === 13) { // enter
+            } else if (k === 13) {
+                // enter
                 this.$el.blur();
                 this.updateModel(event);
-            } else if (k === 27) { // escape
+            } else if (k === 27) {
+                // escape
                 this.$el.value = this.focusText;
                 this.caret(0, this.checkVal());
                 this.updateModel(event);
@@ -134,7 +194,8 @@ export default {
                 next,
                 completed;
 
-            if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {//Ignore
+            if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {
+                //Ignore
                 return;
             } else if (k && k !== 13) {
                 if (pos.end - pos.begin !== 0) {
@@ -143,8 +204,10 @@ export default {
                 }
 
                 p = this.seekNext(pos.begin - 1);
+
                 if (p < this.len) {
                     c = String.fromCharCode(k);
+
                     if (this.tests[p].test(c)) {
                         this.shiftR(p);
 
@@ -162,11 +225,13 @@ export default {
                         } else {
                             this.caret(next);
                         }
+
                         if (pos.begin <= this.lastRequiredNonMaskPos) {
                             completed = this.isCompleted();
                         }
                     }
                 }
+
                 event.preventDefault();
             }
 
@@ -178,7 +243,7 @@ export default {
 
             this.$emit('keypress', event);
         },
-        onPaste(event)  {
+        onPaste(event) {
             this.handleInputChange(event);
 
             this.$emit('paste', event);
@@ -192,24 +257,22 @@ export default {
 
             if (typeof first === 'number') {
                 begin = first;
-                end = (typeof last === 'number') ? last : begin;
+                end = typeof last === 'number' ? last : begin;
+
                 if (this.$el.setSelectionRange) {
                     this.$el.setSelectionRange(begin, end);
-                }
-                else if (this.$el['createTextRange']) {
+                } else if (this.$el['createTextRange']) {
                     range = this.$el['createTextRange']();
                     range.collapse(true);
                     range.moveEnd('character', end);
                     range.moveStart('character', begin);
                     range.select();
                 }
-            }
-            else {
+            } else {
                 if (this.$el.setSelectionRange) {
                     begin = this.$el.selectionStart;
                     end = this.$el.selectionEnd;
-                }
-                else if (document['selection'] && document['selection'].createRange) {
+                } else if (document['selection'] && document['selection'].createRange) {
                     range = document['selection'].createRange();
                     begin = 0 - range.duplicate().moveStart('character', -100000);
                     end = begin + range.text.length;
@@ -231,14 +294,17 @@ export default {
             if (i < this.slotChar.length) {
                 return this.slotChar.charAt(i);
             }
+
             return this.slotChar.charAt(0);
         },
         seekNext(pos) {
             while (++pos < this.len && !this.tests[pos]);
+
             return pos;
         },
         seekPrev(pos) {
             while (--pos >= 0 && !this.tests[pos]);
+
             return pos;
         },
         shiftL(begin, end) {
@@ -260,6 +326,7 @@ export default {
                     j = this.seekNext(j);
                 }
             }
+
             this.writeBuffer();
             this.caret(Math.max(this.firstNonMaskPos, begin));
         },
@@ -271,6 +338,7 @@ export default {
                     j = this.seekNext(i);
                     t = this.buffer[i];
                     this.buffer[i] = c;
+
                     if (j < this.len && this.tests[j].test(t)) {
                         c = t;
                     } else {
@@ -282,20 +350,20 @@ export default {
         handleAndroidInput(event) {
             var curVal = this.$el.value;
             var pos = this.caret();
+
             if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
                 // a deletion or backspace happened
                 this.checkVal(true);
-                while (pos.begin > 0 && !this.tests[pos.begin - 1])
-                    pos.begin--;
+                while (pos.begin > 0 && !this.tests[pos.begin - 1]) pos.begin--;
+
                 if (pos.begin === 0) {
-                    while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
-                        pos.begin++;
+                    while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin]) pos.begin++;
                 }
+
                 this.caret(pos.begin, pos.begin);
             } else {
                 this.checkVal(true);
-                while (pos.begin < this.len && !this.tests[pos.begin])
-                    pos.begin++;
+                while (pos.begin < this.len && !this.tests[pos.begin]) pos.begin++;
 
                 this.caret(pos.begin, pos.begin);
             }
@@ -306,6 +374,7 @@ export default {
         },
         clearBuffer(start, end) {
             let i;
+
             for (i = start; i < end && i < this.len; i++) {
                 if (this.tests[i]) {
                     this.buffer[i] = this.getPlaceholder(i);
@@ -327,14 +396,17 @@ export default {
             for (i = 0, pos = 0; i < this.len; i++) {
                 if (this.tests[i]) {
                     this.buffer[i] = this.getPlaceholder(i);
+
                     while (pos++ < test.length) {
                         c = test.charAt(pos - 1);
+
                         if (this.tests[i].test(c)) {
                             this.buffer[i] = c;
                             lastMatch = i;
                             break;
                         }
                     }
+
                     if (pos > test.length) {
                         this.clearBuffer(i + 1, this.len);
                         break;
@@ -343,11 +415,13 @@ export default {
                     if (this.buffer[i] === test.charAt(pos)) {
                         pos++;
                     }
+
                     if (i < this.partialPosition) {
                         lastMatch = i;
                     }
                 }
             }
+
             if (allow) {
                 this.writeBuffer();
             } else if (lastMatch + 1 < this.partialPosition) {
@@ -365,7 +439,8 @@ export default {
                 this.writeBuffer();
                 this.$el.value = this.$el.value.substring(0, lastMatch + 1);
             }
-            return (this.partialPosition ? i : this.firstNonMaskPos);
+
+            return this.partialPosition ? i : this.firstNonMaskPos;
         },
         handleInputChange(event) {
             if (this.readonly) {
@@ -373,6 +448,7 @@ export default {
             }
 
             var pos = this.checkVal(true);
+
             this.caret(pos);
             this.updateModel(event);
 
@@ -382,8 +458,10 @@ export default {
         },
         getUnmaskedValue() {
             let unmaskedBuffer = [];
+
             for (let i = 0; i < this.buffer.length; i++) {
                 let c = this.buffer[i];
+
                 if (this.tests[i] && c !== this.getPlaceholder(i)) {
                     unmaskedBuffer.push(c);
                 }
@@ -393,15 +471,15 @@ export default {
         },
         updateModel(e) {
             let val = this.unmask ? this.getUnmaskedValue() : e.target.value;
-            this.$emit('update:modelValue', (this.defaultBuffer !== val) ? val : '');
+
+            this.$emit('update:modelValue', this.defaultBuffer !== val ? val : '');
         },
         updateValue(updateModel = true) {
             if (this.$el) {
                 if (this.modelValue == null) {
                     this.$el.value = '';
                     updateModel && this.$emit('update:modelValue', '');
-                }
-                else {
+                } else {
                     this.$el.value = this.modelValue;
                     this.checkVal();
 
@@ -412,7 +490,8 @@ export default {
 
                             if (updateModel) {
                                 let val = this.unmask ? this.getUnmaskedValue() : this.$el.value;
-                                this.$emit('update:modelValue', (this.defaultBuffer !== val) ? val : '');
+
+                                this.$emit('update:modelValue', this.defaultBuffer !== val ? val : '');
                             }
                         }
                     }, 10);
@@ -422,73 +501,21 @@ export default {
             }
         },
         isValueUpdated() {
-            return this.unmask ?
-                        (this.modelValue != this.getUnmaskedValue()) :
-                        (this.defaultBuffer !== this.$el.value && this.$el.value !== this.modelValue);
-        }
-    },
-    mounted() {
-        this.tests = [];
-        this.partialPosition = this.mask.length;
-        this.len = this.mask.length;
-        this.firstNonMaskPos = null;
-        this.defs = {
-            '9': '[0-9]',
-            'a': '[A-Za-z]',
-            '*': '[A-Za-z0-9]'
-        };
-
-        let ua = DomHandler.getUserAgent();
-        this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
-
-        let maskTokens = this.mask.split('');
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-            if (c === '?') {
-                this.len--;
-                this.partialPosition = i;
-            }
-            else if (this.defs[c]) {
-                this.tests.push(new RegExp(this.defs[c]));
-                if (this.firstNonMaskPos === null) {
-                    this.firstNonMaskPos = this.tests.length - 1;
-                }
-                if (i < this.partialPosition) {
-                    this.lastRequiredNonMaskPos = this.tests.length - 1;
-                }
-            }
-            else {
-                this.tests.push(null);
-            }
-        }
-
-        this.buffer = [];
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-            if (c !== '?') {
-                if (this.defs[c])
-                    this.buffer.push(this.getPlaceholder(i));
-                else
-                    this.buffer.push(c);
-            }
-        }
-        this.defaultBuffer = this.buffer.join('');
-        this.updateValue(false);
-    },
-    updated() {
-        if (this.isValueUpdated()) {
-            this.updateValue();
+            return this.unmask ? this.modelValue != this.getUnmaskedValue() : this.defaultBuffer !== this.$el.value && this.$el.value !== this.modelValue;
         }
     },
     computed: {
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         },
         inputClass() {
-            return ['p-inputmask p-inputtext p-component', {
-                'p-filled': this.filled
-            }];
-        },
+            return [
+                'p-inputmask p-inputtext p-component',
+                {
+                    'p-filled': this.filled
+                }
+            ];
+        }
     }
-}
+};
 </script>
diff --git a/components/inputnumber/InputNumber.d.ts b/components/inputnumber/InputNumber.d.ts
index fb9887266..32ffc21b6 100755
--- a/components/inputnumber/InputNumber.d.ts
+++ b/components/inputnumber/InputNumber.d.ts
@@ -180,8 +180,7 @@ export interface InputNumberProps {
     'aria-label'?: string | undefined;
 }
 
-export interface InputNumberSlots {
-}
+export interface InputNumberSlots {}
 
 export declare type InputNumberEmits = {
     /**
@@ -190,21 +189,21 @@ export declare type InputNumberEmits = {
      */
     'update:modelValue': (value: number) => void;
     /**
-      * Callback to invoke when the value is entered.
-      * @param {InputNumberInputEvent} event - Custom input event.
-      */
-    'input': (event: InputNumberInputEvent) => void;
+     * Callback to invoke when the value is entered.
+     * @param {InputNumberInputEvent} event - Custom input event.
+     */
+    input: (event: InputNumberInputEvent) => void;
     /**
      * Callback to invoke on focus of input field.
      * @param {Event} event - Focus event
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
-       * Callback to invoke on blur of input field.
-       * @param {InputNumberBlurEvent} event - Blur event
-       */
-    'blur': (event: InputNumberBlurEvent) => void;
-}
+     * Callback to invoke on blur of input field.
+     * @param {InputNumberBlurEvent} event - Blur event
+     */
+    blur: (event: InputNumberBlurEvent) => void;
+};
 
 declare class InputNumber extends ClassComponent<InputNumberProps, InputNumberSlots, InputNumberEmits> {
     /**
@@ -217,7 +216,7 @@ declare class InputNumber extends ClassComponent<InputNumberProps, InputNumberSl
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InputNumber: GlobalComponentConstructor<InputNumber>
+        InputNumber: GlobalComponentConstructor<InputNumber>;
     }
 }
 
@@ -231,7 +230,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [InputNumber](https://www.primefaces.org/primevue/showcase/#/inputnumber)
+ * - [InputNumber](https://www.primefaces.org/primevue/inputnumber)
  *
  */
 export default InputNumber;
diff --git a/components/inputnumber/InputNumber.spec.js b/components/inputnumber/InputNumber.spec.js
index 9d735de65..59ed237d8 100644
--- a/components/inputnumber/InputNumber.spec.js
+++ b/components/inputnumber/InputNumber.spec.js
@@ -18,71 +18,71 @@ describe('InputNumber.vue', () => {
     });
 
     it('is keydown called when down and up keys pressed', async () => {
-        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 1 }, preventDefault: () => {}});
-        
+        await wrapper.vm.onInputKeyDown({ which: 38, target: { value: 1 }, preventDefault: () => {} });
+
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([2]);
 
-        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 2 }, preventDefault: () => {}})
-        
+        await wrapper.vm.onInputKeyDown({ which: 40, target: { value: 2 }, preventDefault: () => {} });
+
         expect(wrapper.emitted()['update:modelValue'][1]).toEqual([1]);
     });
 
     it('is keydown called when tab key pressed', async () => {
-        await wrapper.vm.onInputKeyDown({which: 9, target: { value: '12' }, preventDefault: () => {}});
-        
+        await wrapper.vm.onInputKeyDown({ which: 9, target: { value: '12' }, preventDefault: () => {} });
+
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([12]);
         expect(wrapper.find('input.p-inputnumber-input').attributes()['aria-valuenow']).toBe('12');
     });
 
     it('is keydown called when enter key pressed', async () => {
-        await wrapper.vm.onInputKeyDown({which: 13, target: { value: '12' }, preventDefault: () => {}});
-        
+        await wrapper.vm.onInputKeyDown({ which: 13, target: { value: '12' }, preventDefault: () => {} });
+
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([12]);
         expect(wrapper.find('input.p-inputnumber-input').attributes()['aria-valuenow']).toBe('12');
     });
 
     it('is keypress called when pressed a number', async () => {
-        wrapper.find('input.p-inputnumber-input').element.setSelectionRange(2,2);
+        wrapper.find('input.p-inputnumber-input').element.setSelectionRange(2, 2);
 
-        await wrapper.vm.onInputKeyPress({which: 49, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyPress({ which: 49, preventDefault: () => {} });
 
         expect(wrapper.emitted().input[0][0].value).toBe(11);
     });
 
     it('is keypress called when pressed minus', async () => {
-        wrapper.find('input.p-inputnumber-input').element.setSelectionRange(0,0);
+        wrapper.find('input.p-inputnumber-input').element.setSelectionRange(0, 0);
 
-        await wrapper.vm.onInputKeyPress({keyCode: 45, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyPress({ keyCode: 45, preventDefault: () => {} });
 
         expect(wrapper.emitted().input[0][0].value).toBe(-1);
     });
 
     it('should have min boundary', async () => {
-        await wrapper.setProps({ modelValue: 95, min: 95});
+        await wrapper.setProps({ modelValue: 95, min: 95 });
 
-        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 96 }, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyDown({ which: 40, target: { value: 96 }, preventDefault: () => {} });
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([95]);
 
-        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 95 }, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyDown({ which: 40, target: { value: 95 }, preventDefault: () => {} });
 
         expect(wrapper.emitted()['update:modelValue'][1]).toEqual([95]);
     });
 
     it('should have max boundary', async () => {
-        await wrapper.setProps({ modelValue: 99, max: 100});
+        await wrapper.setProps({ modelValue: 99, max: 100 });
 
-        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 99 }, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyDown({ which: 38, target: { value: 99 }, preventDefault: () => {} });
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([100]);
 
-        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 100 }, preventDefault: () => {}});
+        await wrapper.vm.onInputKeyDown({ which: 38, target: { value: 100 }, preventDefault: () => {} });
 
         expect(wrapper.emitted()['update:modelValue'][1]).toEqual([100]);
     });
 
     it('should have currency', async () => {
-        await wrapper.setProps({ modelValue: 12345, mode: 'currency', currency: 'USD', locale: 'en-US'});
+        await wrapper.setProps({ modelValue: 12345, mode: 'currency', currency: 'USD', locale: 'en-US' });
 
         expect(wrapper.find('input.p-inputnumber-input').element._value).toBe('$12,345.00');
     });
@@ -92,4 +92,4 @@ describe('InputNumber.vue', () => {
 
         expect(wrapper.find('input.p-inputnumber-input').element._value).toBe('%20');
     });
-});
\ No newline at end of file
+});
diff --git a/components/inputnumber/InputNumber.vue b/components/inputnumber/InputNumber.vue
index c9d26e7f0..72cb66cc8 100755
--- a/components/inputnumber/InputNumber.vue
+++ b/components/inputnumber/InputNumber.vue
@@ -1,13 +1,36 @@
 <template>
     <span :class="containerClass">
-        <INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :disabled="disabled" :readonly="readonly" :placeholder="placeholder" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-            @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
-        <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
+        <INInputText
+            ref="input"
+            :id="inputId"
+            class="p-inputnumber-input"
+            role="spinbutton"
+            :class="inputClass"
+            :style="inputStyle"
+            :value="formattedValue"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :disabled="disabled"
+            :readonly="readonly"
+            :placeholder="placeholder"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @input="onUserInput"
+            @keydown="onInputKeyDown"
+            @keypress="onInputKeyPress"
+            @paste="onPaste"
+            @click="onInputClick"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+            v-bind="inputProps"
+        />
+        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
             <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
             <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
         </span>
-        <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
-        <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
     </span>
 </template>
 
@@ -37,19 +60,19 @@ export default {
         },
         incrementButtonClass: {
             type: String,
-            default: null,
+            default: null
         },
         decrementButtonClass: {
             type: String,
-            default: null,
+            default: null
         },
         incrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-up',
+            default: 'pi pi-angle-up'
         },
         decrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-down',
+            default: 'pi pi-angle-down'
         },
         locale: {
             type: String,
@@ -119,15 +142,33 @@ export default {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
-        incrementButtonProps: null,
-        decrementButtonProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        incrementButtonProps: {
+            type: null,
+            default: null
+        },
+        decrementButtonProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -152,13 +193,13 @@ export default {
         return {
             d_modelValue: this.modelValue,
             focused: false
-        }
+        };
     },
     watch: {
         modelValue(newValue) {
             this.d_modelValue = newValue;
         },
-		locale(newValue, oldValue) {
+        locale(newValue, oldValue) {
             this.updateConstructParser(newValue, oldValue);
         },
         localeMatcher(newValue, oldValue) {
@@ -206,8 +247,9 @@ export default {
         },
         constructParser() {
             this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
-            const numerals = [...new Intl.NumberFormat(this.locale, {useGrouping: false}).format(9876543210)].reverse();
+            const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse();
             const index = new Map(numerals.map((d, i) => [d, i]));
+
             this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
             this._group = this.getGroupingExpression();
             this._minusSign = this.getMinusSignExpression();
@@ -215,7 +257,7 @@ export default {
             this._decimal = this.getDecimalExpression();
             this._suffix = this.getSuffixExpression();
             this._prefix = this.getPrefixExpression();
-            this._index = d => index.get(d);
+            this._index = (d) => index.get(d);
         },
         updateConstructParser(newValue, oldValue) {
             if (newValue !== oldValue) {
@@ -226,59 +268,64 @@ export default {
             return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
         },
         getDecimalExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {...this.getOptions(), useGrouping: false});
+            const formatter = new Intl.NumberFormat(this.locale, { ...this.getOptions(), useGrouping: false });
+
             return new RegExp(`[${formatter.format(1.1).replace(this._currency, '').trim().replace(this._numeral, '')}]`, 'g');
         },
         getGroupingExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true});
+            const formatter = new Intl.NumberFormat(this.locale, { useGrouping: true });
+
             this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0);
+
             return new RegExp(`[${this.groupChar}]`, 'g');
         },
         getMinusSignExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
+            const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false });
+
             return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
         },
         getCurrencyExpression() {
             if (this.currency) {
-                const formatter = new Intl.NumberFormat(this.locale, {style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay,
-                    minimumFractionDigits: 0, maximumFractionDigits: 0});
+                const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+
                 return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, '')}]`, 'g');
             }
 
-            return new RegExp(`[]`,'g');
+            return new RegExp(`[]`, 'g');
         },
         getPrefixExpression() {
             if (this.prefix) {
                 this.prefixChar = this.prefix;
-            }
-            else {
-                const formatter = new Intl.NumberFormat(this.locale, {style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay});
+            } else {
+                const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay });
+
                 this.prefixChar = formatter.format(1).split('1')[0];
             }
 
-            return new RegExp(`${this.escapeRegExp(this.prefixChar||'')}`, 'g');
+            return new RegExp(`${this.escapeRegExp(this.prefixChar || '')}`, 'g');
         },
         getSuffixExpression() {
             if (this.suffix) {
                 this.suffixChar = this.suffix;
-            }
-            else {
-                const formatter = new Intl.NumberFormat(this.locale, {style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay,
-                    minimumFractionDigits: 0, maximumFractionDigits: 0});
+            } else {
+                const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+
                 this.suffixChar = formatter.format(1).split('1')[1];
             }
 
-            return new RegExp(`${this.escapeRegExp(this.suffixChar||'')}`, 'g');
+            return new RegExp(`${this.escapeRegExp(this.suffixChar || '')}`, 'g');
         },
         formatValue(value) {
             if (value != null) {
-                if (value === '-') { // Minus sign
+                if (value === '-') {
+                    // Minus sign
                     return value;
                 }
 
                 if (this.format) {
                     let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
                     let formattedValue = formatter.format(value);
+
                     if (this.prefix) {
                         formattedValue = this.prefix + formattedValue;
                     }
@@ -297,21 +344,23 @@ export default {
         },
         parseValue(text) {
             let filteredText = text
-                                .replace(this._suffix, '')
-                                .replace(this._prefix, '')
-                                .trim()
-                                .replace(/\s/g, '')
-                                .replace(this._currency, '')
-                                .replace(this._group, '')
-                                .replace(this._minusSign, '-')
-                                .replace(this._decimal, '.')
-                                .replace(this._numeral, this._index);
+                .replace(this._suffix, '')
+                .replace(this._prefix, '')
+                .trim()
+                .replace(/\s/g, '')
+                .replace(this._currency, '')
+                .replace(this._group, '')
+                .replace(this._minusSign, '-')
+                .replace(this._decimal, '.')
+                .replace(this._numeral, this._index);
 
             if (filteredText) {
-                if (filteredText === '-') // Minus sign
+                if (filteredText === '-')
+                    // Minus sign
                     return filteredText;
 
                 let parsedValue = +filteredText;
+
                 return isNaN(parsedValue) ? null : parsedValue;
             }
 
@@ -401,6 +450,7 @@ export default {
             if (this.isSpecialChar) {
                 this.$refs.input.$el.value = this.lastValue;
             }
+
             this.isSpecialChar = false;
         },
         onInputKeyDown(event) {
@@ -409,8 +459,10 @@ export default {
             }
 
             this.lastValue = event.target.value;
+
             if (event.shiftKey || event.altKey) {
                 this.isSpecialChar = true;
+
                 return;
             }
 
@@ -428,27 +480,29 @@ export default {
                 case 38:
                     this.spin(event, 1);
                     event.preventDefault();
-                break;
+                    break;
 
                 //down
                 case 40:
                     this.spin(event, -1);
                     event.preventDefault();
-                break;
+                    break;
 
                 //left
                 case 37:
                     if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //right
                 case 39:
                     if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //tab and enter
                 case 9:
@@ -457,7 +511,7 @@ export default {
                     this.$refs.input.$el.value = this.formatValue(newValueStr);
                     this.$refs.input.$el.setAttribute('aria-valuenow', newValueStr);
                     this.updateModel(event, newValueStr);
-                break;
+                    break;
 
                 //backspace
                 case 8: {
@@ -473,33 +527,28 @@ export default {
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
-                            }
-                            else if (this._decimal.test(deleteChar)) {
+                            } else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
 
                                 if (decimalLength) {
                                     this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
-                                }
-                                else {
+                                } else {
                                     newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                                 }
-                            }
-                            else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
                                 const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
-                            }
-                            else if (decimalCharIndexWithoutPrefix === 1) {
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
                                 newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
-                            }
-                            else {
+                            } else {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                             }
                         }
 
                         this.updateValue(event, newValueStr, null, 'delete-single');
-                    }
-                    else {
+                    } else {
                         newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
                         this.updateValue(event, newValueStr, null, 'delete-range');
                     }
@@ -521,37 +570,33 @@ export default {
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
-                            }
-                            else if (this._decimal.test(deleteChar)) {
+                            } else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
 
                                 if (decimalLength) {
                                     this.$refs.input.$el.setSelectionRange(selectionStart + 1, selectionStart + 1);
-                                }
-                                else {
+                                } else {
                                     newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                                 }
-                            }
-                            else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
                                 const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+
                                 newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
-                            }
-                            else if (decimalCharIndexWithoutPrefix === 1) {
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
                                 newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
-                            }
-                            else {
+                            } else {
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                             }
                         }
 
                         this.updateValue(event, newValueStr, null, 'delete-back-single');
-                    }
-                    else {
+                    } else {
                         newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
                         this.updateValue(event, newValueStr, null, 'delete-range');
                     }
-                break;
+
+                    break;
 
                 //home
                 case 36:
@@ -559,7 +604,8 @@ export default {
                         this.updateModel(event, this.min);
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //end
                 case 35:
@@ -567,10 +613,11 @@ export default {
                         this.updateModel(event, this.max);
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         onInputKeyPress(event) {
@@ -591,8 +638,10 @@ export default {
         onPaste(event) {
             event.preventDefault();
             let data = (event.clipboardData || window['clipboardData']).getData('Text');
+
             if (data) {
                 let filteredData = this.parseValue(data);
+
                 if (filteredData != null) {
                     this.insert(event, filteredData.toString());
                 }
@@ -604,6 +653,7 @@ export default {
         isMinusSign(char) {
             if (this._minusSign.test(char) || char === '-') {
                 this._minusSign.lastIndex = 0;
+
                 return true;
             }
 
@@ -612,6 +662,7 @@ export default {
         isDecimalSign(char) {
             if (this._decimal.test(char)) {
                 this._decimal.lastIndex = 0;
+
                 return true;
             }
 
@@ -622,29 +673,37 @@ export default {
         },
         getDecimalCharIndexes(val) {
             let decimalCharIndex = val.search(this._decimal);
+
             this._decimal.lastIndex = 0;
 
             const filteredVal = val.replace(this._prefix, '').trim().replace(/\s/g, '').replace(this._currency, '');
             const decimalCharIndexWithoutPrefix = filteredVal.search(this._decimal);
+
             this._decimal.lastIndex = 0;
 
             return { decimalCharIndex, decimalCharIndexWithoutPrefix };
         },
         getCharIndexes(val) {
             const decimalCharIndex = val.search(this._decimal);
+
             this._decimal.lastIndex = 0;
             const minusCharIndex = val.search(this._minusSign);
+
             this._minusSign.lastIndex = 0;
             const suffixCharIndex = val.search(this._suffix);
+
             this._suffix.lastIndex = 0;
             const currencyCharIndex = val.search(this._currency);
+
             this._currency.lastIndex = 0;
 
             return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex };
         },
         insert(event, text, sign = { isDecimalSign: false, isMinusSign: false }) {
             const minusCharIndexOnText = text.search(this._minusSign);
+
             this._minusSign.lastIndex = 0;
+
             if (!this.allowMinusSign() && minusCharIndexOnText !== -1) {
                 return;
             }
@@ -658,39 +717,35 @@ export default {
             if (sign.isMinusSign) {
                 if (selectionStart === 0) {
                     newValueStr = inputValue;
+
                     if (minusCharIndex === -1 || selectionEnd !== 0) {
                         newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
                     }
 
                     this.updateValue(event, newValueStr, text, 'insert');
                 }
-            }
-            else if (sign.isDecimalSign) {
+            } else if (sign.isDecimalSign) {
                 if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
                     this.updateValue(event, inputValue, text, 'insert');
-                }
-                else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+                } else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+                    newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+                    this.updateValue(event, newValueStr, text, 'insert');
+                } else if (decimalCharIndex === -1 && this.maxFractionDigits) {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, 'insert');
                 }
-                else if (decimalCharIndex === -1 && this.maxFractionDigits) {
-                    newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
-                    this.updateValue(event, newValueStr, text, 'insert');
-                }
-            }
-            else {
+            } else {
                 const maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
                 const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
 
                 if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                    if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
-                        const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : (suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length);
+                    if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+                        const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
 
                         newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
                         this.updateValue(event, newValueStr, text, operation);
                     }
-                }
-                else {
+                } else {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, operation);
                 }
@@ -701,33 +756,27 @@ export default {
 
             if (textSplit.length === 2) {
                 const decimalCharIndex = value.slice(start, end).search(this._decimal);
+
                 this._decimal.lastIndex = 0;
-                return (decimalCharIndex > 0) ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : (value || this.formatValue(text));
-            }
-            else if ((end - start) === value.length) {
+
+                return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
+            } else if (end - start === value.length) {
                 return this.formatValue(text);
-            }
-            else if (start === 0) {
+            } else if (start === 0) {
                 return text + value.slice(end);
-            }
-            else if (end === value.length) {
+            } else if (end === value.length) {
                 return value.slice(0, start) + text;
-            }
-            else {
+            } else {
                 return value.slice(0, start) + text + value.slice(end);
             }
         },
         deleteRange(value, start, end) {
             let newValueStr;
 
-            if ((end - start) === value.length)
-                newValueStr = '';
-            else if (start === 0)
-                newValueStr = value.slice(end);
-            else if (end === value.length)
-                newValueStr = value.slice(0, start);
-            else
-                newValueStr = value.slice(0, start) + value.slice(end);
+            if (end - start === value.length) newValueStr = '';
+            else if (start === 0) newValueStr = value.slice(end);
+            else if (end === value.length) newValueStr = value.slice(0, start);
+            else newValueStr = value.slice(0, start) + value.slice(end);
 
             return newValueStr;
         },
@@ -739,39 +788,42 @@ export default {
 
             // remove prefix
             let prefixLength = (this.prefixChar || '').length;
+
             inputValue = inputValue.replace(this._prefix, '');
             selectionStart = selectionStart - prefixLength;
 
             let char = inputValue.charAt(selectionStart);
+
             if (this.isNumeralChar(char)) {
                 return selectionStart + prefixLength;
             }
 
             //left
             let i = selectionStart - 1;
+
             while (i >= 0) {
                 char = inputValue.charAt(i);
+
                 if (this.isNumeralChar(char)) {
                     index = i + prefixLength;
                     break;
-                }
-                else {
+                } else {
                     i--;
                 }
             }
 
             if (index !== null) {
                 this.$refs.input.$el.setSelectionRange(index + 1, index + 1);
-            }
-            else {
+            } else {
                 i = selectionStart;
+
                 while (i < valueLength) {
                     char = inputValue.charAt(i);
+
                     if (this.isNumeralChar(char)) {
                         index = i + prefixLength;
                         break;
-                    }
-                    else {
+                    } else {
                         i++;
                     }
                 }
@@ -791,16 +843,17 @@ export default {
         isNumeralChar(char) {
             if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
                 this.resetRegex();
+
                 return true;
             }
 
             return false;
         },
         resetRegex() {
-            this._numeral.lastIndex =  0;
-            this._decimal.lastIndex =  0;
-            this._group.lastIndex =  0;
-            this._minusSign.lastIndex =  0;
+            this._numeral.lastIndex = 0;
+            this._decimal.lastIndex = 0;
+            this._group.lastIndex = 0;
+            this._minusSign.lastIndex = 0;
         },
         updateValue(event, valueStr, insertedValueStr, operation) {
             let currentValue = this.$refs.input.$el.value;
@@ -825,7 +878,8 @@ export default {
             }
 
             if (newValue != null) {
-                let parsedCurrentValue = (typeof currentValue === 'string') ? this.parseValue(currentValue) : currentValue;
+                let parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
+
                 return newValue !== parsedCurrentValue;
             }
 
@@ -862,11 +916,12 @@ export default {
                 this.$refs.input.$el.setSelectionRange(0, 0);
                 const index = this.initCursor();
                 const selectionEnd = index + insertedValueStr.length;
+
                 this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-            }
-            else {
+            } else {
                 let selectionStart = this.$refs.input.$el.selectionStart;
                 let selectionEnd = this.$refs.input.$el.selectionEnd;
+
                 this.$refs.input.$el.value = newValue;
                 let newLength = newValue.length;
 
@@ -875,24 +930,21 @@ export default {
                     const startValueStr = startValue !== null ? startValue.toString() : '';
                     const startExpr = startValueStr.split('').join(`(${this.groupChar})?`);
                     const sRegex = new RegExp(startExpr, 'g');
+
                     sRegex.test(newValue);
 
                     const tExpr = insertedValueStr.split('').join(`(${this.groupChar})?`);
                     const tRegex = new RegExp(tExpr, 'g');
+
                     tRegex.test(newValue.slice(sRegex.lastIndex));
 
                     selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (newLength === currentLength) {
-                    if (operation === 'insert' || operation === 'delete-back-single')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
-                    else if (operation === 'delete-single')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
-                    else if (operation === 'delete-range' || operation === 'spin')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (operation === 'delete-back-single') {
+                } else if (newLength === currentLength) {
+                    if (operation === 'insert' || operation === 'delete-back-single') this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
+                    else if (operation === 'delete-single') this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
+                    else if (operation === 'delete-range' || operation === 'spin') this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
+                } else if (operation === 'delete-back-single') {
                     let prevChar = inputValue.charAt(selectionEnd - 1);
                     let nextChar = inputValue.charAt(selectionEnd);
                     let diff = currentLength - newLength;
@@ -900,21 +952,19 @@ export default {
 
                     if (isGroupChar && diff === 1) {
                         selectionEnd += 1;
-                    }
-                    else if (!isGroupChar && this.isNumeralChar(prevChar)) {
-                        selectionEnd += (-1 * diff) + 1;
+                    } else if (!isGroupChar && this.isNumeralChar(prevChar)) {
+                        selectionEnd += -1 * diff + 1;
                     }
 
                     this._group.lastIndex = 0;
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (inputValue === '-' && operation === 'insert') {
+                } else if (inputValue === '-' && operation === 'insert') {
                     this.$refs.input.$el.setSelectionRange(0, 0);
                     const index = this.initCursor();
                     const selectionEnd = index + insertedValueStr.length + 1;
+
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else {
+                } else {
                     selectionEnd = selectionEnd + (newLength - currentLength);
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
                 }
@@ -925,9 +975,10 @@ export default {
         concatValues(val1, val2) {
             if (val1 && val2) {
                 let decimalCharIndex = val2.search(this._decimal);
+
                 this._decimal.lastIndex = 0;
 
-                return decimalCharIndex !== -1 ? (val1.split(this._decimal)[0] + val2.slice(decimalCharIndex)) : val1;
+                return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
             }
 
             return val1;
@@ -937,10 +988,7 @@ export default {
                 const valueSplit = value.split(this._decimal);
 
                 if (valueSplit.length === 2) {
-                    return valueSplit[1].replace(this._suffix, '')
-                                .trim()
-                                .replace(/\s/g, '')
-                                .replace(this._currency, '').length;
+                    return valueSplit[1].replace(this._suffix, '').trim().replace(/\s/g, '').replace(this._currency, '').length;
                 }
             }
 
@@ -960,8 +1008,8 @@ export default {
             let input = event.target;
             let newValue = this.validateValue(this.parseValue(input.value));
 
-            this.$emit('blur', { originalEvent: event, value: input.value});
-            
+            this.$emit('blur', { originalEvent: event, value: input.value });
+
             input.value = this.formatValue(newValue);
             input.setAttribute('aria-valuenow', newValue);
             this.updateModel(event, newValue);
@@ -976,52 +1024,64 @@ export default {
         },
         minBoundry() {
             return this.d_modelValue <= this.min;
-        },
+        }
     },
     computed: {
         containerClass() {
-            return ['p-inputnumber p-component p-inputwrapper', {
-                'p-inputwrapper-filled': this.filled,
-                'p-inputwrapper-focus': this.focused,
-                'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
-                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
-                'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
-            }];
+            return [
+                'p-inputnumber p-component p-inputwrapper',
+                {
+                    'p-inputwrapper-filled': this.filled,
+                    'p-inputwrapper-focus': this.focused,
+                    'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
+                    'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
+                    'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
+                }
+            ];
         },
-        
+
         upButtonClass() {
-            return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass, {
-                'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
-            }];
+            return [
+                'p-inputnumber-button p-inputnumber-button-up',
+                this.incrementButtonClass,
+                {
+                    'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
+                }
+            ];
         },
         downButtonClass() {
-            return ['p-inputnumber-button p-inputnumber-button-down', this.decrementButtonClass, {
-                'p-disabled': this.showButtons && this.min !== null && this.minBoundry()
-            }];
+            return [
+                'p-inputnumber-button p-inputnumber-button-down',
+                this.decrementButtonClass,
+                {
+                    'p-disabled': this.showButtons && this.min !== null && this.minBoundry()
+                }
+            ];
         },
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         },
         upButtonListeners() {
             return {
-                mousedown: event => this.onUpButtonMouseDown(event),
-                mouseup: event => this.onUpButtonMouseUp(event),
-                mouseleave: event => this.onUpButtonMouseLeave(event),
-                keydown: event => this.onUpButtonKeyDown(event),
-                keyup: event => this.onUpButtonKeyUp(event)
-            }
+                mousedown: (event) => this.onUpButtonMouseDown(event),
+                mouseup: (event) => this.onUpButtonMouseUp(event),
+                mouseleave: (event) => this.onUpButtonMouseLeave(event),
+                keydown: (event) => this.onUpButtonKeyDown(event),
+                keyup: (event) => this.onUpButtonKeyUp(event)
+            };
         },
         downButtonListeners() {
             return {
-                mousedown: event => this.onDownButtonMouseDown(event),
-                mouseup: event => this.onDownButtonMouseUp(event),
-                mouseleave: event => this.onDownButtonMouseLeave(event),
-                keydown: event => this.onDownButtonKeyDown(event),
-                keyup: event => this.onDownButtonKeyUp(event)
-            }
+                mousedown: (event) => this.onDownButtonMouseDown(event),
+                mouseup: (event) => this.onDownButtonMouseUp(event),
+                mouseleave: (event) => this.onDownButtonMouseLeave(event),
+                keydown: (event) => this.onDownButtonKeyDown(event),
+                keyup: (event) => this.onDownButtonKeyUp(event)
+            };
         },
         formattedValue() {
             const val = !this.modelValue && !this.allowEmpty ? 0 : this.modelValue;
+
             return this.formatValue(val);
         },
         getFormatter() {
@@ -1029,10 +1089,10 @@ export default {
         }
     },
     components: {
-        'INInputText': InputText,
-        'INButton': Button
+        INInputText: InputText,
+        INButton: Button
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/inputswitch/InputSwitch.d.ts b/components/inputswitch/InputSwitch.d.ts
index 86c718c56..990ea6b52 100755
--- a/components/inputswitch/InputSwitch.d.ts
+++ b/components/inputswitch/InputSwitch.d.ts
@@ -40,8 +40,7 @@ export interface InputSwitchProps {
     'aria-label'?: string | undefined;
 }
 
-export interface InputSwitchSlots {
-}
+export interface InputSwitchSlots {}
 
 export declare type InputSwitchEmits = {
     /**
@@ -53,24 +52,24 @@ export declare type InputSwitchEmits = {
      * Callback to invoke on click.
      * @param {Event} event - Browser event.
      */
-    'click': (event: Event) => void;
+    click: (event: Event) => void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
+    change: (event: Event) => void;
     /**
      * Callback to invoke on value change.
      * @param {boolean} value - New value.
      */
-    'input': (value: boolean) => void;
-}
+    input: (value: boolean) => void;
+};
 
-declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> { }
+declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InputSwitch: GlobalComponentConstructor<InputSwitch>
+        InputSwitch: GlobalComponentConstructor<InputSwitch>;
     }
 }
 
@@ -80,7 +79,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [InputSwitch](https://www.primefaces.org/primevue/showcase/#/inputswitch)
+ * - [InputSwitch](https://www.primefaces.org/primevue/inputswitch)
  *
  */
 export default InputSwitch;
diff --git a/components/inputswitch/InputSwitch.spec.js b/components/inputswitch/InputSwitch.spec.js
index 20a160933..301b22e33 100644
--- a/components/inputswitch/InputSwitch.spec.js
+++ b/components/inputswitch/InputSwitch.spec.js
@@ -17,4 +17,4 @@ describe('InputSwitch.vue', () => {
         expect(wrapper.vm.checked).toBe(true);
         expect(wrapper.find('.p-inputswitch').classes()).toContain('p-inputswitch-checked');
     });
-});
\ No newline at end of file
+});
diff --git a/components/inputswitch/InputSwitch.vue b/components/inputswitch/InputSwitch.vue
index 9a1d2852e..f8eeacb91 100755
--- a/components/inputswitch/InputSwitch.vue
+++ b/components/inputswitch/InputSwitch.vue
@@ -1,8 +1,22 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled" :aria-checked="checked" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                role="switch"
+                :class="inputClass"
+                :style="inputStyle"
+                :checked="checked"
+                :disabled="disabled"
+                :aria-checked="checked"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </div>
         <span class="p-inputswitch-slider"></span>
     </div>
@@ -29,13 +43,25 @@ export default {
             type: Boolean,
             default: false
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -45,18 +71,20 @@ export default {
     data() {
         return {
             focused: false
-        }
+        };
     },
     methods: {
         onClick(event) {
             if (!this.disabled) {
                 const newValue = this.checked ? this.falseValue : this.trueValue;
+
                 this.$emit('click', event);
                 this.$emit('update:modelValue', newValue);
                 this.$emit('change', event);
                 this.$emit('input', newValue);
                 this.$refs.input.focus();
             }
+
             event.preventDefault();
         },
         onFocus(event) {
@@ -74,7 +102,7 @@ export default {
                 'p-inputswitch p-component',
                 {
                     'p-inputswitch-checked': this.checked,
-					'p-disabled': this.disabled,
+                    'p-disabled': this.disabled,
                     'p-focus': this.focused
                 }
             ];
@@ -83,7 +111,7 @@ export default {
             return this.modelValue === this.trueValue;
         }
     }
-}
+};
 </script>
 
 <style>
@@ -103,7 +131,7 @@ export default {
 
 .p-inputswitch-slider:before {
     position: absolute;
-    content: "";
+    content: '';
     top: 50%;
 }
 </style>
diff --git a/components/inputtext/InputText.d.ts b/components/inputtext/InputText.d.ts
index afe880f98..a13dd4dd6 100755
--- a/components/inputtext/InputText.d.ts
+++ b/components/inputtext/InputText.d.ts
@@ -8,8 +8,7 @@ export interface InputTextProps extends InputHTMLAttributes {
     modelValue?: Nullable<string>;
 }
 
-export interface InputTextSlots {
-}
+export interface InputTextSlots {}
 
 export declare type InputTextEmits = {
     /**
@@ -17,13 +16,13 @@ export declare type InputTextEmits = {
      * @param {string} value - New value.
      */
     'update:modelValue': (value: string | undefined) => void;
-}
+};
 
-declare class InputText extends ClassComponent<InputTextProps, InputTextSlots, InputTextEmits> { }
+declare class InputText extends ClassComponent<InputTextProps, InputTextSlots, InputTextEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InputText: GlobalComponentConstructor<InputText>
+        InputText: GlobalComponentConstructor<InputText>;
     }
 }
 
@@ -33,7 +32,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [InputText](https://www.primefaces.org/primevue/showcase/#/inputtext)
+ * - [InputText](https://www.primefaces.org/primevue/inputtext)
  *
  */
 export default InputText;
diff --git a/components/inputtext/InputText.spec.js b/components/inputtext/InputText.spec.js
index 671599671..cdd5cdeb2 100644
--- a/components/inputtext/InputText.spec.js
+++ b/components/inputtext/InputText.spec.js
@@ -1,4 +1,4 @@
-import { mount } from  '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import InputText from './InputText.vue';
 
 describe('InputText.vue', () => {
@@ -12,6 +12,7 @@ describe('InputText.vue', () => {
         expect(wrapper.find('.p-filled').exists()).toBe(true);
 
         const input = wrapper.find('input');
+
         expect(input.element.value).toEqual('PrimeVue');
     });
 
diff --git a/components/inputtext/InputText.vue b/components/inputtext/InputText.vue
index de67a8225..18d5ba27e 100755
--- a/components/inputtext/InputText.vue
+++ b/components/inputtext/InputText.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue" @input="onInput"/>
+    <input :class="['p-inputtext p-component', { 'p-filled': filled }]" :value="modelValue" @input="onInput" />
 </template>
 
 <script>
@@ -16,8 +16,8 @@ export default {
     },
     computed: {
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         }
     }
-}
+};
 </script>
diff --git a/components/knob/Knob.d.ts b/components/knob/Knob.d.ts
index 0ac52cad8..502cc0270 100644
--- a/components/knob/Knob.d.ts
+++ b/components/knob/Knob.d.ts
@@ -64,17 +64,16 @@ export interface KnobProps {
      */
     tabindex?: number | undefined;
     /**
-       * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-       */
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
     'aria-labelledby'?: string | undefined;
     /**
-       * Used to define a string that labels the element.
-       */
+     * Used to define a string that labels the element.
+     */
     'aria-label'?: string | undefined;
 }
 
-export interface KnobSlots {
-}
+export interface KnobSlots {}
 
 export declare type KnobEmits = {
     /**
@@ -86,14 +85,14 @@ export declare type KnobEmits = {
      * Callback to invoke when the value changes.
      * @param {number} value - New value
      */
-    'change': (value: number) => void;
-}
+    change: (value: number) => void;
+};
 
-declare class Knob extends ClassComponent<KnobProps, KnobSlots, KnobEmits> { }
+declare class Knob extends ClassComponent<KnobProps, KnobSlots, KnobEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Knob: GlobalComponentConstructor<Knob>
+        Knob: GlobalComponentConstructor<Knob>;
     }
 }
 
@@ -103,7 +102,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Knob](https://www.primefaces.org/primevue/showcase/#/knob)
+ * - [Knob](https://www.primefaces.org/primevue/knob)
  *
  */
 export default Knob;
diff --git a/components/knob/Knob.spec.js b/components/knob/Knob.spec.js
index f99622b1f..2fabc2e31 100644
--- a/components/knob/Knob.spec.js
+++ b/components/knob/Knob.spec.js
@@ -1,4 +1,4 @@
-import { mount } from  '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Knob from './Knob.vue';
 
 describe('Knob.vue', () => {
@@ -44,4 +44,4 @@ describe('Knob.vue', () => {
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([30]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/knob/Knob.vue b/components/knob/Knob.vue
index 628769771..c7cb14cdb 100644
--- a/components/knob/Knob.vue
+++ b/components/knob/Knob.vue
@@ -1,10 +1,26 @@
 <template>
     <div :class="containerClass">
-        <svg viewBox="0 0 100 100" role="slider" :width="size" :height="size" :tabindex="readonly || disabled ? -1 : tabindex" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-            @click="onClick" @keydown="onKeyDown" @mousedown="onMouseDown" @mouseup="onMouseUp" @touchstart="onTouchStart" @touchend="onTouchEnd">
+        <svg
+            viewBox="0 0 100 100"
+            role="slider"
+            :width="size"
+            :height="size"
+            :tabindex="readonly || disabled ? -1 : tabindex"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @click="onClick"
+            @keydown="onKeyDown"
+            @mousedown="onMouseDown"
+            @mouseup="onMouseUp"
+            @touchstart="onTouchStart"
+            @touchend="onTouchEnd"
+        >
             <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range"></path>
             <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value"></path>
-            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{valueToDisplay}}</text>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>
@@ -13,15 +29,6 @@
 export default {
     name: 'Knob',
     emits: ['update:modelValue', 'change'],
-    data() {
-        return {
-            radius: 40,
-            midX: 50,
-            midY: 50,
-            minRadians: 4 * Math.PI / 3,
-            maxRadians: -Math.PI / 3
-        }
-    },
     props: {
         modelValue: {
             type: Number,
@@ -73,7 +80,7 @@ export default {
         },
         valueTemplate: {
             type: String,
-            default: "{value}"
+            default: '{value}'
         },
         tabindex: {
             type: Number,
@@ -81,31 +88,40 @@ export default {
         },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
             default: null
         }
     },
+    data() {
+        return {
+            radius: 40,
+            midX: 50,
+            midY: 50,
+            minRadians: (4 * Math.PI) / 3,
+            maxRadians: -Math.PI / 3
+        };
+    },
     methods: {
         updateValue(offsetX, offsetY) {
             let dx = offsetX - this.size / 2;
-            let dy =  this.size / 2 - offsetY;
+            let dy = this.size / 2 - offsetY;
             let angle = Math.atan2(dy, dx);
             let start = -Math.PI / 2 - Math.PI / 6;
+
             this.updateModel(angle, start);
         },
         updateModel(angle, start) {
             let mappedValue;
-            if (angle > this.maxRadians)
-                mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
-            else if (angle < start)
-                mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
-            else
-                return;
+
+            if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
+            else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
+            else return;
 
             let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+
             this.$emit('update:modelValue', newValue);
             this.$emit('change', newValue);
         },
@@ -115,7 +131,7 @@ export default {
             else this.$emit('update:modelValue', newValue);
         },
         mapRange(x, inMin, inMax, outMin, outMax) {
-            return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+            return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
         },
         onClick(event) {
             if (!this.disabled && !this.readonly) {
@@ -162,6 +178,7 @@ export default {
                 const touch = event.targetTouches.item(0);
                 const offsetX = touch.clientX - rect.left;
                 const offsetY = touch.clientY - rect.top;
+
                 this.updateValue(offsetX, offsetY);
             }
         },
@@ -169,6 +186,7 @@ export default {
             if (!this.disabled && !this.readonly) {
                 switch (event.code) {
                     case 'ArrowRight':
+
                     case 'ArrowUp': {
                         event.preventDefault();
                         this.updateModelValue(this.modelValue + 1);
@@ -176,6 +194,7 @@ export default {
                     }
 
                     case 'ArrowLeft':
+
                     case 'ArrowDown': {
                         event.preventDefault();
                         this.updateModelValue(this.modelValue - 1);
@@ -212,7 +231,8 @@ export default {
     computed: {
         containerClass() {
             return [
-                'p-knob p-component', {
+                'p-knob p-component',
+                {
                     'p-disabled': this.disabled
                 }
             ];
@@ -224,10 +244,8 @@ export default {
             return `M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`;
         },
         zeroRadians() {
-            if (this.min > 0 && this.max > 0)
-                return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
-            else
-                return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+            if (this.min > 0 && this.max > 0) return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
+            else return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
         },
         valueRadians() {
             return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
@@ -266,7 +284,7 @@ export default {
             return this.valueTemplate.replace(/{value}/g, this.modelValue);
         }
     }
-}
+};
 //Derived and forked from https://github.com/kramer99/vue-knob-control
 </script>
 
@@ -278,7 +296,7 @@ export default {
 }
 .p-knob-range {
     fill: none;
-    transition: stroke .1s ease-in;
+    transition: stroke 0.1s ease-in;
 }
 .p-knob-value {
     animation-name: dash-frame;
diff --git a/components/listbox/Listbox.d.ts b/components/listbox/Listbox.d.ts
index 1721ab87b..b588b1032 100755
--- a/components/listbox/Listbox.d.ts
+++ b/components/listbox/Listbox.d.ts
@@ -2,7 +2,6 @@ import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
 
-
 type ListboxOptionLabelType = string | ((data: any) => string) | undefined;
 
 type ListboxOptionValueType = string | ((data: any) => any) | undefined;
@@ -122,6 +121,11 @@ export interface ListboxProps {
      * Default value is true.
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focused option is selected.
+     * Default value is false.
+     */
+    selectOnFocus?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * Default value is '{0} results are available'.
@@ -154,11 +158,11 @@ export interface ListboxProps {
     /**
      * Defines a string value that labels an interactive element.
      */
-    "aria-label"?: string | undefined;
+    'aria-label'?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface ListboxSlots {
@@ -273,29 +277,29 @@ export declare type ListboxEmits = {
      * Callback to invoke on value change.
      * @param {ListboxChangeEvent} event - Custom change event.
      */
-    'change': (event: ListboxChangeEvent) => void;
+    change: (event: ListboxChangeEvent) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke on filter input.
      * @param {ListboxFilterEvent} event - Custom filter event.
      */
-    'filter': (event: ListboxFilterEvent) => void;
-}
+    filter: (event: ListboxFilterEvent) => void;
+};
 
-declare class Listbox extends ClassComponent<ListboxProps, ListboxSlots, ListboxEmits> { }
+declare class Listbox extends ClassComponent<ListboxProps, ListboxSlots, ListboxEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Listbox: GlobalComponentConstructor<Listbox>
+        Listbox: GlobalComponentConstructor<Listbox>;
     }
 }
 
@@ -305,7 +309,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Listbox](https://www.primefaces.org/primevue/showcase/#/listbox)
+ * - [Listbox](https://www.primefaces.org/primevue/listbox)
  *
  */
 export default Listbox;
diff --git a/components/listbox/Listbox.spec.js b/components/listbox/Listbox.spec.js
index 6cdf8e9d3..b7c9017f3 100644
--- a/components/listbox/Listbox.spec.js
+++ b/components/listbox/Listbox.spec.js
@@ -1,6 +1,19 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Listbox from './Listbox.vue';
 
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    trueLabel: 'trueLabel',
+                    falseLabel: 'falseLabel',
+                    nullLabel: 'nullLabel'
+                }
+            }
+        }
+    }
+};
 describe('Listbox.vue', () => {
     let wrapper;
 
@@ -9,11 +22,11 @@ describe('Listbox.vue', () => {
             props: {
                 modelValue: null,
                 options: [
-                    {name: 'New York', code: 'NY'},
-                    {name: 'Rome', code: 'RM'},
-                    {name: 'London', code: 'LDN'},
-                    {name: 'Istanbul', code: 'IST'},
-                    {name: 'Paris', code: 'PRS'}
+                    { name: 'New York', code: 'NY' },
+                    { name: 'Rome', code: 'RM' },
+                    { name: 'London', code: 'LDN' },
+                    { name: 'Istanbul', code: 'IST' },
+                    { name: 'Paris', code: 'PRS' }
                 ],
                 optionLabel: 'name'
             }
@@ -35,4 +48,4 @@ describe('Listbox.vue', () => {
 
         expect(wrapper.findAll('li.p-listbox-item')[0].classes()).toContain('p-highlight');
     });
-});
\ No newline at end of file
+});
diff --git a/components/listbox/Listbox.vue b/components/listbox/Listbox.vue
index 0cdece29c..6674e3e62 100755
--- a/components/listbox/Listbox.vue
+++ b/components/listbox/Listbox.vue
@@ -4,44 +4,82 @@
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
         <div v-if="filter" class="p-listbox-header">
             <div class="p-listbox-filter-container">
-                <input ref="filterInput" type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder"
-                    role="searchbox" autocomplete="off" :aria-owns="id + '_list'" :aria-activedescendant="focusedOptionId" :tabindex="!disabled && !focused ? tabindex : -1"
-                    @input="onFilterChange" @blur="onFilterBlur" @keydown="onFilterKeyDown" v-bind="filterInputProps">
+                <input
+                    ref="filterInput"
+                    v-model="filterValue"
+                    type="text"
+                    class="p-listbox-filter p-inputtext p-component"
+                    :placeholder="filterPlaceholder"
+                    role="searchbox"
+                    autocomplete="off"
+                    :aria-owns="id + '_list'"
+                    :aria-activedescendant="focusedOptionId"
+                    :tabindex="!disabled && !focused ? tabindex : -1"
+                    @input="onFilterChange"
+                    @blur="onFilterBlur"
+                    @keydown="onFilterKeyDown"
+                    v-bind="filterInputProps"
+                />
                 <span class="p-listbox-filter-icon pi pi-search"></span>
             </div>
             <span role="status" aria-live="polite" class="p-hidden-accessible">
-                {{filterResultMessageText}}
+                {{ filterResultMessageText }}
             </span>
         </div>
         <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle">
             <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                 <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                    <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-listbox-list', styleClass]" :style="contentStyle" :tabindex="-1" role="listbox"
-                        :aria-multiselectable="multiple" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :aria-activedescendant="focused ? focusedOptionId : undefined" :aria-disabled="disabled"
-                        @focus="onListFocus" @blur="onListBlur" @keydown="onListKeyDown">
+                    <ul
+                        :ref="(el) => listRef(el, contentRef)"
+                        :id="id + '_list'"
+                        :class="['p-listbox-list', styleClass]"
+                        :style="contentStyle"
+                        :tabindex="-1"
+                        role="listbox"
+                        :aria-multiselectable="multiple"
+                        :aria-label="ariaLabel"
+                        :aria-labelledby="ariaLabelledby"
+                        :aria-activedescendant="focused ? focusedOptionId : undefined"
+                        :aria-disabled="disabled"
+                        @focus="onListFocus"
+                        @blur="onListBlur"
+                        @keydown="onListKeyDown"
+                    >
                         <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                            <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-listbox-item-group" role="option">
-                                <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                            <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-listbox-item-group" role="option">
+                                <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                             </li>
-                            <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
-                                :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
-                                role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
-                                @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions))" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" @touchend="onOptionTouchEnd()">
-                                <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
+                            <li
+                                v-else
+                                :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                v-ripple
+                                :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                :class="['p-listbox-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
+                                role="option"
+                                :aria-label="getOptionLabel(option)"
+                                :aria-selected="isSelected(option)"
+                                :aria-disabled="isOptionDisabled(option)"
+                                :aria-setsize="ariaSetSize"
+                                :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions))"
+                                @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                @touchend="onOptionTouchEnd()"
+                            >
+                                <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                             </li>
                         </template>
                         <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-listbox-empty-message" role="option">
-                            <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
+                            <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                         </li>
-                        <li v-else-if="(!options || (options && options.length === 0))" class="p-listbox-empty-message" role="option">
-                            <slot name="empty">{{emptyMessageText}}</slot>
+                        <li v-else-if="!options || (options && options.length === 0)" class="p-listbox-empty-message" role="option">
+                            <slot name="empty">{{ emptyMessageText }}</slot>
                         </li>
                     </ul>
-                    <span v-if="(!options || (options && options.length === 0))" role="status" aria-live="polite" class="p-hidden-accessible">
-                        {{emptyMessageText}}
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                        {{ emptyMessageText }}
                     </span>
                     <span role="status" aria-live="polite" class="p-hidden-accessible">
-                        {{selectedMessageText}}
+                        {{ selectedMessageText }}
                     </span>
                 </template>
                 <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -55,8 +93,8 @@
 </template>
 
 <script>
-import {DomHandler,ObjectUtils,UniqueComponentId} from 'primevue/utils';
-import {FilterService} from 'primevue/api';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { FilterService } from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 
@@ -71,7 +109,7 @@ export default {
         optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
-		listStyle: null,
+        listStyle: null,
         disabled: Boolean,
         dataKey: null,
         multiple: Boolean,
@@ -96,6 +134,10 @@ export default {
             type: Boolean,
             default: true
         },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
         filterMessage: {
             type: String,
             default: null
@@ -135,15 +177,13 @@ export default {
     startRangeIndex: -1,
     searchTimeout: null,
     searchValue: '',
-    selectOnFocus: false,
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             filterValue: null,
             focused: false,
             focusedOptionIndex: -1
-        }
+        };
     },
     watch: {
         options() {
@@ -151,13 +191,11 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     methods: {
         getOptionIndex(index, fn) {
-            return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
         },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
@@ -181,12 +219,13 @@ export default {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
         getAriaPosInset(index) {
-            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
         },
         onFirstHiddenFocus() {
-            this.list.focus();
+            DomHandler.focus(this.list);
 
             const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
+
             this.$refs.lastHiddenFocusableElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? -1 : undefined;
             this.$refs.firstHiddenFocusableElement.tabIndex = -1;
         },
@@ -195,11 +234,11 @@ export default {
 
             if (relatedTarget === this.list) {
                 const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
-                firstFocusableEl && firstFocusableEl.focus();
+
+                DomHandler.focus(firstFocusableEl);
                 this.$refs.firstHiddenFocusableElement.tabIndex = undefined;
-            }
-            else {
-                this.$refs.firstHiddenFocusableElement.focus();
+            } else {
+                DomHandler.focus(this.$refs.firstHiddenFocusableElement);
             }
 
             this.$refs.lastHiddenFocusableElement.tabIndex = -1;
@@ -221,6 +260,8 @@ export default {
             this.$emit('blur', event);
         },
         onListKeyDown(event) {
+            const metaKey = event.metaKey || event.ctrlKey;
+
             switch (event.code) {
                 case 'ArrowDown':
                     this.onArrowDownKey(event);
@@ -261,15 +302,16 @@ export default {
                     break;
 
                 default:
-                    if (event.code === 'KeyA' && this.multiple && (event.metaKey || event.ctrlKey)) {
-                        const value = this.visibleOptions.filter(option => this.isValidOption(option)).map(option => this.getOptionValue(option));
+                    if (this.multiple && event.code === 'KeyA' && metaKey) {
+                        const value = this.visibleOptions.filter((option) => this.isValidOption(option)).map((option) => this.getOptionValue(option));
+
                         this.updateModel(event, value);
 
                         event.preventDefault();
                         break;
                     }
 
-                    if (ObjectUtils.isPrintableCharacter(event.key)) {
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
                         this.searchOptions(event, event.key);
                         event.preventDefault();
                     }
@@ -305,20 +347,18 @@ export default {
             let metaSelection = this.optionTouched ? false : this.metaKeySelection;
 
             if (metaSelection) {
-                let metaKey = (event.metaKey || event.ctrlKey);
+                let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected) {
                     if (metaKey) {
                         value = null;
                         valueChanged = true;
                     }
-                }
-                else {
+                } else {
                     value = this.getOptionValue(option);
                     valueChanged = true;
                 }
-            }
-            else {
+            } else {
                 value = selected ? null : this.getOptionValue(option);
                 valueChanged = true;
             }
@@ -333,18 +373,16 @@ export default {
             let metaSelection = this.optionTouched ? false : this.metaKeySelection;
 
             if (metaSelection) {
-                let metaKey = (event.metaKey || event.ctrlKey);
+                let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected) {
                     value = metaKey ? this.removeOption(option) : [this.getOptionValue(option)];
-                }
-                else {
-                    value = (metaKey) ? this.modelValue || [] : [];
+                } else {
+                    value = metaKey ? this.modelValue || [] : [];
                     value = [...value, this.getOptionValue(option)];
                 }
-            }
-            else {
-                value = selected ? this.removeOption(option) : [...this.modelValue || [], this.getOptionValue(option)];
+            } else {
+                value = selected ? this.removeOption(option) : [...(this.modelValue || []), this.getOptionValue(option)];
             }
 
             this.updateModel(event, value);
@@ -356,13 +394,16 @@ export default {
             if (start !== -1 && end !== -1) {
                 const rangeStart = Math.min(start, end);
                 const rangeEnd = Math.max(start, end);
-                const value = this.visibleOptions.slice(rangeStart, rangeEnd + 1).filter(option => this.isValidOption(option)).map(option => this.getOptionValue(option));
+                const value = this.visibleOptions
+                    .slice(rangeStart, rangeEnd + 1)
+                    .filter((option) => this.isValidOption(option))
+                    .map((option) => this.getOptionValue(option));
 
                 this.updateModel(event, value);
             }
         },
         onFilterChange(event) {
-            this.$emit('filter', {originalEvent: event, value: event.target.value});
+            this.$emit('filter', { originalEvent: event, value: event.target.value });
             this.focusedOptionIndex = this.startRangeIndex = -1;
         },
         onFilterBlur() {
@@ -431,8 +472,7 @@ export default {
             if (pressedInInputText) {
                 event.currentTarget.setSelectionRange(0, 0);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 let metaKey = event.metaKey || event.ctrlKey;
                 let optionIndex = this.findFirstOptionIndex();
 
@@ -449,10 +489,10 @@ export default {
             if (pressedInInputText) {
                 const target = event.currentTarget;
                 const len = target.value.length;
+
                 target.setSelectionRange(len, len);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 let metaKey = event.metaKey || event.ctrlKey;
                 let optionIndex = this.findLastOptionIndex();
 
@@ -475,10 +515,8 @@ export default {
         },
         onEnterKey(event) {
             if (this.focusedOptionIndex !== -1) {
-                if (this.multiple && event.shiftKey)
-                    this.onOptionSelectRange(event, this.focusedOptionIndex);
-                else
-                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                if (this.multiple && event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex);
+                else this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
             }
 
             event.preventDefault();
@@ -501,37 +539,39 @@ export default {
         isSelected(option) {
             const optionValue = this.getOptionValue(option);
 
-            if (this.multiple)
-                return (this.modelValue || []).some(value => ObjectUtils.equals(value, optionValue, this.equalityKey));
-            else
-                return ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
+            if (this.multiple) return (this.modelValue || []).some((value) => ObjectUtils.equals(value, optionValue, this.equalityKey));
+            else return ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
         },
         findFirstOptionIndex() {
-            return this.visibleOptions.findIndex(option => this.isValidOption(option));
+            return this.visibleOptions.findIndex((option) => this.isValidOption(option));
         },
         findLastOptionIndex() {
-            return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+            return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
         },
         findNextOptionIndex(index) {
-            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
         findPrevOptionIndex(index) {
-            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findFirstSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findLastSelectedOptionIndex() {
-            return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1;
         },
         findNextSelectedOptionIndex(index) {
-            const matchedOptionIndex = this.hasSelectedOption && index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
         },
         findPrevSelectedOptionIndex(index) {
-            const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
         },
         findNearestSelectedOptionIndex(index, firstCheckUp = false) {
@@ -541,8 +581,7 @@ export default {
                 if (firstCheckUp) {
                     matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
                     matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
-                }
-                else {
+                } else {
                     matchedOptionIndex = this.findNextSelectedOptionIndex(index);
                     matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;
                 }
@@ -552,22 +591,24 @@ export default {
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findFirstSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
             const selectedIndex = this.findLastSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         searchOptions(event, char) {
             this.searchValue = (this.searchValue || '') + char;
 
             let optionIndex = -1;
+
             if (this.focusedOptionIndex !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
-            }
-            else {
-                optionIndex = this.visibleOptions.findIndex(option => this.isOptionMatched(option));
+                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
+                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
+            } else {
+                optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
             }
 
             if (optionIndex === -1 && this.focusedOptionIndex === -1) {
@@ -588,7 +629,7 @@ export default {
             }, 500);
         },
         removeOption(option) {
-            return this.modelValue.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
+            return this.modelValue.filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
         },
         changeFocusedOptionIndex(event, index) {
             if (this.focusedOptionIndex !== index) {
@@ -596,25 +637,24 @@ export default {
                 this.scrollInView();
 
                 if (this.selectOnFocus && !this.multiple) {
-                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                    this.onOptionSelect(event, this.visibleOptions[index]);
                 }
             }
         },
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
             const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            }
-            else if (!this.virtualScrollerDisabled) {
+            } else if (!this.virtualScrollerDisabled) {
                 this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
             }
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption && !this.multiple) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
-                this.updateModel(null, this.multiple ? [value] : value);
+                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex]);
             }
         },
         updateModel(event, value) {
@@ -626,7 +666,8 @@ export default {
                 result.push({ optionGroup: option, group: true, index });
 
                 const optionGroupChildren = this.getOptionGroupChildren(option);
-                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
 
                 return result;
             }, []);
@@ -641,13 +682,16 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-listbox p-component', {
-                'p-focus': this.focused,
-                'p-disabled': this.disabled
-            }];
+            return [
+                'p-listbox p-component',
+                {
+                    'p-focus': this.focused,
+                    'p-disabled': this.disabled
+                }
+            ];
         },
         visibleOptions() {
-            const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);
+            const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
             return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
         },
@@ -681,23 +725,26 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
         ariaSetSize() {
-            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+            return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller
+        VirtualScroller: VirtualScroller
     }
-}
+};
 </script>
 
 <style>
@@ -728,7 +775,7 @@ export default {
 .p-listbox-filter-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-listbox-filter {
diff --git a/components/megamenu/MegaMenu.d.ts b/components/megamenu/MegaMenu.d.ts
index 9f5bee027..57106b6d6 100755
--- a/components/megamenu/MegaMenu.d.ts
+++ b/components/megamenu/MegaMenu.d.ts
@@ -43,14 +43,13 @@ export interface MegaMenuSlots {
     }) => VNode[];
 }
 
-export declare type MegaMenuEmits = {
-}
+export declare type MegaMenuEmits = {};
 
-declare class MegaMenu extends ClassComponent<MegaMenuProps, MegaMenuSlots, MegaMenuEmits> { }
+declare class MegaMenu extends ClassComponent<MegaMenuProps, MegaMenuSlots, MegaMenuEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        MegaMenu: GlobalComponentConstructor<MegaMenu>
+        MegaMenu: GlobalComponentConstructor<MegaMenu>;
     }
 }
 
@@ -60,11 +59,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [MegaMenu](https://www.primefaces.org/primevue/showcase/#/megamenu)
+ * - [MegaMenu](https://www.primefaces.org/primevue/megamenu)
  *
  */
 export default MegaMenu;
diff --git a/components/megamenu/MegaMenu.spec.js b/components/megamenu/MegaMenu.spec.js
index 2c077a40f..15523e3d8 100644
--- a/components/megamenu/MegaMenu.spec.js
+++ b/components/megamenu/MegaMenu.spec.js
@@ -14,37 +14,39 @@ describe('MegaMenu.vue', () => {
             props: {
                 model: [
                     {
-                        label: 'Videos', icon: 'pi pi-fw pi-video',
+                        label: 'Videos',
+                        icon: 'pi pi-fw pi-video',
                         items: [
                             [
                                 {
                                     label: 'Video 1',
-                                    items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
+                                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
                                 },
                                 {
                                     label: 'Video 2',
-                                    items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
+                                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
                                 }
                             ]
                         ]
                     },
                     {
-                        label: 'Users', icon: 'pi pi-fw pi-users',
+                        label: 'Users',
+                        icon: 'pi pi-fw pi-users',
                         items: [
                             [
                                 {
                                     label: 'User 1',
-                                    items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
+                                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
                                 }
                             ],
                             [
                                 {
                                     label: 'User 2',
-                                    items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
+                                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
                                 },
                                 {
                                     label: 'User 3',
-                                    items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
+                                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
                                 }
                             ]
                         ]
@@ -85,4 +87,4 @@ describe('MegaMenu.vue', () => {
 
         expect(wrapper.find('.p-megamenu-vertical').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/megamenu/MegaMenu.vue b/components/megamenu/MegaMenu.vue
index 3a2f7a2f5..9743106a5 100755
--- a/components/megamenu/MegaMenu.vue
+++ b/components/megamenu/MegaMenu.vue
@@ -1,50 +1,60 @@
 <template>
     <div :class="containerClass">
-        <div class="p-megamenu-start" v-if="$slots.start">
+        <div v-if="$slots.start" class="p-megamenu-start">
             <slot name="start"></slot>
         </div>
         <ul class="p-megamenu-root-list" role="menubar">
-            <template v-for="(category,index) of model" :key="label(category) + '_' + index">
-                <li v-if="visible(category)"  :class="getCategoryClass(category)" :style="category.style"
-                    @mouseenter="onCategoryMouseEnter($event, category)" role="none">
+            <template v-for="(category, index) of model" :key="label(category) + '_' + index">
+                <li v-if="visible(category)" :class="getCategoryClass(category)" :style="category.style" @mouseenter="onCategoryMouseEnter($event, category)" role="none">
                     <template v-if="!$slots.item">
-                        <router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                            <a :href="href" :class="linkClass(category, {isActive, isExactActive})" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
+                        <router-link v-if="category.to && !disabled(category)" v-slot="{ navigate, href, isActive, isExactActive }" :to="category.to" custom>
+                            <a v-ripple :href="href" :class="linkClass(category, { isActive, isExactActive })" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem">
                                 <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
-                                <span class="p-menuitem-text">{{label(category)}}</span>
+                                <span class="p-menuitem-text">{{ label(category) }}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="category.url" :class="linkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
-                            role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="disabled(category) ? null : '0'" v-ripple>
+                        <a
+                            v-else
+                            v-ripple
+                            :href="category.url"
+                            :class="linkClass(category)"
+                            :target="category.target"
+                            @click="onCategoryClick($event, category)"
+                            @keydown="onCategoryKeydown($event, category)"
+                            role="menuitem"
+                            :aria-haspopup="category.items != null"
+                            :aria-expanded="category === activeItem"
+                            :tabindex="disabled(category) ? null : '0'"
+                        >
                             <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
-                            <span class="p-menuitem-text">{{label(category)}}</span>
+                            <span class="p-menuitem-text">{{ label(category) }}</span>
                             <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="category"></component>
-                    <div class="p-megamenu-panel" v-if="category.items">
+                    <div v-if="category.items" class="p-megamenu-panel">
                         <div class="p-megamenu-grid">
-                            <div v-for="(column,columnIndex) of category.items" :key="label(category) + '_column_' + columnIndex" :class="getColumnClassName(category)">
-                                <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
-                                    <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
+                            <div v-for="(column, columnIndex) of category.items" :key="label(category) + '_column_' + columnIndex" :class="getColumnClassName(category)">
+                                <ul v-for="(submenu, submenuIndex) of column" :key="submenu.label + '_submenu_' + submenuIndex" class="p-megamenu-submenu" role="menu">
+                                    <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{ submenu.label }}</li>
                                     <template v-for="(item, i) of submenu.items" :key="label(item) + i.toString()">
-                                        <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
+                                        <li v-if="visible(item) && !item.separator" role="none" :class="getSubmenuItemClass(item)" :style="item.style">
                                             <template v-if="!$slots.item">
-                                                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                                                    <a :href="href" :class="linkClass(item, {isActive, isExactActive})" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
+                                                <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                                                    <a v-ripple :href="href" :class="linkClass(item, { isActive, isExactActive })" @click="onLeafClick($event, item, navigate)" role="menuitem">
                                                         <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                                                        <span class="p-menuitem-text">{{label(item)}}</span>
+                                                        <span class="p-menuitem-text">{{ label(item) }}</span>
                                                     </a>
                                                 </router-link>
-                                                <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
+                                                <a v-else v-ripple :href="item.url" :class="linkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'">
                                                     <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                                                    <span class="p-menuitem-text">{{label(item)}}</span>
-                                                    <span :class="getSubmenuIcon()" v-if="item.items"></span>
+                                                    <span class="p-menuitem-text">{{ label(item) }}</span>
+                                                    <span v-if="item.items" :class="getSubmenuIcon()"></span>
                                                 </a>
                                             </template>
                                             <component v-else :is="$slots.item" :item="item"></component>
                                         </li>
-                                        <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+                                        <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
                                     </template>
                                 </ul>
                             </div>
@@ -53,20 +63,20 @@
                 </li>
             </template>
         </ul>
-        <div class="p-megamenu-end" v-if="$slots.end">
+        <div v-if="$slots.end" class="p-megamenu-end">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'MegaMenu',
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -83,7 +93,7 @@ export default {
     data() {
         return {
             activeItem: null
-        }
+        };
     },
     beforeUnmount() {
         this.unbindDocumentClickListener();
@@ -92,6 +102,7 @@ export default {
         onLeafClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -111,6 +122,7 @@ export default {
         onCategoryMouseEnter(event, category) {
             if (this.disabled(category)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -121,6 +133,7 @@ export default {
         onCategoryClick(event, category, navigate) {
             if (this.disabled(category)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -135,8 +148,7 @@ export default {
                 if (this.activeItem && this.activeItem === category) {
                     this.activeItem = null;
                     this.unbindDocumentClickListener();
-                }
-                else {
+                } else {
                     this.activeItem = category;
                     this.bindDocumentClickListener();
                 }
@@ -149,49 +161,41 @@ export default {
         onCategoryKeydown(event, category) {
             let listItem = event.currentTarget.parentElement;
 
-            switch(event.which) {
+            switch (event.which) {
                 //down
                 case 40:
-                    if (this.horizontal)
-                        this.expandMenu(category);
-                    else
-                        this.navigateToNextItem(listItem);
+                    if (this.horizontal) this.expandMenu(category);
+                    else this.navigateToNextItem(listItem);
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
-                    if (this.vertical)
-                        this.navigateToPrevItem(listItem);
-                    else if (category.items && category === this.activeItem)
-                        this.collapseMenu();
+                    if (this.vertical) this.navigateToPrevItem(listItem);
+                    else if (category.items && category === this.activeItem) this.collapseMenu();
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //right
                 case 39:
-                    if (this.horizontal)
-                        this.navigateToNextItem(listItem);
-                    else
-                        this.expandMenu(category);
+                    if (this.horizontal) this.navigateToNextItem(listItem);
+                    else this.expandMenu(category);
 
-                    event.preventDefault()
-                break;
+                    event.preventDefault();
+                    break;
 
                 //left
                 case 37:
-                    if (this.horizontal)
-                        this.navigateToPrevItem(listItem);
-                    else if (category.items && category === this.activeItem)
-                        this.collapseMenu();
+                    if (this.horizontal) this.navigateToPrevItem(listItem);
+                    else if (category.items && category === this.activeItem) this.collapseMenu();
 
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         expandMenu(item) {
@@ -205,85 +209,93 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         navigateToNextItem(listItem) {
             var nextItem = this.findNextItem(listItem);
+
             if (nextItem) {
                 nextItem.children[0].focus();
             }
         },
         navigateToPrevItem(listItem) {
             var prevItem = this.findPrevItem(listItem);
+
             if (prevItem) {
                 prevItem.children[0].focus();
             }
         },
         getCategoryClass(category) {
-            return ['p-menuitem', {
-                'p-menuitem-active': category === this.activeItem
-            }, category.class];
+            return [
+                'p-menuitem',
+                {
+                    'p-menuitem-active': category === this.activeItem
+                },
+                category.class
+            ];
         },
         getCategorySubMenuIcon() {
-            return ['p-submenu-icon pi', {
-                'pi-angle-down': this.horizontal,
-                'pi-angle-right': this.vertical
-            }];
+            return [
+                'p-submenu-icon pi',
+                {
+                    'pi-angle-down': this.horizontal,
+                    'pi-angle-right': this.vertical
+                }
+            ];
         },
         getCategoryIcon(category) {
             return ['p-menuitem-icon', category.icon];
         },
         getColumnClassName(category) {
-            let length = category.items ? category.items.length: 0;
+            let length = category.items ? category.items.length : 0;
             let columnClass;
 
-            switch(length) {
+            switch (length) {
                 case 2:
-                    columnClass= 'p-megamenu-col-6';
-                break;
+                    columnClass = 'p-megamenu-col-6';
+                    break;
 
                 case 3:
-                    columnClass= 'p-megamenu-col-4';
-                break;
+                    columnClass = 'p-megamenu-col-4';
+                    break;
 
                 case 4:
-                    columnClass= 'p-megamenu-col-3';
-                break;
+                    columnClass = 'p-megamenu-col-3';
+                    break;
 
                 case 6:
-                    columnClass= 'p-megamenu-col-2';
-                break;
+                    columnClass = 'p-megamenu-col-2';
+                    break;
 
                 default:
-                    columnClass= 'p-megamenu-col-12';
-                break;
+                    columnClass = 'p-megamenu-col-12';
+                    break;
             }
 
             return columnClass;
         },
         getSubmenuHeaderClass(submenu) {
-            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': this.disabled(submenu)}];
+            return ['p-megamenu-submenu-header', submenu.class, { 'p-disabled': this.disabled(submenu) }];
         },
         getSubmenuItemClass(item) {
             return ['p-menuitem', item.class];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -304,21 +316,24 @@ export default {
             }
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.disabled === 'function' ? item.label() : item.label);
+            return typeof item.disabled === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return ['p-megamenu p-component', {
-                'p-megamenu-horizontal': this.horizontal,
-                'p-megamenu-vertical': this.vertical
-            }];
+            return [
+                'p-megamenu p-component',
+                {
+                    'p-megamenu-horizontal': this.horizontal,
+                    'p-megamenu-vertical': this.vertical
+                }
+            ];
         },
         horizontal() {
             return this.orientation === 'horizontal';
@@ -328,9 +343,9 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -395,7 +410,6 @@ export default {
     margin-left: auto;
 }
 
-
 .p-megamenu-grid {
     display: flex;
 }
diff --git a/components/menu/Menu.d.ts b/components/menu/Menu.d.ts
index 829923f31..627544819 100755
--- a/components/menu/Menu.d.ts
+++ b/components/menu/Menu.d.ts
@@ -41,13 +41,10 @@ export interface MenuSlots {
      * Custom item template.
      * @param {Object} scope - item slot's params.
      */
-    item: (scope: {
-        item: MenuItem;
-    }) => VNode[];
+    item: (scope: { item: MenuItem }) => VNode[];
 }
 
-export declare type MenuEmits = {
-}
+export declare type MenuEmits = {};
 
 declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
     /**
@@ -74,7 +71,7 @@ declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Menu: GlobalComponentConstructor<Menu>
+        Menu: GlobalComponentConstructor<Menu>;
     }
 }
 
@@ -84,11 +81,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Menu](https://www.primefaces.org/primevue/showcase/#/menu)
+ * - [Menu](https://www.primefaces.org/primevue/menu)
  *
  */
 export default Menu;
diff --git a/components/menu/Menu.spec.js b/components/menu/Menu.spec.js
index 758f1ae3e..933d6f47b 100644
--- a/components/menu/Menu.spec.js
+++ b/components/menu/Menu.spec.js
@@ -18,34 +18,38 @@ describe('Menu.vue', () => {
                 model: [
                     {
                         label: 'Options',
-                        items: [{
-                            label: 'Update',
-                            icon: 'pi pi-refresh',
-                            command: () => {
-                                this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                        items: [
+                            {
+                                label: 'Update',
+                                icon: 'pi pi-refresh',
+                                command: () => {
+                                    this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                                }
+                            },
+                            {
+                                label: 'Delete',
+                                icon: 'pi pi-times',
+                                command: () => {
+                                    this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                                }
                             }
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times',
-                            command: () => {
-                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
-                            }
-                        }
-                    ]},
+                        ]
+                    },
                     {
                         label: 'Navigate',
-                        items: [{
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]}
+                        items: [
+                            {
+                                label: 'Vue Website',
+                                icon: 'pi pi-external-link',
+                                url: 'https://vuejs.org/'
+                            },
+                            {
+                                label: 'Router',
+                                icon: 'pi pi-upload',
+                                to: '/fileupload'
+                            }
+                        ]
+                    }
                 ]
             }
         });
@@ -67,4 +71,4 @@ describe('Menu.vue', () => {
 
         expect(wrapper.find('.p-menu.p-component').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue
index d0e100c5e..8f3402f97 100755
--- a/components/menu/Menu.vue
+++ b/components/menu/Menu.vue
@@ -1,19 +1,19 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <ul class="p-menu-list p-reset" role="menu">
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li class="p-submenu-header" v-if="item.items">
-                                <slot name="item" :item="item">{{label(item)}}</slot>
+                            <li v-if="item.items" class="p-submenu-header">
+                                <slot name="item" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + j">
                                 <Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" :exact="exact" />
-                                <li v-else-if="visible(child) && child.separator" :class="['p-menu-separator', child.class]" :style="child.style" :key="'separator' + i + j" role="separator"></li>
+                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="['p-menu-separator', child.class]" :style="child.style" role="separator"></li>
                             </template>
                         </template>
-                        <li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i.toString()" role="separator"></li>
+                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
                         <Menuitem v-else :key="label(item) + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
                     </template>
                 </ul>
@@ -23,21 +23,21 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Menuitem from './Menuitem.vue';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'Menu',
-    emits: ['show', 'hide'],
     inheritAttrs: false,
+    emits: ['show', 'hide'],
     props: {
         popup: {
             type: Boolean,
             default: false
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -76,16 +76,19 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.target = null;
 
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (this.disabled(item)) {
                 return;
             }
@@ -101,10 +104,8 @@ export default {
             this.hide();
         },
         toggle(event) {
-            if (this.overlayVisible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.overlayVisible) this.hide();
+            else this.show(event);
         },
         show(event) {
             this.overlayVisible = true;
@@ -148,6 +149,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -180,6 +182,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -193,13 +196,13 @@ export default {
             return this.target && (this.target === event.target || this.target.contains(event.target));
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         },
         containerRef(el) {
             this.container = el;
@@ -213,18 +216,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-menu p-component', {
-                'p-menu-overlay': this.popup,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }]
+            return [
+                'p-menu p-component',
+                {
+                    'p-menu-overlay': this.popup,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'Menuitem': Menuitem,
-        'Portal': Portal
+        Menuitem: Menuitem,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/menu/Menuitem.vue b/components/menu/Menuitem.vue
index 93d45a9d5..5fc7bd80c 100755
--- a/components/menu/Menuitem.vue
+++ b/components/menu/Menuitem.vue
@@ -1,15 +1,15 @@
 <template>
-    <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
+    <li v-if="visible()" :class="containerClass" role="none" :style="item.style">
         <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" @click="onClick($event, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
-                    <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                    <span class="p-menuitem-text">{{label()}}</span>
+            <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                <a v-ripple :href="href" @click="onClick($event, navigate)" :class="linkClass(item, { isActive, isExactActive })" role="menuitem">
+                    <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                    <span class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                <span class="p-menuitem-text">{{label()}}</span>
+            <a v-else v-ripple :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'">
+                <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                <span class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="template" :item="item"></component>
@@ -37,20 +37,23 @@ export default {
             });
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         visible() {
-            return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label() {
-            return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
+            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
     computed: {
@@ -59,7 +62,7 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/menubar/Menubar.d.ts b/components/menubar/Menubar.d.ts
index 467057537..79803771a 100755
--- a/components/menubar/Menubar.d.ts
+++ b/components/menubar/Menubar.d.ts
@@ -35,14 +35,13 @@ export interface MenubarSlots {
     }) => VNode[];
 }
 
-export declare type MenubarEmits = {
-}
+export declare type MenubarEmits = {};
 
-declare class Menubar extends ClassComponent<MenubarProps, MenubarSlots, MenubarEmits> { }
+declare class Menubar extends ClassComponent<MenubarProps, MenubarSlots, MenubarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Menubar: GlobalComponentConstructor<Menubar>
+        Menubar: GlobalComponentConstructor<Menubar>;
     }
 }
 
@@ -52,11 +51,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Menubar](https://www.primefaces.org/primevue/showcase/#/menubar)
+ * - [Menubar](https://www.primefaces.org/primevue/menubar)
  *
  */
 export default Menubar;
diff --git a/components/menubar/Menubar.spec.js b/components/menubar/Menubar.spec.js
index 006eeed1a..ad08300fe 100644
--- a/components/menubar/Menubar.spec.js
+++ b/components/menubar/Menubar.spec.js
@@ -14,39 +14,39 @@ describe('Menubar.vue', () => {
             props: {
                 model: [
                     {
-                        label:'File',
-                        icon:'pi pi-fw pi-file',
-                        items:[
+                        label: 'File',
+                        icon: 'pi pi-fw pi-file',
+                        items: [
                             {
-                                label:'New',
-                                icon:'pi pi-fw pi-plus',
-                                items:[
+                                label: 'New',
+                                icon: 'pi pi-fw pi-plus',
+                                items: [
                                     {
-                                        label:'Bookmark',
-                                        icon:'pi pi-fw pi-bookmark'
+                                        label: 'Bookmark',
+                                        icon: 'pi pi-fw pi-bookmark'
                                     },
                                     {
-                                        label:'Video',
-                                        icon:'pi pi-fw pi-video'
+                                        label: 'Video',
+                                        icon: 'pi pi-fw pi-video'
                                     }
                                 ]
                             },
                             {
-                                label:'Delete',
-                                icon:'pi pi-fw pi-trash'
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-trash'
                             },
                             {
-                                separator:true
+                                separator: true
                             },
                             {
-                                label:'Export',
-                                icon:'pi pi-fw pi-external-link'
+                                label: 'Export',
+                                icon: 'pi pi-fw pi-external-link'
                             }
                         ]
                     },
                     {
-                        label:'Quit',
-                        icon:'pi pi-fw pi-power-off'
+                        label: 'Quit',
+                        icon: 'pi pi-fw pi-power-off'
                     }
                 ]
             },
@@ -54,7 +54,7 @@ describe('Menubar.vue', () => {
                 start: 'Start Slot',
                 end: 'End Slot'
             }
-        })
+        });
     });
 
     it('should exist', () => {
@@ -71,4 +71,4 @@ describe('Menubar.vue', () => {
         expect(wrapper.find('.p-menubar-end').exists()).toBe(true);
         expect(wrapper.find('.p-menubar-end').text()).toBe('End Slot');
     });
-});
\ No newline at end of file
+});
diff --git a/components/menubar/Menubar.vue b/components/menubar/Menubar.vue
index 791836c80..f51b8eb6a 100755
--- a/components/menubar/Menubar.vue
+++ b/components/menubar/Menubar.vue
@@ -1,14 +1,13 @@
 <template>
     <div :class="containerClass">
-        <div class="p-menubar-start" v-if="$slots.start">
+        <div v-if="$slots.start" class="p-menubar-start">
             <slot name="start"></slot>
         </div>
         <a ref="menubutton" tabindex="0" class="p-menubar-button" @click="toggle($event)">
             <i class="pi pi-bars" />
         </a>
-        <MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive" 
-            @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
-        <div class="p-menubar-end" v-if="$slots.end">
+        <MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
+        <div v-if="$slots.end" class="p-menubar-end">
             <slot name="end"></slot>
         </div>
     </div>
@@ -16,12 +15,12 @@
 
 <script>
 import MenubarSub from './MenubarSub.vue';
-import {ZIndexUtils} from 'primevue/utils';
+import { ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Menubar',
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -34,11 +33,12 @@ export default {
     data() {
         return {
             mobileActive: false
-        }
+        };
     },
     beforeUnmount() {
         this.mobileActive = false;
         this.unbindOutsideClickListener();
+
         if (this.$refs.rootmenu && this.$refs.rootmenu.$el) {
             ZIndexUtils.clear(this.$refs.rootmenu.$el);
         }
@@ -48,8 +48,7 @@ export default {
             if (this.mobileActive) {
                 this.mobileActive = false;
                 ZIndexUtils.clear(this.$refs.rootmenu.$el);
-            }
-            else {
+            } else {
                 this.mobileActive = true;
                 ZIndexUtils.set('menu', this.$refs.rootmenu.$el, this.$primevue.config.zIndex.menu);
             }
@@ -60,11 +59,11 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.mobileActive && this.$refs.rootmenu.$el !== event.target && !this.$refs.rootmenu.$el.contains(event.target)
-                        && this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target)) {
+                    if (this.mobileActive && this.$refs.rootmenu.$el !== event.target && !this.$refs.rootmenu.$el.contains(event.target) && this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target)) {
                         this.mobileActive = false;
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -80,13 +79,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-menubar p-component', {'p-menubar-mobile-active': this.mobileActive}];
+            return ['p-menubar p-component', { 'p-menubar-mobile-active': this.mobileActive }];
         }
     },
     components: {
-        'MenubarSub': MenubarSub
+        MenubarSub: MenubarSub
     }
-}
+};
 </script>
 
 <style>
@@ -138,7 +137,7 @@ export default {
     z-index: 1;
 }
 
-.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {
+.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
     display: block;
     left: 100%;
     top: 0;
diff --git a/components/menubar/MenubarSub.vue b/components/menubar/MenubarSub.vue
index 10827b925..734e44318 100755
--- a/components/menubar/MenubarSub.vue
+++ b/components/menubar/MenubarSub.vue
@@ -1,33 +1,52 @@
 <template>
     <ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
         <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
-                @mouseenter="onItemMouseEnter($event, item)">
+            <li v-if="visible(item) && !item.separator" role="none" :class="getItemClass(item)" :style="item.style" @mouseenter="onItemMouseEnter($event, item)">
                 <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" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
-                            <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                        <a v-ripple :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, { isActive, isExactActive })" @keydown="onItemKeyDown($event, item)" role="menuitem">
+                            <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                        <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                        <span class="p-menuitem-text">{{label(item)}}</span>
-                        <span :class="getSubmenuIcon()" v-if="item.items"></span>
+                    <a
+                        v-else
+                        v-ripple
+                        :href="item.url"
+                        :class="linkClass(item)"
+                        :target="item.target"
+                        :aria-haspopup="item.items != null"
+                        :aria-expanded="item === activeItem"
+                        @click="onItemClick($event, item)"
+                        @keydown="onItemKeyDown($event, item)"
+                        role="menuitem"
+                        :tabindex="disabled(item) ? null : '0'"
+                    >
+                        <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                        <span class="p-menuitem-text">{{ label(item) }}</span>
+                        <span v-if="item.items" :class="getSubmenuIcon()"></span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
-                <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :mobileActive="mobileActive"
-                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
+                <MenubarSub
+                    v-if="visible(item) && item.items"
+                    :key="label(item) + '_sub_'"
+                    :model="item.items"
+                    :mobileActive="mobileActive"
+                    @leaf-click="onLeafClick"
+                    @keydown-item="onChildItemKeyDown"
+                    :parentActive="item === activeItem"
+                    :template="template"
+                    :exact="exact"
+                />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+            <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
         </template>
     </ul>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -64,6 +83,11 @@ export default {
         }
     },
     documentClickListener: null,
+    data() {
+        return {
+            activeItem: null
+        };
+    },
     watch: {
         parentActive(newValue) {
             if (!newValue) {
@@ -71,11 +95,6 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
     updated() {
         if (this.root && this.activeItem) {
             this.bindDocumentClickListener();
@@ -88,6 +107,7 @@ export default {
         onItemMouseEnter(event, item) {
             if (this.disabled(item) || this.mobileActive) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -95,14 +115,14 @@ export default {
                 if (this.activeItem || this.popup) {
                     this.activeItem = item;
                 }
-            }
-            else {
+            } else {
                 this.activeItem = item;
             }
         },
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -114,10 +134,8 @@ export default {
             }
 
             if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
+                if (this.activeItem && item === this.activeItem) this.activeItem = null;
+                else this.activeItem = item;
             }
 
             if (!item.items) {
@@ -135,20 +153,19 @@ export default {
         onItemKeyDown(event, item) {
             let listItem = event.currentTarget.parentElement;
 
-            switch(event.which) {
+            switch (event.which) {
                 //down
                 case 40:
                     if (this.root) {
                         if (item.items) {
                             this.expandSubmenu(item, listItem);
                         }
-                    }
-                    else {
+                    } else {
                         this.navigateToNextItem(listItem);
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
@@ -157,24 +174,24 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //right
                 case 39:
                     if (this.root) {
                         var nextItem = this.findNextItem(listItem);
+
                         if (nextItem) {
                             nextItem.children[0].focus();
                         }
-                    }
-                    else {
+                    } else {
                         if (item.items) {
                             this.expandSubmenu(item, listItem);
                         }
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //left
                 case 37:
@@ -183,10 +200,10 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
 
             this.$emit('keydown-item', {
@@ -200,8 +217,7 @@ export default {
                 if (event.originalEvent.which === 38 && event.element.previousElementSibling == null) {
                     this.collapseMenu(event.element);
                 }
-            }
-            else {
+            } else {
                 //left
                 if (event.originalEvent.which === 37) {
                     this.collapseMenu(event.element);
@@ -211,18 +227,14 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         expandSubmenu(item, listItem) {
             this.activeItem = item;
@@ -237,29 +249,36 @@ export default {
         },
         navigateToNextItem(listItem) {
             var nextItem = this.findNextItem(listItem);
+
             if (nextItem) {
                 nextItem.children[0].focus();
             }
         },
         navigateToPrevItem(listItem) {
             var prevItem = this.findPrevItem(listItem);
+
             if (prevItem) {
                 prevItem.children[0].focus();
             }
         },
         getItemClass(item) {
             return [
-                'p-menuitem', item.class, {
+                'p-menuitem',
+                item.class,
+                {
                     'p-menuitem-active': this.activeItem === item
                 }
-            ]
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -280,27 +299,25 @@ export default {
             }
         },
         getSubmenuIcon() {
-            return [
-                'p-submenu-icon pi', {'pi-angle-right': !this.root, 'pi-angle-down': this.root}
-            ];
+            return ['p-submenu-icon pi', { 'pi-angle-right': !this.root, 'pi-angle-down': this.root }];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root, 'p-menubar-root-list': this.root};
+            return { 'p-submenu-list': !this.root, 'p-menubar-root-list': this.root };
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/menuitem/MenuItem.d.ts b/components/menuitem/MenuItem.d.ts
index f2c5a8c30..108417d41 100644
--- a/components/menuitem/MenuItem.d.ts
+++ b/components/menuitem/MenuItem.d.ts
@@ -1,4 +1,4 @@
-import { RouteLocationRaw } from "vue-router";
+import { RouteLocationRaw } from 'vue-router';
 
 type MenuItemLabelType = string | ((...args: any) => string) | undefined;
 
@@ -74,7 +74,7 @@ export interface MenuItem {
     /**
      * Unique identifier of an item.
      */
-    key?: string | undefined
+    key?: string | undefined;
     /**
      * Optional
      */
diff --git a/components/message/Message.d.ts b/components/message/Message.d.ts
index 7b3174222..34be405d8 100755
--- a/components/message/Message.d.ts
+++ b/components/message/Message.d.ts
@@ -42,14 +42,14 @@ export declare type MessageEmits = {
      * Callback to invoke when a message is closed.
      * @param {Event} event - Browser event.
      */
-    'close': (event: Event) => void;
-}
+    close: (event: Event) => void;
+};
 
-declare class Message extends ClassComponent<MessageProps, MessageSlots, MessageEmits> { }
+declare class Message extends ClassComponent<MessageProps, MessageSlots, MessageEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Message: GlobalComponentConstructor<Message>
+        Message: GlobalComponentConstructor<Message>;
     }
 }
 
@@ -59,7 +59,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Message](https://www.primefaces.org/primevue/showcase/#/message)
+ * - [Message](https://www.primefaces.org/primevue/message)
  *
  */
 export default Message;
diff --git a/components/message/Message.spec.js b/components/message/Message.spec.js
index 78e2707fd..19bf77a04 100644
--- a/components/message/Message.spec.js
+++ b/components/message/Message.spec.js
@@ -49,4 +49,4 @@ describe('Message.vue', () => {
         jest.runTimersToTime(3001);
         expect(wrapper.vm.visible).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/message/Message.vue b/components/message/Message.vue
index 0f45e7cbc..0896b3aaf 100755
--- a/components/message/Message.vue
+++ b/components/message/Message.vue
@@ -1,12 +1,12 @@
 <template>
     <transition name="p-message" appear>
-        <div :class="containerClass" v-show="visible" role="alert">
+        <div v-show="visible" :class="containerClass" role="alert">
             <div class="p-message-wrapper">
                 <span :class="iconClass"></span>
                 <div class="p-message-text">
                     <slot></slot>
                 </div>
-                <button class="p-message-close p-link" @click="close($event)" v-if="closable" type="button" v-ripple>
+                <button v-if="closable" v-ripple class="p-message-close p-link" @click="close($event)" type="button">
                     <i class="p-message-close-icon pi pi-times"></i>
                 </button>
             </div>
@@ -40,13 +40,13 @@ export default {
         icon: {
             type: String,
             default: null
-        },
+        }
     },
     timeout: null,
     data() {
         return {
             visible: true
-        }
+        };
     },
     mounted() {
         if (!this.sticky) {
@@ -66,18 +66,23 @@ export default {
             return 'p-message p-component p-message-' + this.severity;
         },
         iconClass() {
-            return ['p-message-icon pi', this.icon ? this.icon : {
-                'pi-info-circle': this.severity === 'info',
-                'pi-check': this.severity === 'success',
-                'pi-exclamation-triangle': this.severity === 'warn',
-                'pi-times-circle': this.severity === 'error'
-            }];
+            return [
+                'p-message-icon pi',
+                this.icon
+                    ? this.icon
+                    : {
+                          'pi-info-circle': this.severity === 'info',
+                          'pi-check': this.severity === 'success',
+                          'pi-exclamation-triangle': this.severity === 'warn',
+                          'pi-times-circle': this.severity === 'error'
+                      }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -103,7 +108,7 @@ export default {
 }
 
 .p-message-enter-active {
-    transition: opacity .3s;
+    transition: opacity 0.3s;
 }
 
 .p-message.p-message-leave-from {
@@ -118,7 +123,7 @@ export default {
 
 .p-message-leave-active {
     overflow: hidden;
-    transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;
+    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
 }
 
 .p-message-leave-active .p-message-close {
diff --git a/components/multiselect/MultiSelect.d.ts b/components/multiselect/MultiSelect.d.ts
index 0ef65d612..6d1e785bf 100755
--- a/components/multiselect/MultiSelect.d.ts
+++ b/components/multiselect/MultiSelect.d.ts
@@ -202,6 +202,11 @@ export interface MultiSelectProps {
      * Default value is true.
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * Whether to focus on the filter element when the overlay panel is shown.
+     * Default value is false.
+     */
+    autoFilterFocus?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * Default value is '{0} results are available'.
@@ -234,11 +239,11 @@ export interface MultiSelectProps {
     /**
      * Defines a string value that labels an interactive element.
      */
-    "aria-label"?: string | undefined;
+    'aria-label'?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface MultiSelectSlots {
@@ -381,17 +386,17 @@ export declare type MultiSelectEmits = {
      * Callback to invoke on value change.
      * @param {MultiSelectChangeEvent} event - Custom change event.
      */
-    'change': (event: MultiSelectChangeEvent) => void;
+    change: (event: MultiSelectChangeEvent) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
+    blur: (event: Event) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -403,22 +408,22 @@ export declare type MultiSelectEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke on filter input.
      * @param {MultiSelectFilterEvent} event - Custom filter event.
      */
-    'filter': (event: MultiSelectFilterEvent) => void;
+    filter: (event: MultiSelectFilterEvent) => void;
     /**
      * Callback to invoke when all data is selected.
      * @param {MultiSelectAllChangeEvent} event - Custom select all change event.
      */
     'selectall-change': (event: MultiSelectAllChangeEvent) => void;
-}
+};
 
 declare class MultiSelect extends ClassComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits> {
     /**
@@ -439,7 +444,7 @@ declare class MultiSelect extends ClassComponent<MultiSelectProps, MultiSelectSl
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        MultiSelect: GlobalComponentConstructor<MultiSelect>
+        MultiSelect: GlobalComponentConstructor<MultiSelect>;
     }
 }
 
@@ -449,7 +454,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [MultiSelect](https://www.primefaces.org/primevue/showcase/#/multiselect)
+ * - [MultiSelect](https://www.primefaces.org/primevue/multiselect)
  *
  */
 export default MultiSelect;
diff --git a/components/multiselect/MultiSelect.spec.js b/components/multiselect/MultiSelect.spec.js
index 7f063b974..c2ff2e316 100644
--- a/components/multiselect/MultiSelect.spec.js
+++ b/components/multiselect/MultiSelect.spec.js
@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils';
 import PrimeVue from '@/components/config/PrimeVue';
+import { mount } from '@vue/test-utils';
 import MultiSelect from './MultiSelect.vue';
 
 describe('MultiSelect.vue', () => {
@@ -16,24 +16,25 @@ describe('MultiSelect.vue', () => {
             props: {
                 modelValue: null,
                 options: [
-                    {name: 'New York', code: 'NY'},
-                    {name: 'Rome', code: 'RM'},
-                    {name: 'London', code: 'LDN'},
-                    {name: 'Istanbul', code: 'IST'},
-                    {name: 'Paris', code: 'PRS'}
+                    { name: 'New York', code: 'NY' },
+                    { name: 'Rome', code: 'RM' },
+                    { name: 'London', code: 'LDN' },
+                    { name: 'Istanbul', code: 'IST' },
+                    { name: 'Paris', code: 'PRS' }
                 ],
                 optionLabel: 'name',
                 placeholder: 'Select Cities'
             }
         });
-
-        await wrapper.vm.onClick({});
     });
 
-    it('should exist', () => {
+    it('should exist', async () => {
         expect(wrapper.find('.p-multiselect.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-multiselect-label.p-placeholder').text()).toBe('Select Cities');
-        expect(wrapper.find('.p-multiselect-panel').exists()).toBe(true);
+        expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
+
+        await wrapper.vm.onContainerClick();
+
         expect(wrapper.findAll('li.p-multiselect-item').length).toBe(5);
         expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['aria-label']).toBe('New York');
         expect(wrapper.findAll('li.p-multiselect-item')[0].findAll('span')[1].text()).toBe('New York');
@@ -44,20 +45,22 @@ describe('MultiSelect.vue', () => {
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0]]]);
 
-        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
+        await wrapper.vm.onContainerClick();
 
         expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
         expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
     });
 
     it('should select multiple item', async () => {
-        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
 
         await wrapper.vm.onOptionSelect({}, wrapper.vm.options[1]);
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0], wrapper.vm.options[1]]]);
 
-        await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]]});
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
+        await wrapper.vm.onContainerClick();
 
         expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
         expect(wrapper.findAll('li.p-multiselect-item')[1].classes()).toContain('p-highlight');
@@ -65,14 +68,17 @@ describe('MultiSelect.vue', () => {
 
     it('should close panel', async () => {
         await wrapper.vm.onCloseClick();
-        
+
         expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
     });
 
     it('should chip work', async () => {
-        await wrapper.setProps({ display: 'chip', modelValue: [wrapper.vm.options[0]] });
-        
+        await wrapper.setProps({
+            display: 'chip',
+            modelValue: [wrapper.vm.options[0]]
+        });
+
         expect(wrapper.find('.p-multiselect-token').exists()).toBe(true);
         expect(wrapper.find('.p-multiselect-token-label').text()).toBe('New York');
     });
-});
\ No newline at end of file
+});
diff --git a/components/multiselect/MultiSelect.vue b/components/multiselect/MultiSelect.vue
index e427a4def..676888189 100755
--- a/components/multiselect/MultiSelect.vue
+++ b/components/multiselect/MultiSelect.vue
@@ -1,25 +1,41 @@
 <template>
     <div ref="container" :class="containerClass" @click="onContainerClick">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" :id="inputId" type="text" readonly :disabled="disabled" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1"
-                role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" :aria-expanded="overlayVisible"
-                :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
-                @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps" />
+            <input
+                ref="focusInput"
+                :id="inputId"
+                type="text"
+                readonly
+                :disabled="disabled"
+                :placeholder="placeholder"
+                :tabindex="!disabled ? tabindex : -1"
+                role="combobox"
+                :aria-label="ariaLabel"
+                :aria-labelledby="ariaLabelledby"
+                aria-haspopup="listbox"
+                :aria-expanded="overlayVisible"
+                :aria-controls="id + '_list'"
+                :aria-activedescendant="focused ? focusedOptionId : undefined"
+                @focus="onFocus"
+                @blur="onBlur"
+                @keydown="onKeyDown"
+                v-bind="inputProps"
+            />
         </div>
         <div class="p-multiselect-label-container">
             <div :class="labelClass">
                 <slot name="value" :value="modelValue" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
-                        {{label || 'empty'}}
+                        {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
+                        <div v-for="item of modelValue" :key="getLabelByValue(item)" class="p-multiselect-token">
                             <slot name="chip" :value="item">
-                                <span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
+                                <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
                             </slot>
                             <span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeOption($event, item)"></span>
                         </div>
-                        <template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
+                        <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
@@ -37,59 +53,83 @@
                     <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
                         <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
                             <div class="p-hidden-accessible">
-                                <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
+                                <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
                             </div>
-                            <div :class="['p-checkbox-box', {'p-highlight': allSelected, 'p-focus': headerCheckboxFocused}]">
-                                <span :class="['p-checkbox-icon', {'pi pi-check': allSelected}]"></span>
+                            <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
+                                <span :class="['p-checkbox-icon', { 'pi pi-check': allSelected }]"></span>
                             </div>
                         </div>
                         <div v-if="filter" class="p-multiselect-filter-container">
-                            <input type="text" ref="filterInput" :value="filterValue" @vnode-updated="onFilterUpdated" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder"
-                                role="searchbox" autocomplete="off" :aria-owns="id + '_list'" :aria-activedescendant="focusedOptionId"
-                                @keydown="onFilterKeyDown" @blur="onFilterBlur" @input="onFilterChange" v-bind="filterInputProps"/>
+                            <input
+                                ref="filterInput"
+                                type="text"
+                                :value="filterValue"
+                                @vnode-updated="onFilterUpdated"
+                                class="p-multiselect-filter p-inputtext p-component"
+                                :placeholder="filterPlaceholder"
+                                role="searchbox"
+                                autocomplete="off"
+                                :aria-owns="id + '_list'"
+                                :aria-activedescendant="focusedOptionId"
+                                @keydown="onFilterKeyDown"
+                                @blur="onFilterBlur"
+                                @input="onFilterChange"
+                                v-bind="filterInputProps"
+                            />
                             <span class="p-multiselect-filter-icon pi pi-search"></span>
                         </div>
                         <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
-                            {{filterResultMessageText}}
+                            {{ filterResultMessageText }}
                         </span>
-                        <button class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-ripple v-bind="closeButtonProps">
+                        <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
                             <span class="p-multiselect-close-icon pi pi-times" />
                         </button>
                     </div>
-                    <div class="p-multiselect-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
-                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
+                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                                 <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-multiselect-item-group" role="option">
-                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-multiselect-item-group" role="option">
+                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
-                                        <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
-                                            :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
-                                            role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
-                                            @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
+                                        <li
+                                            v-else
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            v-ripple
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            :class="['p-multiselect-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
+                                            role="option"
+                                            :aria-label="getOptionLabel(option)"
+                                            :aria-selected="isSelected(option)"
+                                            :aria-disabled="isOptionDisabled(option)"
+                                            :aria-setsize="ariaSetSize"
+                                            :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                            @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
+                                            @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                        >
                                             <div class="p-checkbox p-component">
-                                                <div :class="['p-checkbox-box', {'p-highlight': isSelected(option)}]">
-                                                    <span :class="['p-checkbox-icon', {'pi pi-check': isSelected(option)}]"></span>
+                                                <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
+                                                    <span :class="['p-checkbox-icon', { 'pi pi-check': isSelected(option) }]"></span>
                                                 </div>
                                             </div>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
-                                                <span>{{getOptionLabel(option)}}</span>
+                                                <span>{{ getOptionLabel(option) }}</span>
                                             </slot>
                                         </li>
                                     </template>
                                     <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option">
-                                        <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
+                                        <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="(!options || (options && options.length === 0))" class="p-multiselect-empty-message" role="option">
-                                        <slot name="empty">{{emptyMessageText}}</slot>
+                                    <li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option">
+                                        <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
-                                <span v-if="(!options || (options && options.length === 0))" role="status" aria-live="polite" class="p-hidden-accessible">
-                                    {{emptyMessageText}}
+                                <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                                    {{ emptyMessageText }}
                                 </span>
                                 <span role="status" aria-live="polite" class="p-hidden-accessible">
-                                    {{selectedMessageText}}
+                                    {{ selectedMessageText }}
                                 </span>
                             </template>
                             <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -106,16 +146,16 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,UniqueComponentId,ObjectUtils,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, UniqueComponentId, ObjectUtils, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import {FilterService} from 'primevue/api';
+import { FilterService } from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'MultiSelect',
-    emits: ['update:modelValue', 'change', 'focus', 'blur' , 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
     props: {
         modelValue: null,
         options: Array,
@@ -124,19 +164,40 @@ export default {
         optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
-		scrollHeight: {
-			type: String,
-			default: '200px'
-		},
-		placeholder: String,
-		disabled: Boolean,
-        inputId: String,
-        inputProps: null,
-        panelStyle: null,
-        panelClass: null,
-        panelProps: null,
-        filterInputProps: null,
-        closeButtonProps: null,
+        scrollHeight: {
+            type: String,
+            default: '200px'
+        },
+        placeholder: String,
+        disabled: Boolean,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
+        filterInputProps: {
+            type: null,
+            default: null
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        },
         dataKey: null,
         filter: Boolean,
         filterPlaceholder: String,
@@ -197,6 +258,10 @@ export default {
             type: Boolean,
             default: true
         },
+        autoFilterFocus: {
+            type: Boolean,
+            default: false
+        },
         filterMessage: {
             type: String,
             default: null
@@ -243,13 +308,12 @@ export default {
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             headerCheckboxFocused: false,
             filterValue: null,
             overlayVisible: false
-        }
+        };
     },
     watch: {
         options() {
@@ -257,8 +321,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -277,7 +339,7 @@ export default {
     },
     methods: {
         getOptionIndex(index, fn) {
-            return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
         },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
@@ -305,14 +367,14 @@ export default {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
         getAriaPosInset(index) {
-            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
         },
         show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
-            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
 
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         hide(isFocus) {
             this.$emit('before-hide');
@@ -321,7 +383,7 @@ export default {
             this.searchValue = '';
 
             this.resetFilterOnHide && (this.filterValue = null);
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         onFocus(event) {
             this.focused = true;
@@ -336,6 +398,8 @@ export default {
             this.$emit('blur', event);
         },
         onKeyDown(event) {
+            const metaKey = event.metaKey || event.ctrlKey;
+
             switch (event.code) {
                 case 'ArrowDown':
                     this.onArrowDownKey(event);
@@ -380,15 +444,16 @@ export default {
                     break;
 
                 default:
-                    if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey)) {
-                        const value = this.visibleOptions.filter(option => this.isValidOption(option)).map(option => this.getOptionValue(option));
+                    if (event.code === 'KeyA' && metaKey) {
+                        const value = this.visibleOptions.filter((option) => this.isValidOption(option)).map((option) => this.getOptionValue(option));
+
                         this.updateModel(event, value);
 
                         event.preventDefault();
                         break;
                     }
 
-                    if (ObjectUtils.isPrintableCharacter(event.key)) {
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
                         !this.overlayVisible && this.show();
                         this.searchOptions(event);
                         event.preventDefault();
@@ -411,14 +476,14 @@ export default {
 
             if (relatedTarget === this.$refs.focusInput) {
                 const firstFocusableEl = DomHandler.getFirstFocusableElement(this.overlay, ':not(.p-hidden-focusable)');
-                firstFocusableEl && firstFocusableEl.focus();
-            }
-            else {
-                this.$refs.focusInput.focus();
+
+                DomHandler.focus(firstFocusableEl);
+            } else {
+                DomHandler.focus(this.$refs.focusInput);
             }
         },
         onLastHiddenFocus() {
-            this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+            DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
         },
         onCloseClick() {
             this.hide(true);
@@ -437,13 +502,11 @@ export default {
             let selected = this.isSelected(option);
             let value = null;
 
-            if (selected)
-                value = this.modelValue.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
-            else
-                value = [...(this.modelValue || []), this.getOptionValue(option)];
+            if (selected) value = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
+            else value = [...(this.modelValue || []), this.getOptionValue(option)];
 
             this.updateModel(event, value);
-            isFocus && this.$refs.focusInput.focus();
+            isFocus && DomHandler.focus(this.$refs.focusInput);
             index !== -1 && (this.focusedOptionIndex = index);
         },
         onOptionMouseMove(event, index) {
@@ -458,7 +521,10 @@ export default {
             if (start !== -1 && end !== -1) {
                 const rangeStart = Math.min(start, end);
                 const rangeEnd = Math.max(start, end);
-                const value = this.visibleOptions.slice(rangeStart, rangeEnd + 1).filter(option => this.isValidOption(option)).map(option => this.getOptionValue(option));
+                const value = this.visibleOptions
+                    .slice(rangeStart, rangeEnd + 1)
+                    .filter((option) => this.isValidOption(option))
+                    .map((option) => this.getOptionValue(option));
 
                 this.updateModel(event, value);
             }
@@ -555,8 +621,7 @@ export default {
 
                 this.overlayVisible && this.hide();
                 event.preventDefault();
-            }
-            else {
+            } else {
                 const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
 
                 if (event.shiftKey) {
@@ -576,8 +641,7 @@ export default {
             if (pressedInInputText) {
                 event.currentTarget.setSelectionRange(0, 0);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 let metaKey = event.metaKey || event.ctrlKey;
                 let optionIndex = this.findFirstOptionIndex();
 
@@ -596,10 +660,10 @@ export default {
             if (pressedInInputText) {
                 const target = event.currentTarget;
                 const len = target.value.length;
+
                 target.setSelectionRange(len, len);
                 this.focusedOptionIndex = -1;
-            }
-            else {
+            } else {
                 let metaKey = event.metaKey || event.ctrlKey;
                 let optionIndex = this.findLastOptionIndex();
 
@@ -625,13 +689,10 @@ export default {
         onEnterKey(event) {
             if (!this.overlayVisible) {
                 this.onArrowDownKey(event);
-            }
-            else {
+            } else {
                 if (this.focusedOptionIndex !== -1) {
-                    if (event.shiftKey)
-                        this.onOptionSelectRange(event, this.focusedOptionIndex);
-                    else
-                        this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                    if (event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex);
+                    else this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
             }
 
@@ -644,11 +705,10 @@ export default {
         onTabKey(event, pressedInInputText = false) {
             if (!pressedInInputText) {
                 if (this.overlayVisible && this.hasFocusableElements()) {
-                    this.$refs.firstHiddenFocusableElementOnOverlay.focus();
+                    DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
 
                     event.preventDefault();
-                }
-                else {
+                } else {
                     if (this.focusedOptionIndex !== -1) {
                         this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                     }
@@ -664,6 +724,8 @@ export default {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
             this.scrollInView();
+
+            this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput);
         },
         onOverlayAfterEnter() {
             this.bindOutsideClickListener();
@@ -686,8 +748,7 @@ export default {
         alignOverlay() {
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$el);
             }
@@ -699,6 +760,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -731,6 +793,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -744,11 +807,14 @@ export default {
             return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         },
         getLabelByValue(value) {
-            const matchedOption = this.visibleOptions.find(option => !this.isOptionGroup(option) && ObjectUtils.equals(this.getOptionValue(option), value, this.equalityKey));
-            return matchedOption ? this.getOptionLabel(matchedOption): null;
+            const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
+            const matchedOption = options.find((option) => !this.isOptionGroup(option) && ObjectUtils.equals(this.getOptionValue(option), value, this.equalityKey));
+
+            return matchedOption ? this.getOptionLabel(matchedOption) : null;
         },
         getSelectedItemsLabel() {
             let pattern = /{(.*?)}/;
+
             if (pattern.test(this.selectedItemsLabel)) {
                 return this.selectedItemsLabel.replace(this.selectedItemsLabel.match(pattern)[0], this.modelValue.length + '');
             }
@@ -757,10 +823,9 @@ export default {
         },
         onToggleAll(event) {
             if (this.selectAll !== null) {
-                this.$emit('selectall-change', {originalEvent: event, checked: !this.allSelected});
-            }
-            else {
-                const value = this.allSelected ? [] : this.visibleOptions.filter(option => !this.isOptionGroup(option)).map(option => this.getOptionValue(option));
+                this.$emit('selectall-change', { originalEvent: event, checked: !this.allSelected });
+            } else {
+                const value = this.allSelected ? [] : this.visibleOptions.filter((option) => !this.isOptionGroup(option)).map((option) => this.getOptionValue(option));
 
                 this.updateModel(event, value);
             }
@@ -768,7 +833,7 @@ export default {
             this.headerCheckboxFocused = true;
         },
         removeOption(event, optionValue) {
-            let value = this.modelValue.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
+            let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
 
             this.updateModel(event, value);
         },
@@ -789,34 +854,39 @@ export default {
         },
         isSelected(option) {
             const optionValue = this.getOptionValue(option);
-            return (this.modelValue || []).some(value => ObjectUtils.equals(value, optionValue, this.equalityKey));
+
+            return (this.modelValue || []).some((value) => ObjectUtils.equals(value, optionValue, this.equalityKey));
         },
         findFirstOptionIndex() {
-            return this.visibleOptions.findIndex(option => this.isValidOption(option));
+            return this.visibleOptions.findIndex((option) => this.isValidOption(option));
         },
         findLastOptionIndex() {
-            return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
+            return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
         },
         findNextOptionIndex(index) {
-            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
         findPrevOptionIndex(index) {
-            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findFirstSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findLastSelectedOptionIndex() {
-            return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidSelectedOption(option)) : -1;
+            return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1;
         },
         findNextSelectedOptionIndex(index) {
-            const matchedOptionIndex = this.hasSelectedOption && index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
         },
         findPrevSelectedOptionIndex(index) {
-            const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
+
             return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
         },
         findNearestSelectedOptionIndex(index, firstCheckUp = false) {
@@ -826,8 +896,7 @@ export default {
                 if (firstCheckUp) {
                     matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
                     matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
-                }
-                else {
+                } else {
                     matchedOptionIndex = this.findNextSelectedOptionIndex(index);
                     matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;
                 }
@@ -837,26 +906,29 @@ export default {
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findFirstSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
             const selectedIndex = this.findLastSelectedOptionIndex();
+
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         searchOptions(event) {
             this.searchValue = (this.searchValue || '') + event.key;
 
             let optionIndex = -1;
+
             if (this.focusedOptionIndex !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(option => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
-            }
-            else {
-                optionIndex = this.visibleOptions.findIndex(option => this.isOptionMatched(option));
+                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
+                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
+            } else {
+                optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
             }
 
             if (optionIndex === -1 && this.focusedOptionIndex === -1) {
                 const selectedIndex = this.findSelectedOptionIndex();
+
                 optionIndex = selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
             }
 
@@ -882,10 +954,10 @@ export default {
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
             const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            }
-            else if (!this.virtualScrollerDisabled) {
+            } else if (!this.virtualScrollerDisabled) {
                 this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
             }
         },
@@ -893,6 +965,7 @@ export default {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
                 const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
+
                 this.updateModel(null, [value]);
             }
         },
@@ -905,7 +978,8 @@ export default {
                 result.push({ optionGroup: option, group: true, index });
 
                 const optionGroupChildren = this.getOptionGroupChildren(option);
-                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
 
                 return result;
             }, []);
@@ -923,50 +997,64 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-multiselect p-component p-inputwrapper', {
-                'p-multiselect-chip': this.display === 'chip',
-                'p-disabled': this.disabled,
-                'p-focus': this.focused,
-                'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
-                'p-inputwrapper-focus': this.focused || this.overlayVisible,
-                'p-overlay-open': this.overlayVisible
-            }];
+            return [
+                'p-multiselect p-component p-inputwrapper',
+                {
+                    'p-multiselect-chip': this.display === 'chip',
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
+                    'p-inputwrapper-focus': this.focused || this.overlayVisible,
+                    'p-overlay-open': this.overlayVisible
+                }
+            ];
         },
         labelClass() {
-            return ['p-multiselect-label', {
-                'p-placeholder': this.label === this.placeholder,
-                'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
-            }];
+            return [
+                'p-multiselect-label',
+                {
+                    'p-placeholder': this.label === this.placeholder,
+                    'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
+                }
+            ];
         },
         dropdownIconClass() {
             return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         },
         panelStyleClass() {
-            return ['p-multiselect-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-multiselect-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         headerCheckboxClass() {
-            return ['p-checkbox p-component', {
-                'p-checkbox-checked': this.allSelected,
-                'p-checkbox-focused': this.headerCheckboxFocused
-            }];
+            return [
+                'p-checkbox p-component',
+                {
+                    'p-checkbox-checked': this.allSelected,
+                    'p-checkbox-focused': this.headerCheckboxFocused
+                }
+            ];
         },
         visibleOptions() {
-            const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);
+            const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
             return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
         },
-        label() { // TODO: Refactor
+        label() {
+            // TODO: Refactor
             let label;
 
             if (this.modelValue && this.modelValue.length) {
                 if (ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue.length > this.maxSelectedLabels) {
                     return this.getSelectedItemsLabel();
-                }
-                else {
+                } else {
                     label = '';
+
                     for (let i = 0; i < this.modelValue.length; i++) {
                         if (i !== 0) {
                             label += ', ';
@@ -975,15 +1063,14 @@ export default {
                         label += this.getLabelByValue(this.modelValue[i]);
                     }
                 }
-            }
-            else {
+            } else {
                 label = this.placeholder;
             }
 
             return label;
         },
         allSelected() {
-            return (this.selectAll !== null) ? this.selectAll : (ObjectUtils.isNotEmpty(this.visibleOptions) && this.visibleOptions.every(option => this.isOptionGroup(option) || this.isValidSelectedOption(option)));
+            return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions) && this.visibleOptions.every((option) => this.isOptionGroup(option) || this.isValidSelectedOption(option));
         },
         hasSelectedOption() {
             return ObjectUtils.isNotEmpty(this.modelValue);
@@ -995,7 +1082,7 @@ export default {
             return this.filterFields || [this.optionLabel];
         },
         maxSelectionLimitReached() {
-            return this.selectionLimit && (this.modelValue && this.modelValue.length === this.selectionLimit);
+            return this.selectionLimit && this.modelValue && this.modelValue.length === this.selectionLimit;
         },
         filterResultMessageText() {
             return ObjectUtils.isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;
@@ -1018,11 +1105,14 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
         ariaSetSize() {
-            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
+            return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         toggleAllAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[this.allSelected ? 'selectAll' : 'unselectAll'] : undefined;
@@ -1035,13 +1125,13 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller,
-        'Portal': Portal
+        VirtualScroller: VirtualScroller,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -1065,7 +1155,7 @@ export default {
     cursor: pointer;
 }
 
-.p-multiselect-label  {
+.p-multiselect-label {
     display: block;
     white-space: nowrap;
     cursor: pointer;
@@ -1137,7 +1227,7 @@ export default {
 .p-multiselect-filter-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-multiselect-filter-container .p-inputtext {
diff --git a/components/orderlist/OrderList.d.ts b/components/orderlist/OrderList.d.ts
index 7e22d6c75..a7f631635 100755
--- a/components/orderlist/OrderList.d.ts
+++ b/components/orderlist/OrderList.d.ts
@@ -111,19 +111,19 @@ export declare type OrderListEmits = {
      * Callback to invoke when the list is reordered.
      * @param {OrderListReorderEvent} event - Custom reorder event.
      */
-    'reorder': (event: OrderListReorderEvent) => void;
+    reorder: (event: OrderListReorderEvent) => void;
     /**
      * Callback to invoke when selection changes.
      * @param {OrderListSelectionChangeEvent} event - Custom selection change event.
      */
     'selection-change': (event: OrderListSelectionChangeEvent) => void;
-}
+};
 
-declare class OrderList extends ClassComponent<OrderListProps, OrderListSlots, OrderListEmits> { }
+declare class OrderList extends ClassComponent<OrderListProps, OrderListSlots, OrderListEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        OrderList: GlobalComponentConstructor<OrderList>
+        OrderList: GlobalComponentConstructor<OrderList>;
     }
 }
 
@@ -133,7 +133,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [OrderList](https://www.primefaces.org/primevue/showcase/#/orderlist)
+ * - [OrderList](https://www.primefaces.org/primevue/orderlist)
  *
  */
 export default OrderList;
diff --git a/components/orderlist/OrderList.spec.js b/components/orderlist/OrderList.spec.js
index 6ca3da0da..e9371086c 100644
--- a/components/orderlist/OrderList.spec.js
+++ b/components/orderlist/OrderList.spec.js
@@ -9,76 +9,76 @@ describe('OrderList.vue', () => {
             props: {
                 modelValue: [
                     {
-                        "id": "1000",
-                        "code": "vbb124btr",
-                        "name": "Game Controller",
-                        "description": "Product Description",
-                        "image": "game-controller.jpg",
-                        "price": 99,
-                        "category": "Electronics",
-                        "quantity": 2,
-                        "inventoryStatus": "LOWSTOCK",
-                        "rating": 4
+                        id: '1000',
+                        code: 'vbb124btr',
+                        name: 'Game Controller',
+                        description: 'Product Description',
+                        image: 'game-controller.jpg',
+                        price: 99,
+                        category: 'Electronics',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1001",
-                        "code": "nvklal433",
-                        "name": "Black Watch",
-                        "description": "Product Description",
-                        "image": "black-watch.jpg",
-                        "price": 72,
-                        "category": "Accessories",
-                        "quantity": 61,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 4
+                        id: '1001',
+                        code: 'nvklal433',
+                        name: 'Black Watch',
+                        description: 'Product Description',
+                        image: 'black-watch.jpg',
+                        price: 72,
+                        category: 'Accessories',
+                        quantity: 61,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1002",
-                        "code": "zz21cz3c1",
-                        "name": "Blue Band",
-                        "description": "Product Description",
-                        "image": "blue-band.jpg",
-                        "price": 79,
-                        "category": "Fitness",
-                        "quantity": 2,
-                        "inventoryStatus": "LOWSTOCK",
-                        "rating": 3
+                        id: '1002',
+                        code: 'zz21cz3c1',
+                        name: 'Blue Band',
+                        description: 'Product Description',
+                        image: 'blue-band.jpg',
+                        price: 79,
+                        category: 'Fitness',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 3
                     },
                     {
-                        "id": "1003",
-                        "code": "244wgerg2",
-                        "name": "Blue T-Shirt",
-                        "description": "Product Description",
-                        "image": "blue-t-shirt.jpg",
-                        "price": 29,
-                        "category": "Clothing",
-                        "quantity": 25,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 5
+                        id: '1003',
+                        code: '244wgerg2',
+                        name: 'Blue T-Shirt',
+                        description: 'Product Description',
+                        image: 'blue-t-shirt.jpg',
+                        price: 29,
+                        category: 'Clothing',
+                        quantity: 25,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 5
                     },
                     {
-                        "id": "1004",
-                        "code": "h456wer53",
-                        "name": "Bracelet",
-                        "description": "Product Description",
-                        "image": "bracelet.jpg",
-                        "price": 15,
-                        "category": "Accessories",
-                        "quantity": 73,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 4
+                        id: '1004',
+                        code: 'h456wer53',
+                        name: 'Bracelet',
+                        description: 'Product Description',
+                        image: 'bracelet.jpg',
+                        price: 15,
+                        category: 'Accessories',
+                        quantity: 73,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 4
                     },
                     {
-                        "id": "1005",
-                        "code": "cm230f032",
-                        "name": "Gaming Set",
-                        "description": "Product Description",
-                        "image": "gaming-set.jpg",
-                        "price": 299,
-                        "category": "Electronics",
-                        "quantity": 63,
-                        "inventoryStatus": "INSTOCK",
-                        "rating": 3
+                        id: '1005',
+                        code: 'cm230f032',
+                        name: 'Gaming Set',
+                        description: 'Product Description',
+                        image: 'gaming-set.jpg',
+                        price: 299,
+                        category: 'Electronics',
+                        quantity: 63,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 3
                     }
                 ]
             },
@@ -137,4 +137,4 @@ describe('OrderList.vue', () => {
 
         expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual(wrapper.vm.modelValue[2]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/orderlist/OrderList.vue b/components/orderlist/OrderList.vue
index 4e50e7075..6bf5d8c83 100755
--- a/components/orderlist/OrderList.vue
+++ b/components/orderlist/OrderList.vue
@@ -9,14 +9,21 @@
             <slot name="controlsend"></slot>
         </div>
         <div class="p-orderlist-list-container">
-            <div class="p-orderlist-header" v-if="$slots.header">
+            <div v-if="$slots.header" class="p-orderlist-header">
                 <slot name="header"></slot>
             </div>
             <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
-                    <li tabindex="0" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
-                        @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
-                        role="option" :aria-selected="isSelected(item)">
+                    <li
+                        v-ripple
+                        tabindex="0"
+                        :class="['p-orderlist-item', { 'p-highlight': isSelected(item) }]"
+                        @click="onItemClick($event, item, i)"
+                        @keydown="onItemKeyDown($event, item, i)"
+                        @touchend="onItemTouchEnd"
+                        role="option"
+                        :aria-selected="isSelected(item)"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
@@ -27,7 +34,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -73,7 +80,7 @@ export default {
     data() {
         return {
             d_selection: this.selection
-        }
+        };
     },
     beforeUnmount() {
         this.destroyStyle();
@@ -91,7 +98,7 @@ export default {
     },
     methods: {
         getItemKey(item, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
@@ -107,10 +114,10 @@ export default {
                     if (selectedItemIndex !== 0) {
                         let movedItem = value[selectedItemIndex];
                         let temp = value[selectedItemIndex - 1];
+
                         value[selectedItemIndex - 1] = movedItem;
                         value[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
@@ -125,7 +132,7 @@ export default {
             }
         },
         moveTop(event) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let value = [...this.modelValue];
 
                 for (let i = 0; i < this.d_selection.length; i++) {
@@ -134,9 +141,9 @@ export default {
 
                     if (selectedItemIndex !== 0) {
                         let movedItem = value.splice(selectedItemIndex, 1)[0];
+
                         value.unshift(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
@@ -151,20 +158,20 @@ export default {
             }
         },
         moveDown(event) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let value = [...this.modelValue];
 
                 for (let i = this.d_selection.length - 1; i >= 0; i--) {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
 
-                    if (selectedItemIndex !== (value.length - 1)) {
+                    if (selectedItemIndex !== value.length - 1) {
                         let movedItem = value[selectedItemIndex];
                         let temp = value[selectedItemIndex + 1];
+
                         value[selectedItemIndex + 1] = movedItem;
                         value[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
@@ -186,11 +193,11 @@ export default {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
 
-                    if (selectedItemIndex !== (value.length - 1)) {
+                    if (selectedItemIndex !== value.length - 1) {
                         let movedItem = value.splice(selectedItemIndex, 1)[0];
+
                         value.push(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
@@ -207,25 +214,22 @@ export default {
         onItemClick(event, item, index) {
             this.itemTouched = false;
             let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
-            let selected = (selectedIndex != -1);
+            let selected = selectedIndex != -1;
             let metaSelection = this.itemTouched ? false : this.metaKeySelection;
 
             if (metaSelection) {
-                let metaKey = (event.metaKey || event.ctrlKey);
+                let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected && metaKey) {
                     this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                }
-                else {
-                    this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : [];
+                } else {
+                    this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
                     ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
                     this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                }
-                else {
+                } else {
                     this.d_selection = this.d_selection ? [...this.d_selection] : [];
                     ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
                 }
@@ -233,7 +237,7 @@ export default {
 
             this.$emit('update:selection', this.d_selection);
             this.$emit('selection-change', {
-                originalEvent:event,
+                originalEvent: event,
                 value: this.d_selection
             });
         },
@@ -243,85 +247,83 @@ export default {
         onItemKeyDown(event, item, index) {
             let listItem = event.currentTarget;
 
-            switch(event.which) {
+            switch (event.which) {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //enter
                 case 13:
                     this.onItemClick(event, item, index);
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         updateListScroll() {
             const listItems = DomHandler.find(this.$refs.list.$el, '.p-orderlist-item.p-highlight');
 
             if (listItems && listItems.length) {
-                switch(this.reorderDirection) {
+                switch (this.reorderDirection) {
                     case 'up':
                         DomHandler.scrollInView(this.$refs.list.$el, listItems[0]);
-                    break;
+                        break;
 
                     case 'top':
                         this.$refs.list.$el.scrollTop = 0;
-                    break;
+                        break;
 
                     case 'down':
                         DomHandler.scrollInView(this.$refs.list.$el, listItems[listItems.length - 1]);
-                    break;
+                        break;
 
                     case 'bottom':
                         this.$refs.list.$el.scrollTop = this.$refs.list.$el.scrollHeight;
-                    break;
+                        break;
 
                     default:
-                    break;
+                        break;
                 }
             }
         },
         createStyle() {
-			if (!this.styleElement) {
+            if (!this.styleElement) {
                 this.$el.setAttribute(this.attributeSelector, '');
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -346,8 +348,8 @@ export default {
 `;
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -357,21 +359,24 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-orderlist p-component', {
-                'p-orderlist-striped': this.stripedRows
-            }];
+            return [
+                'p-orderlist p-component',
+                {
+                    'p-orderlist-striped': this.stripedRows
+                }
+            ];
         },
         attributeSelector() {
             return UniqueComponentId();
         }
     },
     components: {
-        'OLButton': Button
+        OLButton: Button
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/organizationchart/OrganizationChart.d.ts b/components/organizationchart/OrganizationChart.d.ts
index 0f50567eb..9c54e6283 100755
--- a/components/organizationchart/OrganizationChart.d.ts
+++ b/components/organizationchart/OrganizationChart.d.ts
@@ -120,13 +120,13 @@ type OrganizationChartEmits = {
      * @param {OrganizationChartNode} node - Node instance.
      */
     'node-collapsed': (node: OrganizationChartNode) => void;
-}
+};
 
-declare class OrganizationChart extends ClassComponent<OrganizationChartProps, OrganizationChartSlots, OrganizationChartEmits> { }
+declare class OrganizationChart extends ClassComponent<OrganizationChartProps, OrganizationChartSlots, OrganizationChartEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        OrganizationChart: GlobalComponentConstructor<OrganizationChart>
+        OrganizationChart: GlobalComponentConstructor<OrganizationChart>;
     }
 }
 
@@ -140,7 +140,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [OrganizationChart](https://www.primefaces.org/primevue/showcase/#/organizationchart)
+ * - [OrganizationChart](https://www.primefaces.org/primevue/organizationchart)
  *
  */
 export default OrganizationChart;
diff --git a/components/organizationchart/OrganizationChart.spec.js b/components/organizationchart/OrganizationChart.spec.js
index 69b9036c6..41e3f9389 100644
--- a/components/organizationchart/OrganizationChart.spec.js
+++ b/components/organizationchart/OrganizationChart.spec.js
@@ -11,79 +11,87 @@ describe('OrganizationChart.vue', () => {
                     key: '0',
                     type: 'person',
                     styleClass: 'p-person',
-                    data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
+                    data: { label: 'CEO', name: 'Walter White', avatar: 'walter.jpg' },
                     children: [
                         {
                             key: '0_0',
                             type: 'person',
                             styleClass: 'p-person',
-                            data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
-                            children:[{
-                                key: '0_0_0',
-                                data: {label: 'Tax'},
-                                selectable: false,
-                                styleClass: 'department-cfo'
-                            },
-                            {
-                                key: '0_0_1',
-                                data: {label: 'Legal'},
-                                selectable: false,
-                                styleClass: 'department-cfo'
-                            }],
+                            data: { label: 'CFO', name: 'Saul Goodman', avatar: 'saul.jpg' },
+                            children: [
+                                {
+                                    key: '0_0_0',
+                                    data: { label: 'Tax' },
+                                    selectable: false,
+                                    styleClass: 'department-cfo'
+                                },
+                                {
+                                    key: '0_0_1',
+                                    data: { label: 'Legal' },
+                                    selectable: false,
+                                    styleClass: 'department-cfo'
+                                }
+                            ]
                         },
                         {
                             key: '0_1',
                             type: 'person',
                             styleClass: 'p-person',
-                            data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
-                            children:[{
-                                key: '0_1_0',
-                                data: {label: 'Operations'},
-                                selectable: false,
-                                styleClass: 'department-coo'
-                            }]
+                            data: { label: 'COO', name: 'Mike E.', avatar: 'mike.jpg' },
+                            children: [
+                                {
+                                    key: '0_1_0',
+                                    data: { label: 'Operations' },
+                                    selectable: false,
+                                    styleClass: 'department-coo'
+                                }
+                            ]
                         },
                         {
                             key: '0_2',
                             type: 'person',
                             styleClass: 'p-person',
-                            data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
-                            children:[{
-                                key: '0_2_0',
-                                data: {label: 'Development'},
-                                selectable: false,
-                                styleClass: 'department-cto',
-                                children:[{
-                                    key: '0_2_0_0',
-                                    data: {label: 'Analysis'},
+                            data: { label: 'CTO', name: 'Jesse Pinkman', avatar: 'jesse.jpg' },
+                            children: [
+                                {
+                                    key: '0_2_0',
+                                    data: { label: 'Development' },
+                                    selectable: false,
+                                    styleClass: 'department-cto',
+                                    children: [
+                                        {
+                                            key: '0_2_0_0',
+                                            data: { label: 'Analysis' },
+                                            selectable: false,
+                                            styleClass: 'department-cto'
+                                        },
+                                        {
+                                            key: '0_2_0_1',
+                                            data: { label: 'Front End' },
+                                            selectable: false,
+                                            styleClass: 'department-cto'
+                                        },
+                                        {
+                                            key: '0_2_0_2',
+                                            data: { label: 'Back End' },
+                                            selectable: false,
+                                            styleClass: 'department-cto'
+                                        }
+                                    ]
+                                },
+                                {
+                                    key: '0_2_1',
+                                    data: { label: 'QA' },
                                     selectable: false,
                                     styleClass: 'department-cto'
                                 },
                                 {
-                                    key: '0_2_0_1',
-                                    data: {label: 'Front End'},
+                                    key: '0_2_2',
+                                    data: { label: 'R&D' },
                                     selectable: false,
                                     styleClass: 'department-cto'
-                                },
-                                {
-                                    key: '0_2_0_2',
-                                    data: {label: 'Back End'},
-                                    selectable: false,
-                                    styleClass: 'department-cto'
-                                }]
-                            },
-                            {
-                                key: '0_2_1',
-                                data: {label: 'QA'},
-                                selectable: false,
-                                styleClass: 'department-cto'
-                            },
-                            {
-                                key: '0_2_2',
-                                data: {label: 'R&D'},
-                                selectable: false,
-                                styleClass: 'department-cto'
-                            }]
+                                }
+                            ]
                         }
                     ]
                 },
@@ -124,8 +132,8 @@ describe('OrganizationChart.vue', () => {
 
         expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-up');
         expect(wrapper.emitted()['node-collapse'][0]).toEqual([wrapper.vm.value]);
-        expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ '0': true }]);
-        expect(wrapper.vm.d_collapsedKeys).toEqual({ '0': true });
+        expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ 0: true }]);
+        expect(wrapper.vm.d_collapsedKeys).toEqual({ 0: true });
 
         await wrapper.vm.onNodeToggle(wrapper.vm.value);
 
@@ -141,13 +149,12 @@ describe('OrganizationChart.vue', () => {
         await wrapper.vm.onNodeClick(wrapper.vm.value);
 
         expect(wrapper.emitted()['node-select'][0]).toEqual([wrapper.vm.value]);
-        expect(wrapper.emitted()['update:selectionKeys'][0]).toEqual([{ '0': true }]);
+        expect(wrapper.emitted()['update:selectionKeys'][0]).toEqual([{ 0: true }]);
 
-        await wrapper.setProps({ selectionKeys: { '0': true } });
+        await wrapper.setProps({ selectionKeys: { 0: true } });
 
         expect(contents[0].classes()).toContain('p-highlight');
 
-
         await wrapper.vm.onNodeClick(wrapper.vm.value);
 
         expect(wrapper.emitted()['node-unselect'][0]).toEqual([wrapper.vm.value]);
@@ -157,4 +164,4 @@ describe('OrganizationChart.vue', () => {
 
         expect(contents[0].classes()).not.toContain('p-highlight');
     });
-});
\ No newline at end of file
+});
diff --git a/components/organizationchart/OrganizationChart.vue b/components/organizationchart/OrganizationChart.vue
index 0aef50c67..3b23b0122 100755
--- a/components/organizationchart/OrganizationChart.vue
+++ b/components/organizationchart/OrganizationChart.vue
@@ -1,8 +1,6 @@
 <template>
     <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$slots"
-            @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible"
-            @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
+        <OrganizationChartNode :node="value" :templates="$slots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
     </div>
 </template>
 
@@ -37,7 +35,7 @@ export default {
     data() {
         return {
             d_collapsedKeys: this.collapsedKeys || {}
-        }
+        };
     },
     watch: {
         collapsedKeys(newValue) {
@@ -49,13 +47,12 @@ export default {
             const key = node.key;
 
             if (this.selectionMode) {
-                let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+                let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
 
                 if (_selectionKeys[key]) {
                     delete _selectionKeys[key];
                     this.$emit('node-unselect', node);
-                }
-                else {
+                } else {
                     if (this.selectionMode === 'single') {
                         _selectionKeys = {};
                     }
@@ -73,20 +70,19 @@ export default {
             if (this.d_collapsedKeys[key]) {
                 delete this.d_collapsedKeys[key];
                 this.$emit('node-expand', node);
-            }
-            else {
+            } else {
                 this.d_collapsedKeys[key] = true;
                 this.$emit('node-collapse', node);
             }
 
-            this.d_collapsedKeys = {...this.d_collapsedKeys};
+            this.d_collapsedKeys = { ...this.d_collapsedKeys };
             this.$emit('update:collapsedKeys', this.d_collapsedKeys);
         }
     },
     components: {
-        'OrganizationChartNode': OrganizationChartNode
+        OrganizationChartNode: OrganizationChartNode
     }
-}
+};
 </script>
 
 <style>
@@ -99,7 +95,7 @@ export default {
 .p-organizationchart-table > tbody > tr > td {
     text-align: center;
     vertical-align: top;
-    padding: 0 .75rem;
+    padding: 0 0.75rem;
 }
 
 .p-organizationchart-node-content {
@@ -109,8 +105,8 @@ export default {
 
 .p-organizationchart-node-content .p-node-toggler {
     position: absolute;
-    bottom: -.75rem;
-    margin-left: -.75rem;
+    bottom: -0.75rem;
+    margin-left: -0.75rem;
     z-index: 2;
     left: 50%;
     user-select: none;
@@ -122,7 +118,7 @@ export default {
 
 .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
     position: relative;
-    top: .25rem;
+    top: 0.25rem;
 }
 
 .p-organizationchart-line-down {
@@ -135,7 +131,7 @@ export default {
     border-radius: 0px;
 }
 
- .p-organizationchart-line-left {
+.p-organizationchart-line-left {
     border-radius: 0;
 }
 
diff --git a/components/organizationchart/OrganizationChartNode.vue b/components/organizationchart/OrganizationChartNode.vue
index bf0dc6c81..806a758e1 100755
--- a/components/organizationchart/OrganizationChartNode.vue
+++ b/components/organizationchart/OrganizationChartNode.vue
@@ -4,9 +4,9 @@
             <tr v-if="node">
                 <td :colspan="colspan">
                     <div :class="nodeContentClass" @click="onNodeClick">
-                        <component :is="templates[node.type]||templates['default']" :node="node" />
+                        <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
-                            <i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': expanded, 'pi-chevron-up': !expanded}"></i>
+                            <i class="p-node-toggler-icon pi" :class="{ 'pi-chevron-down': expanded, 'pi-chevron-up': !expanded }"></i>
                         </a>
                     </div>
                 </td>
@@ -23,16 +23,24 @@
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
-                    <template v-for="(child,i) of node.children" :key="child.key">
-                        <td class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
-                        <td class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
+                    <template v-for="(child, i) of node.children" :key="child.key">
+                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
                     </template>
                 </template>
             </tr>
             <tr :style="childStyle" class="p-organizationchart-nodes">
                 <td v-for="child of node.children" :key="child.key" colspan="2">
-                    <OrganizationChartNode :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible"
-                                :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
+                    <OrganizationChartNode
+                        :node="child"
+                        :templates="templates"
+                        :collapsedKeys="collapsedKeys"
+                        @node-toggle="onChildNodeToggle"
+                        :collapsible="collapsible"
+                        :selectionMode="selectionMode"
+                        :selectionKeys="selectionKeys"
+                        @node-click="onChildNodeClick"
+                    />
                 </td>
             </tr>
         </tbody>
@@ -40,7 +48,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'OrganizationChartNode',
@@ -93,18 +101,18 @@ export default {
     },
     computed: {
         nodeContentClass() {
-            return ['p-organizationchart-node-content', this.node.styleClass, {'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected}];
+            return ['p-organizationchart-node-content', this.node.styleClass, { 'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected }];
         },
         leaf() {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },
         colspan() {
-            return (this.node.children && this.node.children.length) ? this.node.children.length * 2: null;
+            return this.node.children && this.node.children.length ? this.node.children.length * 2 : null;
         },
         childStyle() {
             return {
                 visibility: !this.leaf && this.expanded ? 'inherit' : 'hidden'
-            }
+            };
         },
         expanded() {
             return this.collapsedKeys[this.node.key] === undefined;
@@ -119,5 +127,5 @@ export default {
             return this.collapsible && this.node.collapsible !== false && !this.leaf;
         }
     }
-}
+};
 </script>
diff --git a/components/overlayeventbus/OverlayEventBus.js b/components/overlayeventbus/OverlayEventBus.js
index 844a1b111..602940783 100644
--- a/components/overlayeventbus/OverlayEventBus.js
+++ b/components/overlayeventbus/OverlayEventBus.js
@@ -1,3 +1,3 @@
-import {EventBus} from 'primevue/utils';
+import { EventBus } from 'primevue/utils';
 
-export default EventBus();
\ No newline at end of file
+export default EventBus();
diff --git a/components/overlaypanel/OverlayPanel.d.ts b/components/overlaypanel/OverlayPanel.d.ts
index be7d83e4b..0b0f9c1d2 100755
--- a/components/overlaypanel/OverlayPanel.d.ts
+++ b/components/overlaypanel/OverlayPanel.d.ts
@@ -71,12 +71,12 @@ export declare type OverlayPanelEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
 declare class OverlayPanel extends ClassComponent<OverlayPanelProps, OverlayPanelSlots, OverlayPanelEmits> {
     /**
@@ -104,7 +104,7 @@ declare class OverlayPanel extends ClassComponent<OverlayPanelProps, OverlayPane
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        OverlayPanel: GlobalComponentConstructor<OverlayPanel>
+        OverlayPanel: GlobalComponentConstructor<OverlayPanel>;
     }
 }
 
@@ -114,7 +114,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [OverlayPanel](https://www.primefaces.org/primevue/showcase/#/overlaypanel)
+ * - [OverlayPanel](https://www.primefaces.org/primevue/overlaypanel)
  *
  */
 export default OverlayPanel;
diff --git a/components/overlaypanel/OverlayPanel.spec.js b/components/overlaypanel/OverlayPanel.spec.js
index 0161c3c17..be930caf9 100644
--- a/components/overlaypanel/OverlayPanel.spec.js
+++ b/components/overlaypanel/OverlayPanel.spec.js
@@ -44,4 +44,4 @@ describe('OverlayPanel.vue', () => {
 
         expect(wrapper.vm.visible).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/overlaypanel/OverlayPanel.vue b/components/overlaypanel/OverlayPanel.vue
index b15c19015..0d2759b4f 100755
--- a/components/overlaypanel/OverlayPanel.vue
+++ b/components/overlaypanel/OverlayPanel.vue
@@ -1,11 +1,11 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick">
                     <slot></slot>
                 </div>
-                <button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button" v-ripple>
+                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" @click="hide" :aria-label="ariaCloseLabel" type="button">
                     <span class="p-overlaypanel-close-icon pi pi-times"></span>
                 </button>
             </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
+import { UniqueComponentId, DomHandler, ConnectedOverlayScrollHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
@@ -24,18 +24,18 @@ export default {
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
-		dismissable: {
-			type: Boolean,
-			default: true
-		},
-		showCloseIcon: {
-			type: Boolean,
-			default: false
-		},
+        dismissable: {
+            type: Boolean,
+            default: true
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: false
+        },
         appendTo: {
-			type: String,
-			default: 'body'
-		},
+            type: String,
+            default: 'body'
+        },
         baseZIndex: {
             type: Number,
             default: 0
@@ -56,7 +56,7 @@ export default {
     data() {
         return {
             visible: false
-        }
+        };
     },
     watch: {
         dismissable: {
@@ -88,6 +88,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.destroyStyle();
         this.unbindResizeListener();
         this.target = null;
@@ -110,10 +111,8 @@ export default {
     },
     methods: {
         toggle(event, target) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event, target);
+            if (this.visible) this.hide();
+            else this.show(event, target);
         },
         show(event, target) {
             this.visible = true;
@@ -129,6 +128,7 @@ export default {
         onEnter(el) {
             this.container.setAttribute(this.attributeSelector, '');
             this.alignOverlay();
+
             if (this.dismissable) {
                 this.bindOutsideClickListener();
             }
@@ -172,6 +172,7 @@ export default {
             if (containerOffset.left < targetOffset.left) {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
+
             this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
@@ -184,8 +185,10 @@ export default {
                     if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
                         this.visible = false;
                     }
+
                     this.selfClick = false;
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -219,6 +222,7 @@ export default {
                         this.visible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -229,18 +233,19 @@ export default {
             }
         },
         isTargetClicked(event) {
-            return (this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target)));
+            return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
         },
         containerRef(el) {
             this.container = el;
         },
         createStyle() {
-			if (!this.styleElement) {
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -248,12 +253,12 @@ export default {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }
-                    `
+                    `;
                 }
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -269,22 +274,25 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-overlaypanel p-component', {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-overlaypanel p-component',
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         attributeSelector() {
             return UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -319,34 +327,36 @@ export default {
 }
 
 .p-overlaypanel-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }
 
 .p-overlaypanel-leave-active {
-    transition: opacity .1s linear;
+    transition: opacity 0.1s linear;
 }
 
-.p-overlaypanel:after, .p-overlaypanel:before {
-	bottom: 100%;
-	left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-	content: " ";
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
+.p-overlaypanel:after,
+.p-overlaypanel:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
 }
 
 .p-overlaypanel:after {
-	border-width: 8px;
-	margin-left: -8px;
+    border-width: 8px;
+    margin-left: -8px;
 }
 
 .p-overlaypanel:before {
-	border-width: 10px;
-	margin-left: -10px;
+    border-width: 10px;
+    margin-left: -10px;
 }
 
-.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
+.p-overlaypanel-flipped:after,
+.p-overlaypanel-flipped:before {
     bottom: auto;
     top: 100%;
 }
@@ -356,6 +366,6 @@ export default {
 }
 
 .p-overlaypanel.p-overlaypanel-flipped:before {
-    border-bottom-color: transparent
+    border-bottom-color: transparent;
 }
 </style>
diff --git a/components/paginator/CurrentPageReport.vue b/components/paginator/CurrentPageReport.vue
index 9b5177029..8dffd26f5 100755
--- a/components/paginator/CurrentPageReport.vue
+++ b/components/paginator/CurrentPageReport.vue
@@ -1,52 +1,52 @@
 <template>
-	<span class="p-paginator-current">{{text}}</span>
+    <span class="p-paginator-current">{{ text }}</span>
 </template>
 <script>
-	export default {
-        name: 'CurrentPageReport',
-		inheritAttrs: false,
-		props: {
-			pageCount: {
-                type: Number,
-                default: 0
-            },
-            currentPage: {
-                type: Number,
-                default: 0
-            },
-            page: {
-                type: Number,
-                default: 0
-            },
-            first: {
-                type: Number,
-                default: 0
-            },
-            rows: {
-                type: Number,
-                default: 0
-            },
-            totalRecords: {
-                type: Number,
-                default: 0
-            },
-			template: {
-				type: String,
-				default: '({currentPage} of {totalPages})'
-			}
-		},
-		computed: {
-            text() {
-                let text = this.template
-                    .replace("{currentPage}", this.currentPage)
-                    .replace("{totalPages}", this.pageCount)
-                    .replace("{first}", this.pageCount > 0 ? this.first + 1 : 0)
-                    .replace("{last}", Math.min(this.first + this.rows, this.totalRecords))
-                    .replace("{rows}", this.rows)
-                    .replace("{totalRecords}", this.totalRecords);
+export default {
+    name: 'CurrentPageReport',
+    inheritAttrs: false,
+    props: {
+        pageCount: {
+            type: Number,
+            default: 0
+        },
+        currentPage: {
+            type: Number,
+            default: 0
+        },
+        page: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        template: {
+            type: String,
+            default: '({currentPage} of {totalPages})'
+        }
+    },
+    computed: {
+        text() {
+            let text = this.template
+                .replace('{currentPage}', this.currentPage)
+                .replace('{totalPages}', this.pageCount)
+                .replace('{first}', this.pageCount > 0 ? this.first + 1 : 0)
+                .replace('{last}', Math.min(this.first + this.rows, this.totalRecords))
+                .replace('{rows}', this.rows)
+                .replace('{totalRecords}', this.totalRecords);
 
-                return text;
-            }
-		}
-	}
+            return text;
+        }
+    }
+};
 </script>
diff --git a/components/paginator/FirstPageLink.vue b/components/paginator/FirstPageLink.vue
index 7bed4b579..12ed17e37 100755
--- a/components/paginator/FirstPageLink.vue
+++ b/components/paginator/FirstPageLink.vue
@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-double-left"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-double-left"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'FirstPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-first p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-first p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/paginator/JumpToPageDropdown.vue b/components/paginator/JumpToPageDropdown.vue
index a3d819086..c1aaca8ce 100644
--- a/components/paginator/JumpToPageDropdown.vue
+++ b/components/paginator/JumpToPageDropdown.vue
@@ -1,6 +1,5 @@
 <template>
-	<JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value"
-        @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
+    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
 </template>
 
 <script>
@@ -23,14 +22,16 @@ export default {
     computed: {
         pageOptions() {
             let opts = [];
-            for(let i= 0; i < this.pageCount; i++) {
-                opts.push({label: String(i+1), value: i})
+
+            for (let i = 0; i < this.pageCount; i++) {
+                opts.push({ label: String(i + 1), value: i });
             }
+
             return opts;
         }
     },
     components: {
-        'JTPDropdown': Dropdown
+        JTPDropdown: Dropdown
     }
-}
+};
 </script>
diff --git a/components/paginator/JumpToPageInput.vue b/components/paginator/JumpToPageInput.vue
index 579708bf8..716601367 100644
--- a/components/paginator/JumpToPageInput.vue
+++ b/components/paginator/JumpToPageInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<JTPInput :modelValue="page" @update:modelValue="onChange($event)" class="p-paginator-page-input" :disabled="disabled"></JTPInput>
+    <JTPInput :modelValue="page" @update:modelValue="onChange($event)" class="p-paginator-page-input" :disabled="disabled"></JTPInput>
 </template>
 
 <script>
@@ -20,7 +20,7 @@ export default {
         }
     },
     components: {
-        'JTPInput': InputNumber
+        JTPInput: InputNumber
     }
-}
+};
 </script>
diff --git a/components/paginator/LastPageLink.vue b/components/paginator/LastPageLink.vue
index 3ff70289e..6e3cf3a36 100755
--- a/components/paginator/LastPageLink.vue
+++ b/components/paginator/LastPageLink.vue
@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-double-right"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-double-right"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'LastPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-last p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-last p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/paginator/NextPageLink.vue b/components/paginator/NextPageLink.vue
index f7a5a8338..6bd460086 100755
--- a/components/paginator/NextPageLink.vue
+++ b/components/paginator/NextPageLink.vue
@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-right"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-right"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'NextPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-next p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-next p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/paginator/PageLinks.vue b/components/paginator/PageLinks.vue
index 2a0096feb..7476e788c 100755
--- a/components/paginator/PageLinks.vue
+++ b/components/paginator/PageLinks.vue
@@ -1,7 +1,6 @@
 <template>
     <span class="p-paginator-pages">
-        <button v-for="pageLink of value" :key="pageLink" :class="['p-paginator-page p-paginator-element p-link', {'p-highlight': ((pageLink - 1) === page)}]" type="button"
-            @click="onPageLinkClick($event, pageLink)" v-ripple>{{pageLink}}</button>
+        <button v-for="pageLink of value" :key="pageLink" v-ripple :class="['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === page }]" type="button" @click="onPageLinkClick($event, pageLink)">{{ pageLink }}</button>
     </span>
 </template>
 <script>
@@ -24,7 +23,7 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/paginator/Paginator.d.ts b/components/paginator/Paginator.d.ts
index 8d4771e6b..a69c54a81 100755
--- a/components/paginator/Paginator.d.ts
+++ b/components/paginator/Paginator.d.ts
@@ -117,14 +117,14 @@ export declare type PaginatorEmits = {
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {PageState} event - New page state.
      */
-    'page': (event: PageState) => void;
-}
+    page: (event: PageState) => void;
+};
 
-declare class Paginator extends ClassComponent<PaginatorProps, PaginatorSlots, PaginatorEmits> { }
+declare class Paginator extends ClassComponent<PaginatorProps, PaginatorSlots, PaginatorEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Paginator: GlobalComponentConstructor<Paginator>
+        Paginator: GlobalComponentConstructor<Paginator>;
     }
 }
 
@@ -134,7 +134,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Paginator](https://www.primefaces.org/primevue/showcase/#/paginator)
+ * - [Paginator](https://www.primefaces.org/primevue/paginator)
  *
  */
 export default Paginator;
diff --git a/components/paginator/Paginator.spec.js b/components/paginator/Paginator.spec.js
index c010f9c00..1b94250ac 100644
--- a/components/paginator/Paginator.spec.js
+++ b/components/paginator/Paginator.spec.js
@@ -9,11 +9,11 @@ describe('Paginator.vue', () => {
             props: {
                 rows: 10,
                 totalRecords: 120,
-                rowsPerPageOptions: [10,20,30]
+                rowsPerPageOptions: [10, 20, 30]
             }
         });
     });
-    
+
     it('should exist', () => {
         expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-paginator-icon.pi-angle-double-left').exists()).toBe(true);
@@ -37,7 +37,7 @@ describe('Paginator.vue', () => {
 
     it('should change row count', async () => {
         await wrapper.vm.onRowChange(20);
-        
+
         expect(wrapper.vm.d_rows).toBe(20);
         expect(wrapper.emitted()['update:rows'][0]).toEqual([20]);
         expect(wrapper.vm.pageCount).toBe(6);
@@ -46,4 +46,4 @@ describe('Paginator.vue', () => {
 
         expect(wrapper.find('.p-dropdown-label').text()).toBe('20');
     });
-});
\ No newline at end of file
+});
diff --git a/components/paginator/Paginator.vue b/components/paginator/Paginator.vue
index e323b2576..b09c464c7 100755
--- a/components/paginator/Paginator.vue
+++ b/components/paginator/Paginator.vue
@@ -1,26 +1,23 @@
 <template>
-	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$slots.start">
+    <div v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" class="p-paginator p-component">
+        <div v-if="$slots.start" class="p-paginator-left-content">
             <slot name="start" :state="currentState"></slot>
         </div>
-		<template v-for="item of templateItems" :key="item">
-			<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-			<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-			<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-			<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
-			<PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
-			<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage"
-                :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
-			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows"
-                :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty"/>
-            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount"
-                @page-change="changePage($event)" :disabled="empty"/>
-            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
+        <template v-for="item of templateItems" :key="item">
+            <FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
+            <PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
+            <NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
+            <LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
+            <PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
+            <CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage" :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
+            <RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
+            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
+            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
         </template>
-        <div class="p-paginator-right-content" v-if="$slots.end">
+        <div v-if="$slots.end" class="p-paginator-right-content">
             <slot name="end" :state="currentState"></slot>
         </div>
-	</div>
+    </div>
 </template>
 
 <script>
@@ -75,7 +72,7 @@ export default {
         return {
             d_first: this.first,
             d_rows: this.rows
-        }
+        };
     },
     watch: {
         first(newValue) {
@@ -85,7 +82,7 @@ export default {
             this.d_rows = newValue;
         },
         totalRecords(newValue) {
-            if (this.page > 0 && newValue && (this.d_first >= newValue)) {
+            if (this.page > 0 && newValue && this.d_first >= newValue) {
                 this.changePage(this.pageCount - 1);
             }
         }
@@ -103,13 +100,13 @@ export default {
                     pageCount: pc
                 };
 
-				this.$emit('update:first', this.d_first);
+                this.$emit('update:first', this.d_first);
                 this.$emit('update:rows', this.d_rows);
                 this.$emit('page', state);
             }
         },
         changePageToFirst(event) {
-            if(!this.isFirstPage) {
+            if (!this.isFirstPage) {
                 this.changePage(0);
             }
 
@@ -124,11 +121,11 @@ export default {
             event.originalEvent.preventDefault();
         },
         changePageToNext(event) {
-            this.changePage(this.page  + 1);
+            this.changePage(this.page + 1);
             event.preventDefault();
         },
         changePageToLast(event) {
-            if(!this.isLastPage) {
+            if (!this.isLastPage) {
                 this.changePage(this.pageCount - 1);
             }
 
@@ -142,9 +139,11 @@ export default {
     computed: {
         templateItems() {
             let keys = [];
+
             this.template.split(' ').map((value) => {
                 keys.push(value.trim());
-            })
+            });
+
             return keys;
         },
         page() {
@@ -164,11 +163,12 @@ export default {
             const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 
             //calculate range, keep current in middle if necessary
-            let start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
+            let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
             let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
 
             //check when approaching to last page
             const delta = this.pageLinkSize - (end - start + 1);
+
             start = Math.max(0, start - delta);
 
             return [start, end];
@@ -179,7 +179,7 @@ export default {
             let start = boundaries[0];
             let end = boundaries[1];
 
-            for(var i = start; i <= end; i++) {
+            for (var i = start; i <= end; i++) {
                 pageLinks.push(i + 1);
             }
 
@@ -190,7 +190,7 @@ export default {
                 page: this.page,
                 first: this.d_first,
                 rows: this.d_rows
-            }
+            };
         },
         empty() {
             return this.pageCount === 0;
@@ -200,17 +200,17 @@ export default {
         }
     },
     components: {
-        'CurrentPageReport': CurrrentPageReport,
-        'FirstPageLink': FirstPageLink,
-        'LastPageLink': LastPageLink,
-        'NextPageLink': NextPageLink,
-        'PageLinks': PageLinks,
-        'PrevPageLink': PrevPageLink,
-        'RowsPerPageDropdown': RowsPerPageDropdown,
-        'JumpToPageDropdown': JumpToPageDropdown,
-        'JumpToPageInput': JumpToPageInput
+        CurrentPageReport: CurrrentPageReport,
+        FirstPageLink: FirstPageLink,
+        LastPageLink: LastPageLink,
+        NextPageLink: NextPageLink,
+        PageLinks: PageLinks,
+        PrevPageLink: PrevPageLink,
+        RowsPerPageDropdown: RowsPerPageDropdown,
+        JumpToPageDropdown: JumpToPageDropdown,
+        JumpToPageInput: JumpToPageInput
     }
-}
+};
 </script>
 
 <style lang="css">
@@ -222,11 +222,11 @@ export default {
 }
 
 .p-paginator-left-content {
-	margin-right: auto;
+    margin-right: auto;
 }
 
 .p-paginator-right-content {
-	margin-left: auto;
+    margin-left: auto;
 }
 
 .p-paginator-page,
diff --git a/components/paginator/PrevPageLink.vue b/components/paginator/PrevPageLink.vue
index 93bf4aeb6..b1c0d7263 100755
--- a/components/paginator/PrevPageLink.vue
+++ b/components/paginator/PrevPageLink.vue
@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-left"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-left"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'PrevPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-prev p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-prev p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/paginator/RowsPerPageDropdown.vue b/components/paginator/RowsPerPageDropdown.vue
index aa32811d5..9a6011230 100755
--- a/components/paginator/RowsPerPageDropdown.vue
+++ b/components/paginator/RowsPerPageDropdown.vue
@@ -1,6 +1,5 @@
 <template>
-	<RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value"
-        @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
+    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
 </template>
 
 <script>
@@ -23,16 +22,18 @@ export default {
     computed: {
         rowsOptions() {
             let opts = [];
+
             if (this.options) {
-                for(let i= 0; i < this.options.length; i++) {
-                    opts.push({label: String(this.options[i]), value: this.options[i]})
+                for (let i = 0; i < this.options.length; i++) {
+                    opts.push({ label: String(this.options[i]), value: this.options[i] });
                 }
             }
+
             return opts;
         }
     },
     components: {
-        'RPPDropdown': Dropdown
+        RPPDropdown: Dropdown
     }
-}
+};
 </script>
diff --git a/components/panel/Panel.d.ts b/components/panel/Panel.d.ts
index 34120c6dd..2f1071797 100755
--- a/components/panel/Panel.d.ts
+++ b/components/panel/Panel.d.ts
@@ -25,6 +25,10 @@ export interface PanelProps {
      * Defines the initial state of panel content.
      */
     collapsed?: boolean;
+    /**
+     * Uses to pass the custom value to read for the button inside the component.
+     */
+    toggleButtonProps?: string | undefined;
 }
 
 export interface PanelSlots {
@@ -52,14 +56,14 @@ export declare type PanelEmits = {
      * Callback to invoke when a tab toggle.
      * @param {PanelToggleEvent} event - Custom toggle event.
      */
-    'toggle': (event: PanelToggleEvent) => void;
-}
+    toggle: (event: PanelToggleEvent) => void;
+};
 
-declare class Panel extends ClassComponent<PanelProps, PanelSlots, PanelEmits> { }
+declare class Panel extends ClassComponent<PanelProps, PanelSlots, PanelEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Panel: GlobalComponentConstructor<Panel>
+        Panel: GlobalComponentConstructor<Panel>;
     }
 }
 
@@ -69,7 +73,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Panel](https://www.primefaces.org/primevue/showcase/#/panel)
+ * - [Panel](https://www.primefaces.org/primevue/panel)
  *
  */
 export default Panel;
diff --git a/components/panel/Panel.spec.js b/components/panel/Panel.spec.js
index df58bfa7a..ecfc97ba2 100644
--- a/components/panel/Panel.spec.js
+++ b/components/panel/Panel.spec.js
@@ -28,6 +28,6 @@ describe('Panel.vue', () => {
 
         await wrapper.vm.toggle({});
 
-        expect(wrapper.emitted().toggle[0]).toEqual([{originalEvent: {}, value: true}]);
+        expect(wrapper.emitted().toggle[0]).toEqual([{ originalEvent: {}, value: true }]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/panel/Panel.vue b/components/panel/Panel.vue
index 99c82ef21..b16960ac4 100755
--- a/components/panel/Panel.vue
+++ b/components/panel/Panel.vue
@@ -2,18 +2,29 @@
     <div :class="containerClass">
         <div class="p-panel-header">
             <slot name="header">
-                <span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
+                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
             </slot>
             <div class="p-panel-icons">
                 <slot name="icons"></slot>
-                <button v-if="toggleable" class="p-panel-header-icon p-panel-toggler p-link" @click="toggle" type="button"
-                    :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" v-ripple>
-                    <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
+                <button
+                    v-if="toggleable"
+                    :id="ariaId + '_header'"
+                    v-ripple
+                    type="button"
+                    role="button"
+                    class="p-panel-header-icon p-panel-toggler p-link"
+                    :aria-label="toggleButtonProps || header"
+                    :aria-controls="ariaId + '_content'"
+                    :aria-expanded="!d_collapsed"
+                    @click="toggle"
+                    @keydown="onKeyDown"
+                >
+                    <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
                 </button>
             </div>
         </div>
         <transition name="p-toggleable-content">
-            <div class="p-toggleable-content" v-show="!d_collapsed" role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
                 <div class="p-panel-content">
                     <slot></slot>
                 </div>
@@ -23,7 +34,7 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -32,12 +43,13 @@ export default {
     props: {
         header: String,
         toggleable: Boolean,
-        collapsed: Boolean
+        collapsed: Boolean,
+        toggleButtonProps: String
     },
     data() {
         return {
             d_collapsed: this.collapsed
-        }
+        };
     },
     watch: {
         collapsed(newValue) {
@@ -52,6 +64,12 @@ export default {
                 originalEvent: event,
                 value: this.d_collapsed
             });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
         }
     },
     computed: {
@@ -59,13 +77,13 @@ export default {
             return UniqueComponentId();
         },
         containerClass() {
-            return ['p-panel p-component', {'p-panel-toggleable': this.toggleable}];
+            return ['p-panel p-component', { 'p-panel-toggleable': this.toggleable }];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/panelmenu/PanelMenu.d.ts b/components/panelmenu/PanelMenu.d.ts
index 3f8be111f..eee8176fc 100755
--- a/components/panelmenu/PanelMenu.d.ts
+++ b/components/panelmenu/PanelMenu.d.ts
@@ -41,13 +41,13 @@ export declare type PanelMenuEmits = {
      * @param {*} value - New value.
      */
     'update:expandedKeys': (value: any) => void;
-}
+};
 
-declare class PanelMenu extends ClassComponent<PanelMenuProps, PanelMenuSlots, PanelMenuEmits> { }
+declare class PanelMenu extends ClassComponent<PanelMenuProps, PanelMenuSlots, PanelMenuEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        PanelMenu: GlobalComponentConstructor<PanelMenu>
+        PanelMenu: GlobalComponentConstructor<PanelMenu>;
     }
 }
 
@@ -57,11 +57,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [PanelMenu](https://www.primefaces.org/primevue/showcase/#/panelmenu)
+ * - [PanelMenu](https://www.primefaces.org/primevue/panelmenu)
  *
  */
 export default PanelMenu;
diff --git a/components/panelmenu/PanelMenu.spec.js b/components/panelmenu/PanelMenu.spec.js
index 19c80b039..95b056d0e 100644
--- a/components/panelmenu/PanelMenu.spec.js
+++ b/components/panelmenu/PanelMenu.spec.js
@@ -21,12 +21,12 @@ describe('PanelMenu', () => {
                             {
                                 key: '2_0',
                                 label: 'New',
-                                icon: 'pi pi-fw pi-user-plus',
+                                icon: 'pi pi-fw pi-user-plus'
                             },
                             {
                                 key: '2_1',
                                 label: 'Delete',
-                                icon: 'pi pi-fw pi-user-minus',
+                                icon: 'pi pi-fw pi-user-minus'
                             },
                             {
                                 key: '2_2',
@@ -76,10 +76,10 @@ describe('PanelMenu', () => {
     });
 
     it('should update expandedKeys', async () => {
-        await wrapper.setProps({ expandedKeys: {'2': true} });
+        await wrapper.setProps({ expandedKeys: { 2: true } });
 
         await wrapper.vm.onItemClick({}, wrapper.vm.model[0].items[2]);
 
-        expect(wrapper.emitted()['update:expandedKeys'][0]).toEqual([{ '2': true, '2_2': true }]);
+        expect(wrapper.emitted()['update:expandedKeys'][0]).toEqual([{ 2: true, '2_2': true }]);
     });
-});
\ No newline at end of file
+});
diff --git a/components/panelmenu/PanelMenu.vue b/components/panelmenu/PanelMenu.vue
index 2f9a1b753..47a286cbb 100755
--- a/components/panelmenu/PanelMenu.vue
+++ b/components/panelmenu/PanelMenu.vue
@@ -1,30 +1,37 @@
 <template>
     <div class="p-panelmenu p-component">
         <template v-for="(item, index) of model" :key="label(item) + '_' + index">
-            <div v-if="visible(item)"  :class="getPanelClass(item)" :style="item.style">
+            <div v-if="visible(item)" :class="getPanelClass(item)" :style="item.style">
                 <div :class="getHeaderClass(item)" :style="item.style">
                     <template v-if="!$slots.item">
-                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                            <a :href="href" :class="getHeaderLinkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem">
+                        <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                            <a :href="href" :class="getHeaderLinkClass(item, { isActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="treeitem">
                                 <span v-if="item.icon" :class="getPanelIcon(item)"></span>
-                                <span class="p-menuitem-text">{{label(item)}}</span>
+                                <span class="p-menuitem-text">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" @keydown="onItemKeydown($event, item)" :tabindex="disabled(item) ? null : '0'"
-                            :aria-expanded="isActive(item)" :id="ariaId +'_header_' + index" :aria-controls="ariaId +'_content_' + index">
+                        <a
+                            v-else
+                            :id="ariaId + '_header_' + index"
+                            :href="item.url"
+                            :class="getHeaderLinkClass(item)"
+                            @click="onItemClick($event, item)"
+                            @keydown="onItemKeydown($event, item)"
+                            :tabindex="disabled(item) ? null : '0'"
+                            :aria-expanded="isActive(item)"
+                            :aria-controls="ariaId + '_content_' + index"
+                        >
                             <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                             <span v-if="item.icon" :class="getPanelIcon(item)"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="isActive(item)"
-                        role="region" :id="ariaId +'_content_' + index" :aria-labelledby="ariaId +'_header_' + index">
-                        <div class="p-panelmenu-content" v-if="item.items">
-                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item"
-                                :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
+                    <div v-show="isActive(item)" :id="ariaId + '_content_' + index" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header_' + index">
+                        <div v-if="item.items" class="p-panelmenu-content">
+                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
                         </div>
                     </div>
                 </transition>
@@ -35,13 +42,13 @@
 
 <script>
 import PanelMenuSub from './PanelMenuSub.vue';
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PanelMenu',
     emits: ['update:expandedKeys'],
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -57,7 +64,7 @@ export default {
     data() {
         return {
             activeItem: null
-        }
+        };
     },
     methods: {
         onItemClick(event, item, navigate) {
@@ -67,6 +74,7 @@ export default {
 
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -77,12 +85,10 @@ export default {
                 });
             }
 
-            if (this.activeItem && this.activeItem === item)
-                this.activeItem = null;
-            else
-                this.activeItem = item;
+            if (this.activeItem && this.activeItem === item) this.activeItem = null;
+            else this.activeItem = item;
 
-            this.updateExpandedKeys({item: item, expanded: this.activeItem != null});
+            this.updateExpandedKeys({ item: item, expanded: this.activeItem != null });
 
             if (item.to && navigate) {
                 navigate(event);
@@ -96,12 +102,10 @@ export default {
         updateExpandedKeys(event) {
             if (this.expandedKeys) {
                 let item = event.item;
-                let _keys = {...this.expandedKeys};
+                let _keys = { ...this.expandedKeys };
 
-                if (event.expanded)
-                    _keys[item.key] = true;
-                else
-                    delete _keys[item.key];
+                if (event.expanded) _keys[item.key] = true;
+                else delete _keys[item.key];
 
                 this.$emit('update:expandedKeys', _keys);
             }
@@ -111,42 +115,46 @@ export default {
         },
         getPanelToggleIcon(item) {
             const active = this.isActive(item);
-            return ['p-panelmenu-icon pi', {'pi-chevron-right': !active,' pi-chevron-down': active}];
+
+            return ['p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active }];
         },
         getPanelIcon(item) {
             return ['p-menuitem-icon', item.icon];
         },
         getHeaderLinkClass(item, routerProps) {
-            return ['p-panelmenu-header-link', {
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-panelmenu-header-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         isActive(item) {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
         },
         getHeaderClass(item) {
-            return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': this.disabled(item)}];
+            return ['p-component p-panelmenu-header', { 'p-highlight': this.isActive(item), 'p-disabled': this.disabled(item) }];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
-    components: {
-        'PanelMenuSub': PanelMenuSub
-    },
     computed: {
         ariaId() {
             return UniqueComponentId();
         }
+    },
+    components: {
+        PanelMenuSub: PanelMenuSub
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/panelmenu/PanelMenuSub.vue b/components/panelmenu/PanelMenuSub.vue
index e0a2f6a2a..6ca775bd5 100755
--- a/components/panelmenu/PanelMenuSub.vue
+++ b/components/panelmenu/PanelMenuSub.vue
@@ -1,30 +1,38 @@
 <template>
     <ul class="p-submenu-list" role="tree">
         <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
+            <li v-if="visible(item) && !item.separator" role="none" :class="getItemClass(item)" :style="item.style">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive:isRouterActive, isExactActive}">
-                        <a :href="href" :class="linkClass(item, {isActive:isRouterActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
+                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive: isRouterActive, isExactActive }" :to="item.to" custom>
+                        <a :href="href" :class="linkClass(item, { isActive: isRouterActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" @keydown="onItemKeydown($event, item)"
-                        role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
-                        <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
+                    <a
+                        v-else
+                        :href="item.url"
+                        :class="linkClass(item)"
+                        :target="item.target"
+                        @click="onItemClick($event, item)"
+                        @keydown="onItemKeydown($event, item)"
+                        role="treeitem"
+                        :aria-expanded="isActive(item)"
+                        :tabindex="disabled(item) ? null : '0'"
+                    >
+                        <span v-if="item.items" :class="getSubmenuIcon(item)"></span>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
-                        <span class="p-menuitem-text">{{label(item)}}</span>
+                        <span class="p-menuitem-text">{{ label(item) }}</span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
                 <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="isActive(item)">
-                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
-                            :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
+                    <div v-show="isActive(item)" class="p-toggleable-content">
+                        <PanelMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact" />
                     </div>
                 </transition>
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()"></li>
+            <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style"></li>
         </template>
     </ul>
 </template>
@@ -34,7 +42,7 @@ export default {
     name: 'PanelMenuSub',
     emits: ['item-toggle'],
     props: {
-		model: {
+        model: {
             type: null,
             default: null
         },
@@ -54,7 +62,7 @@ export default {
     data() {
         return {
             activeItem: null
-        }
+        };
     },
     methods: {
         onItemClick(event, item, navigate) {
@@ -64,6 +72,7 @@ export default {
 
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -74,12 +83,10 @@ export default {
                 });
             }
 
-            if (this.activeItem && this.activeItem === item)
-                this.activeItem = null;
-            else
-                this.activeItem = item;
+            if (this.activeItem && this.activeItem === item) this.activeItem = null;
+            else this.activeItem = item;
 
-            this.$emit('item-toggle', {item: item, expanded: this.activeItem != null});
+            this.$emit('item-toggle', { item: item, expanded: this.activeItem != null });
 
             if (item.to && navigate) {
                 navigate(event);
@@ -94,28 +101,32 @@ export default {
             return ['p-menuitem', item.className];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         isActive(item) {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
         },
         getSubmenuIcon(item) {
             const active = this.isActive(item);
-            return ['p-panelmenu-icon pi pi-fw', {'pi-angle-right': !active, 'pi-angle-down': active}];
+
+            return ['p-panelmenu-icon pi pi-fw', { 'pi-angle-right': !active, 'pi-angle-down': active }];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     }
-}
+};
 </script>
diff --git a/components/password/Password.d.ts b/components/password/Password.d.ts
index 0ea51a640..02afa76a0 100755
--- a/components/password/Password.d.ts
+++ b/components/password/Password.d.ts
@@ -67,6 +67,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Placeholder text for the input.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * Default value is false.
+     */
+    required?: boolean | undefined;
     /**
      * Identifier of the underlying input element.
      */
@@ -130,13 +135,13 @@ export declare type PasswordEmits = {
      * @param {string} value - New value.
      */
     'update:modelValue': (value: string) => void;
-}
+};
 
-declare class Password extends ClassComponent<PasswordProps, PasswordSlots, PasswordEmits> { }
+declare class Password extends ClassComponent<PasswordProps, PasswordSlots, PasswordEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Password: GlobalComponentConstructor<Password>
+        Password: GlobalComponentConstructor<Password>;
     }
 }
 
@@ -146,7 +151,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Password](https://www.primefaces.org/primevue/showcase/#/password)
+ * - [Password](https://www.primefaces.org/primevue/password)
  *
  */
 export default Password;
diff --git a/components/password/Password.spec.js b/components/password/Password.spec.js
index 6e109e0d6..214a72eb8 100644
--- a/components/password/Password.spec.js
+++ b/components/password/Password.spec.js
@@ -1,15 +1,23 @@
-import { mount } from '@vue/test-utils';
-import PrimeVue from '@/components/config/PrimeVue';
+import { config, mount } from '@vue/test-utils';
 import Password from './Password.vue';
 
+config.global.mocks = {
+    $primevue: {
+        config: {
+            'z-index': 5,
+            inputStyle: 'filled',
+            ripple: false,
+            locale: {}
+        }
+    }
+};
 describe('Password.vue', () => {
     let wrapper;
-    const event = { target: {value: 'P'}};
+    const event = { target: { value: 'P' } };
 
     beforeEach(async () => {
         wrapper = mount(Password, {
             global: {
-                plugins: [PrimeVue],
                 stubs: {
                     teleport: true
                 }
@@ -34,11 +42,11 @@ describe('Password.vue', () => {
     });
 
     it('should meter update', async () => {
-        expect(wrapper.find('.p-password-info').text()).toBe('Enter a password');
+        expect(wrapper.find('.p-password-info').text()).toBe('');
 
         await wrapper.vm.onKeyUp(event);
 
-        expect(wrapper.find('.p-password-info').text()).toBe('Weak');
+        expect(wrapper.find('.p-password-info').text()).toBe('');
 
         expect(wrapper.find('.p-password-strength').classes()).toContain('weak');
     });
@@ -46,13 +54,11 @@ describe('Password.vue', () => {
     it('should toggle mask', async () => {
         await wrapper.setProps({ toggleMask: true });
 
-        expect(wrapper.find('.p-password-input').attributes().type).toBe('password');
         expect(wrapper.find('.pi.pi-eye').exists()).toBe(true);
 
         await wrapper.vm.onMaskToggle();
 
-        expect(wrapper.find('.p-password-input').attributes().type).toBe('text');
         expect(wrapper.find('.pi.pi-eye').exists()).toBe(false);
         expect(wrapper.find('.pi.pi-eye-slash').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/password/Password.vue b/components/password/Password.vue
index a00c5df42..0c121e21e 100755
--- a/components/password/Password.vue
+++ b/components/password/Password.vue
@@ -1,21 +1,39 @@
 <template>
     <div :class="containerClass">
-        <PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-            :aria-controls="(panelProps&&panelProps.id)||panelId||panelUniqueId" :aria-expanded="overlayVisible" :aria-haspopup="true" :placeholder="placeholder"
-            @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
+        <PInputText
+            ref="input"
+            :id="inputId"
+            :type="inputType"
+            :class="inputFieldClass"
+            :style="inputStyle"
+            :value="modelValue"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-controls="(panelProps && panelProps.id) || panelId || panelUniqueId"
+            :aria-expanded="overlayVisible"
+            :aria-haspopup="true"
+            :placeholder="placeholder"
+            :required="required"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keyup="onKeyUp"
+            @invalid="onInvalid"
+            v-bind="inputProps"
+        />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <span class="p-hidden-accessible" aria-live="polite">
-            {{infoText}}
+            {{ infoText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :id="panelId||panelUniqueId" :class="panelStyleClass" :style="panelStyle" v-if="overlayVisible" @click="onOverlayClick" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="panelProps">
                     <slot name="header"></slot>
                     <slot name="content">
                         <div class="p-password-meter">
-                            <div :class="strengthClass" :style="{'width': meter ? meter.width : ''}"></div>
+                            <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }"></div>
                         </div>
-                        <div class="p-password-info">{{infoText}}</div>
+                        <div class="p-password-info">{{ infoText }}</div>
                     </slot>
                     <slot name="footer"></slot>
                 </div>
@@ -25,14 +43,14 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
-import OverlayEventBus from 'primevue/overlayeventbus';
 import InputText from 'primevue/inputtext';
+import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
+import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Password',
-    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
     props: {
         modelValue: String,
         promptLabel: {
@@ -87,17 +105,45 @@ export default {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
-        panelId: null,
-        panelClass: null,
-        panelStyle: null,
-        panelProps: null,
+        required: {
+            type: Boolean,
+            required: false
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelId: {
+            type: String,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelStyle: {
+            type: null,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -125,6 +171,7 @@ export default {
     },
     beforeUnmount() {
         this.unbindResizeListener();
+
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
@@ -153,8 +200,7 @@ export default {
         alignOverlay() {
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
             }
@@ -162,21 +208,20 @@ export default {
         testStrength(str) {
             let level = 0;
 
-            if (this.strongCheckRegExp.test(str))
-                level = 3;
-            else if (this.mediumCheckRegExp.test(str))
-                level = 2;
-            else if (str.length)
-                level = 1;
+            if (this.strongCheckRegExp.test(str)) level = 3;
+            else if (this.mediumCheckRegExp.test(str)) level = 2;
+            else if (str.length) level = 1;
 
             return level;
         },
-        onInput(event)  {
-            this.$emit('update:modelValue', event.target.value)
+        onInput(event) {
+            this.$emit('update:modelValue', event.target.value);
         },
         onFocus(event) {
             this.focused = true;
+
             if (this.feedback) {
+                this.setPasswordMeter(this.modelValue);
                 this.overlayVisible = true;
             }
 
@@ -184,6 +229,7 @@ export default {
         },
         onBlur(event) {
             this.focused = false;
+
             if (this.feedback) {
                 this.overlayVisible = false;
             }
@@ -193,46 +239,14 @@ export default {
         onKeyUp(event) {
             if (this.feedback) {
                 const value = event.target.value;
-                let label = null;
-                let meter = null;
-
-                switch (this.testStrength(value)) {
-                    case 1:
-                        label = this.weakText;
-                        meter = {
-                            strength: 'weak',
-                            width: '33.33%'
-                        };
-                        break;
-
-                    case 2:
-                        label = this.mediumText;
-                        meter = {
-                            strength: 'medium',
-                            width: '66.66%'
-                        };
-                        break;
-
-                    case 3:
-                        label = this.strongText;
-                        meter = {
-                            strength: 'strong',
-                            width: '100%'
-                        };
-                        break;
-
-                    default:
-                        label = this.promptText;
-                        meter = null;
-                        break;
-                }
+                const { meter, label } = this.checkPasswordStrength(value);
 
                 this.meter = meter;
                 this.infoText = label;
 
-                //escape
-                if (event.which === 27) {
+                if (event.code === 'Escape') {
                     this.overlayVisible && (this.overlayVisible = false);
+
                     return;
                 }
 
@@ -241,6 +255,58 @@ export default {
                 }
             }
         },
+        setPasswordMeter() {
+            if (!this.modelValue) return;
+
+            const { meter, label } = this.checkPasswordStrength(this.modelValue);
+
+            this.meter = meter;
+            this.infoText = label;
+
+            if (!this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+        },
+        checkPasswordStrength(value) {
+            let label = null;
+            let meter = null;
+
+            switch (this.testStrength(value)) {
+                case 1:
+                    label = this.weakText;
+                    meter = {
+                        strength: 'weak',
+                        width: '33.33%'
+                    };
+                    break;
+
+                case 2:
+                    label = this.mediumText;
+                    meter = {
+                        strength: 'medium',
+                        width: '66.66%'
+                    };
+                    break;
+
+                case 3:
+                    label = this.strongText;
+                    meter = {
+                        strength: 'strong',
+                        width: '100%'
+                    };
+                    break;
+
+                default:
+                    label = this.promptText;
+                    meter = null;
+                    break;
+            }
+
+            return { label, meter };
+        },
+        onInvalid(event) {
+            this.$emit('invalid', event);
+        },
         bindScrollListener() {
             if (!this.scrollHandler) {
                 this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input.$el, () => {
@@ -264,6 +330,7 @@ export default {
                         this.overlayVisible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -288,22 +355,33 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-password p-component p-inputwrapper', {
-                'p-inputwrapper-filled': this.filled,
-                'p-inputwrapper-focus': this.focused,
-                'p-input-icon-right': this.toggleMask
-            }];
+            return [
+                'p-password p-component p-inputwrapper',
+                {
+                    'p-inputwrapper-filled': this.filled,
+                    'p-inputwrapper-focus': this.focused,
+                    'p-input-icon-right': this.toggleMask
+                }
+            ];
         },
         inputFieldClass() {
-            return ['p-password-input', {
-                'p-disabled': this.disabled
-            }];
+            return [
+                'p-password-input',
+                this.inputClass,
+                {
+                    'p-disabled': this.disabled
+                }
+            ];
         },
         panelStyleClass() {
-            return ['p-password-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-password-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         toggleIconClass() {
             return this.unmasked ? this.hideIcon : this.showIcon;
@@ -315,7 +393,7 @@ export default {
             return this.unmasked ? 'text' : 'password';
         },
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         },
         weakText() {
             return this.weakLabel || this.$primevue.config.locale.weak;
@@ -334,10 +412,10 @@ export default {
         }
     },
     components: {
-        'PInputText': InputText,
-        'Portal': Portal
+        PInputText: InputText,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/picklist/PickList.d.ts b/components/picklist/PickList.d.ts
index 9abf67f16..8449b64af 100755
--- a/components/picklist/PickList.d.ts
+++ b/components/picklist/PickList.d.ts
@@ -45,17 +45,17 @@ export interface PickListMoveToTargetEvent {
 /**
  * @extends PickListMoveToTargetEvent
  */
-export interface PickListMoveAllToTargetEvent extends PickListMoveToTargetEvent { }
+export interface PickListMoveAllToTargetEvent extends PickListMoveToTargetEvent {}
 
 /**
  * @extends PickListMoveToTargetEvent
  */
-export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent { }
+export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent {}
 
 /**
  * @extends PickListMoveToTargetEvent
  */
-export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent { }
+export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {}
 
 export interface PickListProps {
     /**
@@ -136,7 +136,7 @@ export interface PickListSlots {
      * Custom source controls start template.
      */
     sourcecontrolsstart: () => VNode[];
-     /**
+    /**
      * Custom source controls end template.
      */
     sourcecontrolsend: () => VNode[];
@@ -173,7 +173,7 @@ export declare type PickListEmits = {
      * Callback to invoke when the list is reordered.
      * @param {PickListReorderEvent} event - Custom reorder event.
      */
-    'reorder': (event: PickListReorderEvent) => void;
+    reorder: (event: PickListReorderEvent) => void;
     /**
      * Callback to invoke when one or more items are moved to the other list.
      * @param {PickListSelectionChangeEvent} event - Custom selection change event.
@@ -199,13 +199,13 @@ export declare type PickListEmits = {
      * @param {PickListMoveAllToSourceEvent} event - Custom move all to source event.
      */
     'move-all-to-source': (event: PickListMoveAllToSourceEvent) => void;
-}
+};
 
-declare class PickList extends ClassComponent<PickListProps, PickListSlots, PickListEmits> { }
+declare class PickList extends ClassComponent<PickListProps, PickListSlots, PickListEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        PickList: GlobalComponentConstructor<PickList>
+        PickList: GlobalComponentConstructor<PickList>;
     }
 }
 
@@ -215,7 +215,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [PickList](https://www.primefaces.org/primevue/showcase/#/picklist)
+ * - [PickList](https://www.primefaces.org/primevue/picklist)
  *
  */
 export default PickList;
diff --git a/components/picklist/PickList.spec.js b/components/picklist/PickList.spec.js
index 928b29f82..cc544a626 100644
--- a/components/picklist/PickList.spec.js
+++ b/components/picklist/PickList.spec.js
@@ -10,28 +10,28 @@ describe('PickList.vue', () => {
                 modelValue: [
                     [
                         {
-                            "id": "1000",
-                            "code": "vbb124btr",
-                            "name": "Game Controller",
-                            "description": "Product Description",
-                            "image": "game-controller.jpg",
-                            "price": 99,
-                            "category": "Electronics",
-                            "quantity": 2,
-                            "inventoryStatus": "LOWSTOCK",
-                            "rating": 4
+                            id: '1000',
+                            code: 'vbb124btr',
+                            name: 'Game Controller',
+                            description: 'Product Description',
+                            image: 'game-controller.jpg',
+                            price: 99,
+                            category: 'Electronics',
+                            quantity: 2,
+                            inventoryStatus: 'LOWSTOCK',
+                            rating: 4
                         },
                         {
-                            "id": "1001",
-                            "code": "nvklal433",
-                            "name": "Black Watch",
-                            "description": "Product Description",
-                            "image": "black-watch.jpg",
-                            "price": 72,
-                            "category": "Accessories",
-                            "quantity": 61,
-                            "inventoryStatus": "INSTOCK",
-                            "rating": 4
+                            id: '1001',
+                            code: 'nvklal433',
+                            name: 'Black Watch',
+                            description: 'Product Description',
+                            image: 'black-watch.jpg',
+                            price: 72,
+                            category: 'Accessories',
+                            quantity: 61,
+                            inventoryStatus: 'INSTOCK',
+                            rating: 4
                         }
                     ],
                     []
@@ -44,7 +44,6 @@ describe('PickList.vue', () => {
         });
     });
 
-
     it('should exist', () => {
         expect(wrapper.find('.p-picklist.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-picklist-list-wrapper.p-picklist-source-wrapper').exists()).toBe(true);
@@ -57,36 +56,38 @@ describe('PickList.vue', () => {
     });
 
     it('should update sourceList and targetList', async () => {
-        await wrapper.setProps({ modelValue: [
-            [
-                {
-                    "id": "1000",
-                    "code": "vbb124btr",
-                    "name": "Game Controller",
-                    "description": "Product Description",
-                    "image": "game-controller.jpg",
-                    "price": 99,
-                    "category": "Electronics",
-                    "quantity": 2,
-                    "inventoryStatus": "LOWSTOCK",
-                    "rating": 4
-                }
-            ],
-            [
-                {
-                    "id": "1001",
-                    "code": "nvklal433",
-                    "name": "Black Watch",
-                    "description": "Product Description",
-                    "image": "black-watch.jpg",
-                    "price": 72,
-                    "category": "Accessories",
-                    "quantity": 61,
-                    "inventoryStatus": "INSTOCK",
-                    "rating": 4
-                }
+        await wrapper.setProps({
+            modelValue: [
+                [
+                    {
+                        id: '1000',
+                        code: 'vbb124btr',
+                        name: 'Game Controller',
+                        description: 'Product Description',
+                        image: 'game-controller.jpg',
+                        price: 99,
+                        category: 'Electronics',
+                        quantity: 2,
+                        inventoryStatus: 'LOWSTOCK',
+                        rating: 4
+                    }
+                ],
+                [
+                    {
+                        id: '1001',
+                        code: 'nvklal433',
+                        name: 'Black Watch',
+                        description: 'Product Description',
+                        image: 'black-watch.jpg',
+                        price: 72,
+                        category: 'Accessories',
+                        quantity: 61,
+                        inventoryStatus: 'INSTOCK',
+                        rating: 4
+                    }
+                ]
             ]
-        ]});
+        });
 
         expect(wrapper.vm.sourceList.length).toBe(1);
         expect(wrapper.vm.targetList.length).toBe(1);
@@ -95,75 +96,86 @@ describe('PickList.vue', () => {
     it('should select an item from source list', async () => {
         await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0][0], 0);
 
-        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[wrapper.vm.modelValue[0][0]], []])
+        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[wrapper.vm.modelValue[0][0]], []]);
     });
 
     it('should dblclick an item from source list', async () => {
-        await wrapper.setProps({selection: [[wrapper.vm.modelValue[0][0]], []]});
+        await wrapper.setProps({ selection: [[wrapper.vm.modelValue[0][0]], []] });
 
         await wrapper.vm.onItemDblClick({}, wrapper.vm.modelValue[0][0], 0);
 
         expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual([wrapper.vm.modelValue[0][0]]);
-        expect(wrapper.emitted()['move-to-target'][0]).toEqual([{originalEvent: {}, items: [wrapper.vm.modelValue[0][0]]}]);
-        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[],[]]);
+        expect(wrapper.emitted()['move-to-target'][0]).toEqual([{ originalEvent: {}, items: [wrapper.vm.modelValue[0][0]] }]);
+        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[], []]);
     });
 
     it('should move item up', async () => {
-        await wrapper.setProps({selection: [[wrapper.vm.modelValue[0][1]], []]});
+        await wrapper.setProps({ selection: [[wrapper.vm.modelValue[0][1]], []] });
 
         await wrapper.vm.moveUp({}, 0);
 
-        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([[{
-            "id": "1001",
-            "code": "nvklal433",
-            "name": "Black Watch",
-            "description": "Product Description",
-            "image": "black-watch.jpg",
-            "price": 72,
-            "category": "Accessories",
-            "quantity": 61,
-            "inventoryStatus": "INSTOCK",
-            "rating": 4
-        },{
-            "id": "1000",
-            "code": "vbb124btr",
-            "name": "Game Controller",
-            "description": "Product Description",
-            "image": "game-controller.jpg",
-            "price": 99,
-            "category": "Electronics",
-            "quantity": 2,
-            "inventoryStatus": "LOWSTOCK",
-            "rating": 4
-        }],[]]);
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([
+            [
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1000',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4
+                }
+            ],
+            []
+        ]);
     });
 
     it('should should move all to target', async () => {
         await wrapper.vm.moveAllToTarget({});
 
-        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([[], [{
-            "id": "1000",
-            "code": "vbb124btr",
-            "name": "Game Controller",
-            "description": "Product Description",
-            "image": "game-controller.jpg",
-            "price": 99,
-            "category": "Electronics",
-            "quantity": 2,
-            "inventoryStatus": "LOWSTOCK",
-            "rating": 4
-        },
-        {
-            "id": "1001",
-            "code": "nvklal433",
-            "name": "Black Watch",
-            "description": "Product Description",
-            "image": "black-watch.jpg",
-            "price": 72,
-            "category": "Accessories",
-            "quantity": 61,
-            "inventoryStatus": "INSTOCK",
-            "rating": 4
-        }]]);
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([
+            [],
+            [
+                {
+                    id: '1000',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                }
+            ]
+        ]);
     });
 });
diff --git a/components/picklist/PickList.vue b/components/picklist/PickList.vue
index 206493873..d71f624dd 100755
--- a/components/picklist/PickList.vue
+++ b/components/picklist/PickList.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <div class="p-picklist-buttons p-picklist-source-controls" v-if="showSourceControls">
+        <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
             <slot name="sourcecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
@@ -9,14 +9,22 @@
             <slot name="sourcecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-            <div class="p-picklist-header" v-if="$slots.sourceheader">
+            <div v-if="$slots.sourceheader" class="p-picklist-header">
                 <slot name="sourceheader"></slot>
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
-                        @click="onItemClick($event, item, 0)" @dblclick="onItemDblClick($event, item, 0)" @keydown="onItemKeyDown($event, item, 0)" @touchend="onItemTouchEnd" 
-                        role="option" :aria-selected="isSelected(item, 0)">
+                    <li
+                        v-ripple
+                        tabindex="0"
+                        :class="['p-picklist-item', { 'p-highlight': isSelected(item, 0) }]"
+                        @click="onItemClick($event, item, 0)"
+                        @dblclick="onItemDblClick($event, item, 0)"
+                        @keydown="onItemKeyDown($event, item, 0)"
+                        @touchend="onItemTouchEnd"
+                        role="option"
+                        :aria-selected="isSelected(item, 0)"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
@@ -31,20 +39,28 @@
             <slot name="movecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-            <div class="p-picklist-header" v-if="$slots.targetheader">
+            <div v-if="$slots.targetheader" class="p-picklist-header">
                 <slot name="targetheader"></slot>
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
-                        @click="onItemClick($event, item, 1)" @dblclick="onItemDblClick($event, item, 1)" @keydown="onItemKeyDown($event, item, 1)" @touchend="onItemTouchEnd" 
-                        role="option" :aria-selected="isSelected(item, 1)">
+                    <li
+                        v-ripple
+                        tabindex="0"
+                        :class="['p-picklist-item', { 'p-highlight': isSelected(item, 1) }]"
+                        @click="onItemClick($event, item, 1)"
+                        @dblclick="onItemDblClick($event, item, 1)"
+                        @keydown="onItemKeyDown($event, item, 1)"
+                        @touchend="onItemTouchEnd"
+                        role="option"
+                        :aria-selected="isSelected(item, 1)"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
             </transition-group>
         </div>
-        <div class="p-picklist-buttons p-picklist-target-controls" v-if="showTargetControls">
+        <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
             <slot name="targetcontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
@@ -57,7 +73,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -66,11 +82,11 @@ export default {
     props: {
         modelValue: {
             type: Array,
-            default: () => [[],[]]
+            default: () => [[], []]
         },
         selection: {
             type: Array,
-            default: () => [[],[]]
+            default: () => [[], []]
         },
         dataKey: {
             type: String,
@@ -111,6 +127,11 @@ export default {
     data() {
         return {
             d_selection: this.selection
+        };
+    },
+    watch: {
+        selection(newValue) {
+            this.d_selection = newValue;
         }
     },
     updated() {
@@ -128,14 +149,9 @@ export default {
             this.createStyle();
         }
     },
-    watch: {
-        selection(newValue) {
-            this.d_selection = newValue;
-        }
-    },
     methods: {
         getItemKey(item, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
         isSelected(item, listIndex) {
             return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
@@ -152,15 +168,16 @@ export default {
                     if (selectedItemIndex !== 0) {
                         let movedItem = valueList[selectedItemIndex];
                         let temp = valueList[selectedItemIndex - 1];
+
                         valueList[selectedItemIndex - 1] = movedItem;
                         valueList[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'up';
@@ -174,7 +191,7 @@ export default {
             }
         },
         moveTop(event, listIndex) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let valueList = [...this.modelValue[listIndex]];
                 let selectionList = this.d_selection[listIndex];
 
@@ -184,14 +201,15 @@ export default {
 
                     if (selectedItemIndex !== 0) {
                         let movedItem = valueList.splice(selectedItemIndex, 1)[0];
+
                         valueList.unshift(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'top';
@@ -205,7 +223,7 @@ export default {
             }
         },
         moveDown(event, listIndex) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let valueList = [...this.modelValue[listIndex]];
                 let selectionList = this.d_selection[listIndex];
 
@@ -213,18 +231,19 @@ export default {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
 
-                    if (selectedItemIndex !== (valueList.length - 1)) {
+                    if (selectedItemIndex !== valueList.length - 1) {
                         let movedItem = valueList[selectedItemIndex];
                         let temp = valueList[selectedItemIndex + 1];
+
                         valueList[selectedItemIndex + 1] = movedItem;
                         valueList[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'down';
@@ -246,16 +265,17 @@ export default {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
 
-                    if (selectedItemIndex !== (valueList.length - 1)) {
+                    if (selectedItemIndex !== valueList.length - 1) {
                         let movedItem = valueList.splice(selectedItemIndex, 1)[0];
+
                         valueList.push(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'bottom';
@@ -278,11 +298,12 @@ export default {
                     let selectedItem = selection[i];
 
                     if (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
-                        targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList),1)[0]);
+                        targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]);
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -314,6 +335,7 @@ export default {
                 sourceList = [];
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -336,11 +358,12 @@ export default {
                     let selectedItem = selection[i];
 
                     if (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
-                        sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList),1)[0]);
+                        sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]);
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -372,6 +395,7 @@ export default {
                 targetList = [];
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -388,46 +412,42 @@ export default {
             this.itemTouched = false;
             const selectionList = this.d_selection[listIndex];
             const selectedIndex = ObjectUtils.findIndexInList(item, selectionList);
-            const selected = (selectedIndex != -1);
+            const selected = selectedIndex != -1;
             const metaSelection = this.itemTouched ? false : this.metaKeySelection;
             let _selection;
 
             if (metaSelection) {
-                let metaKey = (event.metaKey || event.ctrlKey);
+                let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected && metaKey) {
                     _selection = selectionList.filter((val, index) => index !== selectedIndex);
-                }
-                else {
-                    _selection = (metaKey) ? selectionList ? [...selectionList] : [] : [];
+                } else {
+                    _selection = metaKey ? (selectionList ? [...selectionList] : []) : [];
                     _selection.push(item);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
                     _selection = selectionList.filter((val, index) => index !== selectedIndex);
-                }
-                else {
+                } else {
                     _selection = selectionList ? [...selectionList] : [];
                     _selection.push(item);
                 }
             }
 
             let newSelection = [...this.d_selection];
+
             newSelection[listIndex] = _selection;
             this.d_selection = newSelection;
 
             this.$emit('update:selection', this.d_selection);
             this.$emit('selection-change', {
-                originalEvent:event,
+                originalEvent: event,
                 value: this.d_selection
             });
         },
         onItemDblClick(event, item, listIndex) {
-            if (listIndex === 0)
-                this.moveToTarget(event);
-            else if (listIndex === 1)
-                this.moveToSource(event);
+            if (listIndex === 0) this.moveToTarget(event);
+            else if (listIndex === 1) this.moveToSource(event);
         },
         onItemTouchEnd() {
             this.itemTouched = true;
@@ -435,85 +455,83 @@ export default {
         onItemKeyDown(event, item, listIndex) {
             let listItem = event.currentTarget;
 
-            switch(event.which) {
+            switch (event.which) {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //enter
                 case 13:
                     this.onItemClick(event, item, listIndex);
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         updateListScroll(listElement) {
             const listItems = DomHandler.find(listElement, '.p-picklist-item.p-highlight');
 
             if (listItems && listItems.length) {
-                switch(this.reorderDirection) {
+                switch (this.reorderDirection) {
                     case 'up':
                         DomHandler.scrollInView(listElement, listItems[0]);
-                    break;
+                        break;
 
                     case 'top':
                         listElement.scrollTop = 0;
-                    break;
+                        break;
 
                     case 'down':
                         DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
-                    break;
+                        break;
 
                     case 'bottom':
                         listElement.scrollTop = listElement.scrollHeight;
-                    break;
+                        break;
 
                     default:
-                    break;
+                        break;
                 }
             }
         },
         createStyle() {
-			if (!this.styleElement) {
+            if (!this.styleElement) {
                 this.$el.setAttribute(this.attributeSelector, '');
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -554,8 +572,8 @@ export default {
 `;
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -565,9 +583,12 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-picklist p-component', {
-                'p-picklist-striped': this.stripedRows
-            }];
+            return [
+                'p-picklist p-component',
+                {
+                    'p-picklist-striped': this.stripedRows
+                }
+            ];
         },
         sourceList() {
             return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
@@ -580,12 +601,12 @@ export default {
         }
     },
     components: {
-        'PLButton': Button
+        PLButton: Button
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/portal/Portal.d.ts b/components/portal/Portal.d.ts
index 97474d380..792f358a4 100644
--- a/components/portal/Portal.d.ts
+++ b/components/portal/Portal.d.ts
@@ -23,13 +23,13 @@ export interface PortalSlots {
     default: () => VNode[];
 }
 
-export declare type PortalEmits = { }
+export declare type PortalEmits = {};
 
-declare class Portal extends ClassComponent<PortalProps, PortalSlots, PortalEmits> { }
+declare class Portal extends ClassComponent<PortalProps, PortalSlots, PortalEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Portal: GlobalComponentConstructor<Portal>
+        Portal: GlobalComponentConstructor<Portal>;
     }
 }
 
diff --git a/components/portal/Portal.vue b/components/portal/Portal.vue
index 395bbd571..c1af3372e 100644
--- a/components/portal/Portal.vue
+++ b/components/portal/Portal.vue
@@ -27,7 +27,7 @@ export default {
     data() {
         return {
             mounted: false
-        }
+        };
     },
     mounted() {
         this.mounted = DomHandler.isClient();
@@ -37,5 +37,5 @@ export default {
             return this.disabled || this.appendTo === 'self';
         }
     }
-}
+};
 </script>
diff --git a/components/progressbar/ProgressBar.d.ts b/components/progressbar/ProgressBar.d.ts
index 8caa99df8..cc558b89e 100755
--- a/components/progressbar/ProgressBar.d.ts
+++ b/components/progressbar/ProgressBar.d.ts
@@ -28,14 +28,13 @@ export interface ProgressBarSlots {
     default: () => VNode[];
 }
 
-export declare type ProgressBarEmits = {
-}
+export declare type ProgressBarEmits = {};
 
-declare class ProgressBar extends ClassComponent<ProgressBarProps, ProgressBarSlots, ProgressBarEmits> { }
+declare class ProgressBar extends ClassComponent<ProgressBarProps, ProgressBarSlots, ProgressBarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ProgressBar: GlobalComponentConstructor<ProgressBar>
+        ProgressBar: GlobalComponentConstructor<ProgressBar>;
     }
 }
 
@@ -45,7 +44,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ProgressBar](https://www.primefaces.org/primevue/showcase/#/progressbar)
+ * - [ProgressBar](https://www.primefaces.org/primevue/progressbar)
  *
  */
 export default ProgressBar;
diff --git a/components/progressbar/ProgressBar.spec.js b/components/progressbar/ProgressBar.spec.js
index 6825e07b9..c7f14bc56 100644
--- a/components/progressbar/ProgressBar.spec.js
+++ b/components/progressbar/ProgressBar.spec.js
@@ -32,8 +32,8 @@ describe('ProgressBar.vue', () => {
     });
 
     it('should be indeterminated', async () => {
-        await wrapper.setProps({ mode: 'indeterminate'});
+        await wrapper.setProps({ mode: 'indeterminate' });
 
         expect(wrapper.find('.p-progressbar-indeterminate-container').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/progressbar/ProgressBar.vue b/components/progressbar/ProgressBar.vue
index 22ded083e..fd5beacb4 100755
--- a/components/progressbar/ProgressBar.vue
+++ b/components/progressbar/ProgressBar.vue
@@ -1,9 +1,9 @@
 <template>
     <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
         <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
-          <div v-if="(value != null && value !== 0) && showValue" class="p-progressbar-label">
-              <slot>{{value + '%'}}</slot>
-          </div>
+            <div v-if="value != null && value !== 0 && showValue" class="p-progressbar-label">
+                <slot>{{ value + '%' }}</slot>
+            </div>
         </div>
         <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
             <div class="p-progressbar-value p-progressbar-value-animate"></div>
@@ -51,7 +51,7 @@ export default {
             return this.mode === 'determinate';
         }
     }
-}
+};
 </script>
 
 <style>
@@ -81,15 +81,15 @@ export default {
 }
 
 .p-progressbar-indeterminate .p-progressbar-value::before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-              animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
 .p-progressbar-indeterminate .p-progressbar-value::after {
@@ -101,54 +101,66 @@ export default {
     bottom: 0;
     will-change: left, right;
     -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
     -webkit-animation-delay: 1.15s;
-            animation-delay: 1.15s;
+    animation-delay: 1.15s;
 }
 
 @-webkit-keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
 }
 @keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
 }
 
 @-webkit-keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
 }
 @keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
 }
 </style>
diff --git a/components/progressspinner/ProgressSpinner.d.ts b/components/progressspinner/ProgressSpinner.d.ts
index 33619dead..04de3155f 100755
--- a/components/progressspinner/ProgressSpinner.d.ts
+++ b/components/progressspinner/ProgressSpinner.d.ts
@@ -18,17 +18,15 @@ export interface ProgressSpinnerProps {
     animationDuration?: string | undefined;
 }
 
-export interface ProgressSpinnerSlots {
-}
+export interface ProgressSpinnerSlots {}
 
-export declare type ProgressSpinnerEmits = {
-}
+export declare type ProgressSpinnerEmits = {};
 
-declare class ProgressSpinner extends ClassComponent<ProgressSpinnerProps, ProgressSpinnerSlots, ProgressSpinnerEmits> { }
+declare class ProgressSpinner extends ClassComponent<ProgressSpinnerProps, ProgressSpinnerSlots, ProgressSpinnerEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ProgressSpinner: GlobalComponentConstructor<ProgressSpinner>
+        ProgressSpinner: GlobalComponentConstructor<ProgressSpinner>;
     }
 }
 
@@ -38,7 +36,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ProgressSpinner](https://www.primefaces.org/primevue/showcase/#/progressspinner)
+ * - [ProgressSpinner](https://www.primefaces.org/primevue/progressspinner)
  *
  */
 export default ProgressSpinner;
diff --git a/components/progressspinner/ProgressSpinner.spec.js b/components/progressspinner/ProgressSpinner.spec.js
index d1824aef6..e71c6608f 100644
--- a/components/progressspinner/ProgressSpinner.spec.js
+++ b/components/progressspinner/ProgressSpinner.spec.js
@@ -21,4 +21,4 @@ describe('ProgressSpinner.vue', () => {
         expect(wrapper.find('circle.p-progress-spinner-circle').attributes().fill).toBe('green');
         expect(wrapper.find('circle.p-progress-spinner-circle').attributes().strokeMiterlimit).toBe('10');
     });
-});
\ No newline at end of file
+});
diff --git a/components/progressspinner/ProgressSpinner.vue b/components/progressspinner/ProgressSpinner.vue
index d79a2a2ef..2b81a003c 100755
--- a/components/progressspinner/ProgressSpinner.vue
+++ b/components/progressspinner/ProgressSpinner.vue
@@ -30,7 +30,7 @@ export default {
             };
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/radiobutton/RadioButton.d.ts b/components/radiobutton/RadioButton.d.ts
index ba613d01e..7ce9e1ad2 100755
--- a/components/radiobutton/RadioButton.d.ts
+++ b/components/radiobutton/RadioButton.d.ts
@@ -44,8 +44,7 @@ export interface RadioButtonProps {
     'aria-label'?: string | undefined;
 }
 
-export interface RadioButtonSlots {
-}
+export interface RadioButtonSlots {}
 
 export declare type RadioButtonEmits = {
     /**
@@ -57,19 +56,19 @@ export declare type RadioButtonEmits = {
      * Callback to invoke on radio button click.
      * @param {Event} event - Browser event.
      */
-    'click': (event: Event) => void;
+    click: (event: Event) => void;
     /**
      * Callback to invoke on radio button value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
-}
+    change: (event: Event) => void;
+};
 
-declare class RadioButton extends ClassComponent<RadioButtonProps, RadioButtonSlots, RadioButtonEmits> { }
+declare class RadioButton extends ClassComponent<RadioButtonProps, RadioButtonSlots, RadioButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        RadioButton: GlobalComponentConstructor<RadioButton>
+        RadioButton: GlobalComponentConstructor<RadioButton>;
     }
 }
 
@@ -79,7 +78,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [RadioButton](https://www.primefaces.org/primevue/showcase/#/radiobutton)
+ * - [RadioButton](https://www.primefaces.org/primevue/radiobutton)
  *
  */
 export default RadioButton;
diff --git a/components/radiobutton/RadioButton.spec.js b/components/radiobutton/RadioButton.spec.js
index c85106696..10fd792ae 100644
--- a/components/radiobutton/RadioButton.spec.js
+++ b/components/radiobutton/RadioButton.spec.js
@@ -26,9 +26,9 @@ describe('RadioButton.vue', () => {
     });
 
     it('should checked', async () => {
-        await wrapper.setProps({ modelValue: 'Tatooine'});
+        await wrapper.setProps({ modelValue: 'Tatooine' });
 
         expect(wrapper.vm.checked).toBe(true);
         expect(wrapper.find('.p-radiobutton').classes()).toContain('p-radiobutton-checked');
     });
-});
\ No newline at end of file
+});
diff --git a/components/radiobutton/RadioButton.vue b/components/radiobutton/RadioButton.vue
index dddf5a4db..d3e590443 100755
--- a/components/radiobutton/RadioButton.vue
+++ b/components/radiobutton/RadioButton.vue
@@ -1,23 +1,37 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :id="inputId" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus" @blur="onBlur" v-bind="inputProps">
+            <input
+                ref="input"
+                :id="inputId"
+                type="radio"
+                :class="inputClass"
+                :style="inputStyle"
+                :name="name"
+                :checked="checked"
+                :disabled="disabled"
+                :value="value"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus"
+                @blur="onBlur"
+                v-bind="inputProps"
+            />
         </div>
-        <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
+        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
             <div class="p-radiobutton-icon"></div>
         </div>
     </div>
 </template>
 
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'RadioButton',
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
-		value: null,
+        value: null,
         modelValue: null,
         name: {
             type: String,
@@ -27,13 +41,25 @@ export default {
             type: Boolean,
             default: false
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -72,12 +98,14 @@ export default {
         },
         containerClass() {
             return [
-                'p-radiobutton p-component', {
+                'p-radiobutton p-component',
+                {
                     'p-radiobutton-checked': this.checked,
                     'p-radiobutton-disabled': this.disabled,
                     'p-radiobutton-focused': this.focused
-                }];
+                }
+            ];
         }
     }
-}
+};
 </script>
diff --git a/components/rating/Rating.d.ts b/components/rating/Rating.d.ts
index 46fccd4eb..f6108e35d 100755
--- a/components/rating/Rating.d.ts
+++ b/components/rating/Rating.d.ts
@@ -38,9 +38,48 @@ export interface RatingProps {
      * Default value is true.
      */
     cancel?: boolean | undefined;
+    /**
+     * Icon for the on state.
+     * Default value is pi pi-star.
+     */
+    onIcon?: string | undefined;
+    /**
+     * Icon for the off state.
+     * Default value is pi pi-star-fill.
+     */
+    offIcon?: string | undefined;
+    /**
+     * Icon for the cancelable state.
+     * Default value is pi pi-ban.
+     */
+    cancelIcon?: string | undefined;
 }
 
 export interface RatingSlots {
+    /**
+     * Custom cancel icon template.
+     */
+    cancelicon: () => VNode[];
+    /**
+     * Custom on icon template.
+     * @param {Object} scope - on icon slot's params.
+     */
+    onicon: (scope: {
+        /**
+         * Item value
+         */
+        value: number;
+    }) => VNode[];
+    /**
+     * Custom off icon template.
+     * @param {Object} scope - off icon slot's params.
+     */
+    officon: (scope: {
+        /**
+         * Item value
+         */
+        value: number;
+    }) => VNode[];
 }
 
 export declare type RatingEmits = {
@@ -53,14 +92,24 @@ export declare type RatingEmits = {
      * Callback to invoke when a suggestion is selected.
      * @param {RatingChangeEvent} event - Custom change event.
      */
-    'change': (event: RatingChangeEvent) => void;
-}
+    change: (event: RatingChangeEvent) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus: (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur: (event: Event) => void;
+};
 
-declare class Rating extends ClassComponent<RatingProps, RatingSlots, RatingEmits> { }
+declare class Rating extends ClassComponent<RatingProps, RatingSlots, RatingEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Rating: GlobalComponentConstructor<Rating>
+        Rating: GlobalComponentConstructor<Rating>;
     }
 }
 
@@ -70,7 +119,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Rating](https://www.primefaces.org/primevue/showcase/#/rating)
+ * - [Rating](https://www.primefaces.org/primevue/rating)
  *
  */
 export default Rating;
diff --git a/components/rating/Rating.spec.js b/components/rating/Rating.spec.js
index d2b8a4586..0402ded00 100644
--- a/components/rating/Rating.spec.js
+++ b/components/rating/Rating.spec.js
@@ -1,6 +1,17 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Rating from './Rating.vue';
 
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    stars: '5'
+                }
+            }
+        }
+    }
+};
 describe('Rating.vue', () => {
     let wrapper;
 
@@ -17,24 +28,14 @@ describe('Rating.vue', () => {
         await wrapper.vm.updateModel({}, 5);
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([5]);
-        expect(wrapper.emitted()['change'][0]).toEqual([{originalEvent: {}, value: 5}]);
+        expect(wrapper.emitted()['change'][0]).toEqual([{ originalEvent: {}, value: 5 }]);
     });
 
-    it('should click', async () => {
-        await wrapper.vm.onStarClick({}, 1);
+    it('when onBlur method triggered blur emitted with parameter', async () => {
+        await wrapper.vm.onBlur(true);
 
-        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([1]);
-
-        await wrapper.setProps({ modelValue: 1 });
-
-        expect(wrapper.findAll('.p-rating-icon')[1].classes()).toContain('pi-star-fill');
-        expect(wrapper.findAll('.p-rating-icon')[2].classes()).not.toContain('pi-star-fill');
-    });
-
-    it('should cancel', async () => {
-        await wrapper.vm.onCancelClick({});
-
-        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null]);
+        expect(wrapper.vm.focusedOptionIndex).toEqual(-1);
+        expect(wrapper.emitted()['blur'][0]).toEqual([true]);
     });
 
     it('should not cancel', async () => {
@@ -42,4 +43,4 @@ describe('Rating.vue', () => {
 
         expect(wrapper.find('.p-rating-cancel').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/rating/Rating.vue b/components/rating/Rating.vue
index 871b190ef..957578b3f 100755
--- a/components/rating/Rating.vue
+++ b/components/rating/Rating.vue
@@ -1,21 +1,43 @@
 <template>
     <div :class="containerClass">
-        <span :class="['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': focusIndex === 0}]" v-if="cancel" @click="onCancelClick" @keydown="onKeyDown">
-            <span class="p-hidden-accessible" v-if="cancel">
-                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="$primevue.config.locale.clear" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)">
+        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)">
+            <span class="p-hidden-accessible">
+                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
             </span>
-        </span>
-        <template :key="i" v-for="i in stars">
-            <span :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue), 'p-focus': i === focusIndex}]" @click="onStarClick($event,i)">
+            <slot name="cancelicon">
+                <span :class="cancelIconClass" />
+            </slot>
+        </div>
+        <template v-for="value in stars" :key="value">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)">
                 <span class="p-hidden-accessible">
-                    <input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event,i)">
+                    <input
+                        type="radio"
+                        :value="value"
+                        :name="name"
+                        :checked="modelValue === value"
+                        :disabled="disabled"
+                        :readonly="readonly"
+                        :aria-label="starAriaLabel(value)"
+                        @focus="onFocus($event, value)"
+                        @blur="onBlur"
+                        @change="onChange($event, value)"
+                    />
                 </span>
-            </span>
+                <slot v-if="value <= modelValue" name="onicon" :value="value">
+                    <span :class="onIconClass" />
+                </slot>
+                <slot v-else name="officon" :value="value">
+                    <span :class="offIconClass" />
+                </slot>
+            </div>
         </template>
     </div>
 </template>
 
 <script>
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
+
 export default {
     name: 'Rating',
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
@@ -24,15 +46,11 @@ export default {
             type: Number,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
-		disabled: {
+        disabled: {
             type: Boolean,
             default: false
         },
-		readonly: {
+        readonly: {
             type: Boolean,
             default: false
         },
@@ -43,62 +61,58 @@ export default {
         cancel: {
             type: Boolean,
             default: true
+        },
+        onIcon: {
+            type: String,
+            default: 'pi pi-star-fill'
+        },
+        offIcon: {
+            type: String,
+            default: 'pi pi-star'
+        },
+        cancelIcon: {
+            type: String,
+            default: 'pi pi-ban'
         }
     },
     data() {
         return {
-            focusIndex: null
+            focusedOptionIndex: -1
         };
     },
     methods: {
-        onStarClick(event, value) {
+        onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
-                this.updateModel(event, value);
-                this.focusIndex = value;
-            }
-        },
-        onKeyDown(event, value) {
-            if (event.code === 'Space') {
-                this.updateModel(event, value);
-            }
-            if (event.code === 'Tab') {
-                this.focusIndex = null;
-            }
-        },
-        onFocus(event, index) {
-            if (!this.readonly) {
-                if (this.modelValue === null && this.focusIndex === null) {
-                    this.cancel ? this.focusIndex = 0 : this.focusIndex = 1;
-                }
-                else if (this.modelValue !== null && this.focusIndex === null) {
-                    this.focusIndex = this.modelValue;
-                    this.updateModel(event, this.modelValue);
-                }
-                else {
-                    this.focusIndex = index;
-                    this.updateModel(event, index);
-                }
+                this.onOptionSelect(event, value);
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
 
-                this.$emit('focus', event);
+                firstFocusableEl && DomHandler.focus(firstFocusableEl);
             }
         },
+        onFocus(event, value) {
+            this.focusedOptionIndex = value;
+            this.$emit('focus', event);
+        },
         onBlur(event) {
+            this.focusedOptionIndex = -1;
             this.$emit('blur', event);
         },
-        onCancelClick(event) {
-            if (!this.readonly && !this.disabled) {
-                this.updateModel(event, null);
-            }
+        onChange(event, value) {
+            this.onOptionSelect(event, value);
+        },
+        onOptionSelect(event, value) {
+            this.focusedOptionIndex = value;
+            this.updateModel(event, value || null);
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
-            this.$emit('change', {
-                originalEvent: event,
-                value: value
-            });
+            this.$emit('change', { originalEvent: event, value });
         },
-        ariaLabelTemplate(index) {
-            return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
+        cancelAriaLabel() {
+            return this.$primevue.config.locale.clear;
+        },
+        starAriaLabel(value) {
+            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
         }
     },
     computed: {
@@ -110,24 +124,36 @@ export default {
                     'p-disabled': this.disabled
                 }
             ];
+        },
+        cancelIconClass() {
+            return ['p-rating-icon p-rating-cancel', this.cancelIcon];
+        },
+        onIconClass() {
+            return ['p-rating-icon', this.onIcon];
+        },
+        offIconClass() {
+            return ['p-rating-icon', this.offIcon];
+        },
+        name() {
+            return this.$attrs.name || UniqueComponentId();
         }
     }
-}
+};
 </script>
 
 <style>
-.p-rating-icon {
+.p-rating {
+    display: flex;
+    align-items: center;
+}
+
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
     cursor: pointer;
 }
 
-.p-rating.p-rating-readonly .p-rating-icon {
+.p-rating.p-readonly .p-rating-item {
     cursor: default;
 }
-
-.p-rating:not(.p-disabled) .p-rating-icon.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #BFDBFE;
-    border-color: #3B82F6;
-}
 </style>
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 0a582a079..9ee7dc629 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -1,4 +1,4 @@
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 function bindEvents(el) {
     el.addEventListener('mousedown', onMouseDown);
@@ -10,8 +10,9 @@ function unbindEvents(el) {
 
 function create(el) {
     let ink = document.createElement('span');
+
     ink.className = 'p-ink';
-    ink.setAttribute("role", "presentation");
+    ink.setAttribute('role', 'presentation');
     el.appendChild(ink);
 
     ink.addEventListener('animationend', onAnimationEnd);
@@ -19,6 +20,7 @@ function create(el) {
 
 function remove(el) {
     let ink = getInk(el);
+
     if (ink) {
         unbindEvents(el);
         ink.removeEventListener('animationend', onAnimationEnd);
@@ -29,13 +31,16 @@ function remove(el) {
 function onMouseDown(event) {
     let target = event.currentTarget;
     let ink = getInk(target);
+
     if (!ink || getComputedStyle(ink, null).display === 'none') {
         return;
     }
 
     DomHandler.removeClass(ink, 'p-ink-active');
+
     if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
         let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
+
         ink.style.height = d + 'px';
         ink.style.width = d + 'px';
     }
@@ -59,6 +64,7 @@ function getInk(el) {
             return el.children[i];
         }
     }
+
     return null;
 }
 
@@ -74,4 +80,4 @@ const Ripple = {
     }
 };
 
-export default Ripple;
\ No newline at end of file
+export default Ripple;
diff --git a/components/ripple/Ripple.spec.js b/components/ripple/Ripple.spec.js
index f3a9b220a..0a3d62c10 100644
--- a/components/ripple/Ripple.spec.js
+++ b/components/ripple/Ripple.spec.js
@@ -7,11 +7,11 @@ config.global.mocks = {
             ripple: true
         }
     }
-}
+};
 
 config.global.directives = {
     Ripple
-}
+};
 
 describe('Ripple', () => {
     it('should exist', async () => {
@@ -29,4 +29,4 @@ describe('Ripple', () => {
 
         expect(wrapper.find('.p-ink').classes()).toContain('p-ink-active');
     });
-});
\ No newline at end of file
+});
diff --git a/components/row/Row.d.ts b/components/row/Row.d.ts
index e087072d4..a932cb644 100755
--- a/components/row/Row.d.ts
+++ b/components/row/Row.d.ts
@@ -1,19 +1,16 @@
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface RowProps {
-}
+export interface RowProps {}
 
-export interface RowSlots {
-}
+export interface RowSlots {}
 
-export declare type RowEmits = {
-}
+export declare type RowEmits = {};
 
-declare class Row extends ClassComponent<RowProps, RowSlots, RowEmits> { }
+declare class Row extends ClassComponent<RowProps, RowSlots, RowEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Row: GlobalComponentConstructor<Row>
+        Row: GlobalComponentConstructor<Row>;
     }
 }
 
@@ -23,7 +20,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable/colgroup)
+ * - [DataTable](https://www.primefaces.org/primevue/datatable/colgroup)
  *
  */
 export default Row;
diff --git a/components/row/Row.vue b/components/row/Row.vue
index 2d9a1a917..5eafa33e9 100755
--- a/components/row/Row.vue
+++ b/components/row/Row.vue
@@ -4,5 +4,5 @@ export default {
     render() {
         return null;
     }
-}
+};
 </script>
diff --git a/components/scrollpanel/ScrollPanel.d.ts b/components/scrollpanel/ScrollPanel.d.ts
index 8e532ca90..4bda96b59 100644
--- a/components/scrollpanel/ScrollPanel.d.ts
+++ b/components/scrollpanel/ScrollPanel.d.ts
@@ -2,6 +2,11 @@ import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface ScrollPanelProps {
+    /**
+     * Step factor to scroll the content while pressing the arrow keys.
+     * Default value is 5.
+     */
+    step?: number | undefined;
 }
 
 export interface ScrollPanelSlots {
@@ -11,14 +16,13 @@ export interface ScrollPanelSlots {
     default: () => VNode[];
 }
 
-export declare type ScrollPanelEmits = {
-}
+export declare type ScrollPanelEmits = {};
 
-declare class ScrollPanel extends ClassComponent<ScrollPanelProps, ScrollPanelSlots, ScrollPanelEmits> { }
+declare class ScrollPanel extends ClassComponent<ScrollPanelProps, ScrollPanelSlots, ScrollPanelEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ScrollPanel: GlobalComponentConstructor<ScrollPanel>
+        ScrollPanel: GlobalComponentConstructor<ScrollPanel>;
     }
 }
 
@@ -28,7 +32,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ScrollPanel](https://www.primefaces.org/primevue/showcase/#/scrollpanel)
+ * - [ScrollPanel](https://www.primefaces.org/primevue/scrollpanel)
  *
  */
 export default ScrollPanel;
diff --git a/components/scrollpanel/ScrollPanel.spec.js b/components/scrollpanel/ScrollPanel.spec.js
index b8f174a18..bfa772388 100644
--- a/components/scrollpanel/ScrollPanel.spec.js
+++ b/components/scrollpanel/ScrollPanel.spec.js
@@ -48,4 +48,4 @@ describe('ScrollPanel.vue', () => {
 
         expect(wrapper.find('.p-scrollpanel-bar-x').classes()).toContain('p-scrollpanel-grabbed');
     });
-});
\ No newline at end of file
+});
diff --git a/components/scrollpanel/ScrollPanel.vue b/components/scrollpanel/ScrollPanel.vue
index b59e0b14d..4d9eb25eb 100644
--- a/components/scrollpanel/ScrollPanel.vue
+++ b/components/scrollpanel/ScrollPanel.vue
@@ -1,20 +1,49 @@
 <template>
     <div class="p-scrollpanel p-component">
         <div class="p-scrollpanel-wrapper">
-            <div ref="content" class="p-scrollpanel-content" @scroll="moveBar" @mouseenter="moveBar">
+            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar">
                 <slot></slot>
             </div>
         </div>
-        <div ref="xBar" class="p-scrollpanel-bar p-scrollpanel-bar-x" @mousedown="onXBarMouseDown"></div>
-        <div ref="yBar" class="p-scrollpanel-bar p-scrollpanel-bar-y" @mousedown="onYBarMouseDown"></div>
+        <div
+            ref="xBar"
+            class="p-scrollpanel-bar p-scrollpanel-bar-x"
+            tabindex="0"
+            role="scrollbar"
+            aria-orientation="horizontal"
+            :aria-valuenow="lastScrollLeft"
+            @mousedown="onXBarMouseDown"
+            @keydown="onKeyDown($event)"
+            @keyup="onKeyUp"
+            @focus="onFocus"
+            @blur="onBlur"
+        ></div>
+        <div
+            ref="yBar"
+            class="p-scrollpanel-bar p-scrollpanel-bar-y"
+            tabindex="0"
+            role="scrollbar"
+            aria-orientation="vertical"
+            :aria-valuenow="lastScrollTop"
+            @mousedown="onYBarMouseDown"
+            @keydown="onKeyDown($event)"
+            @keyup="onKeyUp"
+            @focus="onFocus"
+        ></div>
     </div>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
+    props: {
+        step: {
+            type: Number,
+            default: 5
+        }
+    },
     initialized: false,
     documentResizeListener: null,
     documentMouseMoveListener: null,
@@ -26,6 +55,16 @@ export default {
     isYBarClicked: false,
     lastPageX: null,
     lastPageY: null,
+    timer: null,
+    outsideClickListener: null,
+    data() {
+        return {
+            id: UniqueComponentId(),
+            orientation: 'vertical',
+            lastScrollTop: 0,
+            lastScrollLeft: 0
+        };
+    },
     mounted() {
         if (this.$el.offsetParent) {
             this.initialize();
@@ -51,15 +90,15 @@ export default {
         },
         calculateContainerHeight() {
             let containerStyles = getComputedStyle(this.$el),
-            xBarStyles = getComputedStyle(this.$refs.xBar),
-            pureContainerHeight = DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
+                xBarStyles = getComputedStyle(this.$refs.xBar),
+                pureContainerHeight = DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
 
-            if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
-                if(this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
+            if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+                if (this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
                     this.$el.style.height = containerStyles['max-height'];
-                }
-                else {
-                    this.$el.style.height = this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
+                } else {
+                    this.$el.style.height =
+                        this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
                 }
             }
         },
@@ -81,16 +120,14 @@ export default {
             this.frame = this.requestAnimationFrame(() => {
                 if (this.scrollXRatio >= 1) {
                     DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                }
-                else {
+                } else {
                     DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
                     this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
                 }
 
                 if (this.scrollYRatio >= 1) {
                     DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                }
-                else {
+                } else {
                     DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
                     this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
                 }
@@ -98,6 +135,7 @@ export default {
         },
         onYBarMouseDown(e) {
             this.isYBarClicked = true;
+            this.$refs.yBar.focus();
             this.lastPageY = e.pageY;
             DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
             DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
@@ -107,6 +145,7 @@ export default {
         },
         onXBarMouseDown(e) {
             this.isXBarClicked = true;
+            this.$refs.xBar.focus();
             this.lastPageX = e.pageX;
             DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
             DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
@@ -114,20 +153,101 @@ export default {
             this.bindDocumentMouseListeners();
             e.preventDefault();
         },
+        onScroll(event) {
+            if (this.lastScrollLeft !== event.target.scrollLeft) {
+                this.lastScrollLeft = event.target.scrollLeft;
+                this.orientation = 'horizontal';
+            } else if (this.lastScrollTop !== event.target.scrollTop) {
+                this.lastScrollTop = event.target.scrollTop;
+                this.orientation = 'vertical';
+            }
+
+            this.moveBar();
+        },
+        onKeyDown(event) {
+            if (this.orientation === 'vertical') {
+                switch (event.code) {
+                    case 'ArrowDown': {
+                        this.setTimer('scrollTop', this.step);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowUp': {
+                        this.setTimer('scrollTop', this.step * -1);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowLeft':
+
+                    case 'ArrowRight': {
+                        event.preventDefault();
+                        break;
+                    }
+
+                    default:
+                        //no op
+                        break;
+                }
+            } else if (this.orientation === 'horizontal') {
+                switch (event.code) {
+                    case 'ArrowRight': {
+                        this.setTimer('scrollLeft', this.step);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowLeft': {
+                        this.setTimer('scrollLeft', this.step * -1);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowDown':
+
+                    case 'ArrowUp': {
+                        event.preventDefault();
+                        break;
+                    }
+
+                    default:
+                        //no op
+                        break;
+                }
+            }
+        },
+        onKeyUp() {
+            this.clearTimer();
+        },
+        repeat(bar, step) {
+            this.$refs.content[bar] += step;
+            this.moveBar();
+        },
+        setTimer(bar, step) {
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(bar, step);
+            }, 40);
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+        },
         onDocumentMouseMove(e) {
             if (this.isXBarClicked) {
                 this.onMouseMoveForXBar(e);
-            }
-            else if (this.isYBarClicked) {
+            } else if (this.isYBarClicked) {
                 this.onMouseMoveForYBar(e);
-            }
-            else {
+            } else {
                 this.onMouseMoveForXBar(e);
                 this.onMouseMoveForYBar(e);
             }
         },
         onMouseMoveForXBar(e) {
             let deltaX = e.pageX - this.lastPageX;
+
             this.lastPageX = e.pageX;
 
             this.frame = this.requestAnimationFrame(() => {
@@ -136,12 +256,25 @@ export default {
         },
         onMouseMoveForYBar(e) {
             let deltaY = e.pageY - this.lastPageY;
+
             this.lastPageY = e.pageY;
 
             this.frame = this.requestAnimationFrame(() => {
                 this.$refs.content.scrollTop += deltaY / this.scrollYRatio;
             });
         },
+        onFocus(event) {
+            if (this.$refs.xBar.isSameNode(event.target)) {
+                this.orientation = 'horizontal';
+            } else if (this.$refs.yBar.isSameNode(event.target)) {
+                this.orientation = 'vertical';
+            }
+        },
+        onBlur() {
+            if (this.orientation === 'horizontal') {
+                this.orientation = 'vertical';
+            }
+        },
         onDocumentMouseUp() {
             DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
             DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
@@ -153,6 +286,7 @@ export default {
         },
         requestAnimationFrame(f) {
             let frame = window.requestAnimationFrame || this.timeoutFrame;
+
             return frame(f);
         },
         refresh() {
@@ -160,54 +294,58 @@ export default {
         },
         scrollTop(scrollTop) {
             let scrollableHeight = this.$refs.content.scrollHeight - this.$refs.content.clientHeight;
+
             scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
-            this.$refs.contentscrollTop = scrollTop;
+            this.$refs.content.scrollTop = scrollTop;
+        },
+        timeoutFrame(fn) {
+            setTimeout(fn, 0);
         },
         bindDocumentMouseListeners() {
-			if (!this.documentMouseMoveListener) {
-				this.documentMouseMoveListener = (e) => {
-					this.onDocumentMouseMove(e);
-				};
+            if (!this.documentMouseMoveListener) {
+                this.documentMouseMoveListener = (e) => {
+                    this.onDocumentMouseMove(e);
+                };
 
-				document.addEventListener('mousemove', this.documentMouseMoveListener);
+                document.addEventListener('mousemove', this.documentMouseMoveListener);
             }
 
             if (!this.documentMouseUpListener) {
-				this.documentMouseUpListener = (e) => {
-					this.onDocumentMouseUp(e);
-				};
+                this.documentMouseUpListener = (e) => {
+                    this.onDocumentMouseUp(e);
+                };
 
-				document.addEventListener('mouseup', this.documentMouseUpListener);
-			}
-		},
-		unbindDocumentMouseListeners() {
-			if (this.documentMouseMoveListener) {
-				document.removeEventListener('mousemove', this.documentMouseMoveListener);
-				this.documentMouseMoveListener = null;
+                document.addEventListener('mouseup', this.documentMouseUpListener);
+            }
+        },
+        unbindDocumentMouseListeners() {
+            if (this.documentMouseMoveListener) {
+                document.removeEventListener('mousemove', this.documentMouseMoveListener);
+                this.documentMouseMoveListener = null;
             }
 
-            if(this.documentMouseUpListener) {
-				document.removeEventListener('mouseup', this.documentMouseUpListener);
-				this.documentMouseUpListener = null;
-			}
-		},
+            if (this.documentMouseUpListener) {
+                document.removeEventListener('mouseup', this.documentMouseUpListener);
+                this.documentMouseUpListener = null;
+            }
+        },
         bindDocumentResizeListener() {
-			if (!this.documentResizeListener) {
-				this.documentResizeListener = () => {
-					this.moveBar();
-				};
+            if (!this.documentResizeListener) {
+                this.documentResizeListener = () => {
+                    this.moveBar();
+                };
 
-				window.addEventListener('resize', this.documentResizeListener);
-			}
-		},
-		unbindDocumentResizeListener() {
-			if(this.documentResizeListener) {
-				window.removeEventListener('resize', this.documentResizeListener);
-				this.documentResizeListener = null;
-			}
-		}
+                window.addEventListener('resize', this.documentResizeListener);
+            }
+        },
+        unbindDocumentResizeListener() {
+            if (this.documentResizeListener) {
+                window.removeEventListener('resize', this.documentResizeListener);
+                this.documentResizeListener = null;
+            }
+        }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/scrolltop/ScrollTop.d.ts b/components/scrolltop/ScrollTop.d.ts
index 95dd40a4d..a6edd70e1 100644
--- a/components/scrolltop/ScrollTop.d.ts
+++ b/components/scrolltop/ScrollTop.d.ts
@@ -26,17 +26,15 @@ export interface ScrollTopProps {
     behavior?: string | undefined;
 }
 
-export interface ScrollTopSlots {
-}
+export interface ScrollTopSlots {}
 
-export declare type ScrollTopEmits = {
-}
+export declare type ScrollTopEmits = {};
 
-declare class ScrollTop extends ClassComponent<ScrollTopProps, ScrollTopSlots, ScrollTopEmits> { }
+declare class ScrollTop extends ClassComponent<ScrollTopProps, ScrollTopSlots, ScrollTopEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ScrollTop: GlobalComponentConstructor<ScrollTop>
+        ScrollTop: GlobalComponentConstructor<ScrollTop>;
     }
 }
 
@@ -46,7 +44,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ScrollTop](https://www.primefaces.org/primevue/showcase/#/scrolltop)
+ * - [ScrollTop](https://www.primefaces.org/primevue/scrolltop)
  *
  */
 export default ScrollTop;
diff --git a/components/scrolltop/ScrollTop.spec.js b/components/scrolltop/ScrollTop.spec.js
index edd5bc9d0..687f8e7fd 100644
--- a/components/scrolltop/ScrollTop.spec.js
+++ b/components/scrolltop/ScrollTop.spec.js
@@ -8,9 +8,9 @@ describe('ScrollTop.vue', () => {
         wrapper = mount(ScrollTop);
     });
 
-    it('should exist', async() => {
+    it('should exist', async () => {
         await wrapper.setData({ visible: true });
 
         expect(wrapper.find('.p-scrolltop.p-component').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/scrolltop/ScrollTop.vue b/components/scrolltop/ScrollTop.vue
index ab9d8aa05..bcbbee497 100644
--- a/components/scrolltop/ScrollTop.vue
+++ b/components/scrolltop/ScrollTop.vue
@@ -1,23 +1,18 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
-        <button :ref="containerRef" :class="containerClass" v-if="visible" @click="onClick" type="button">
+        <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button">
             <span :class="iconClass"></span>
         </button>
     </transition>
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'ScrollTop',
     scrollListener: null,
     container: null,
-    data() {
-        return {
-            visible: false
-        }
-    },
     props: {
         target: {
             type: String,
@@ -36,17 +31,18 @@ export default {
             default: 'smooth'
         }
     },
+    data() {
+        return {
+            visible: false
+        };
+    },
     mounted() {
-        if (this.target === 'window')
-            this.bindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.bindParentScrollListener();
+        if (this.target === 'window') this.bindDocumentScrollListener();
+        else if (this.target === 'parent') this.bindParentScrollListener();
     },
     beforeUnmount() {
-        if (this.target === 'window')
-            this.unbindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.unbindParentScrollListener();
+        if (this.target === 'window') this.unbindDocumentScrollListener();
+        else if (this.target === 'parent') this.unbindParentScrollListener();
 
         if (this.container) {
             ZIndexUtils.clear(this.container);
@@ -56,16 +52,15 @@ export default {
     methods: {
         onClick() {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
+
             scrollElement.scroll({
                 top: 0,
                 behavior: this.behavior
             });
         },
         checkVisibility(scrollY) {
-            if (scrollY > this.threshold)
-                this.visible = true;
-            else
-                this.visible = false;
+            if (scrollY > this.threshold) this.visible = true;
+            else this.visible = false;
         },
         bindParentScrollListener() {
             this.scrollListener = () => {
@@ -105,13 +100,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-scrolltop p-link p-component', {'p-scrolltop-sticky': this.target !== 'window'}];
+            return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
         iconClass() {
             return ['p-scrolltop-icon', this.icon];
         }
     }
-}
+};
 </script>
 
 <style>
@@ -137,7 +132,7 @@ export default {
 }
 
 .p-scrolltop-enter-active {
-    transition: opacity .15s;
+    transition: opacity 0.15s;
 }
 
 .p-scrolltop.p-scrolltop-leave-to {
@@ -145,6 +140,6 @@ export default {
 }
 
 .p-scrolltop-leave-active {
-    transition: opacity .15s;
+    transition: opacity 0.15s;
 }
 </style>
diff --git a/components/selectbutton/SelectButton.d.ts b/components/selectbutton/SelectButton.d.ts
index 2e8b9c142..810e05a3b 100755
--- a/components/selectbutton/SelectButton.d.ts
+++ b/components/selectbutton/SelectButton.d.ts
@@ -1,11 +1,11 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
+type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
 
-type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
+type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
 
-type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
 
 export interface SelectButtonChangeEvent {
     /**
@@ -58,7 +58,7 @@ export interface SelectButtonProps {
     /**
      * Identifier of the underlying element.
      */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface SelectButtonSlots {
@@ -88,24 +88,24 @@ export declare type SelectButtonEmits = {
      * Callback to invoke on value change.
      * @param {SelectButtonChangeEvent} event - Custom change event.
      */
-    'change': (event: SelectButtonChangeEvent) => void;
+    change: (event: SelectButtonChangeEvent) => void;
     /**
      * Callback to invoke on focus.
      * @param {SelectButtonChangeEvent} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke on blur.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
-}
+    blur: (event: Event) => void;
+};
 
-declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> { }
+declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SelectButton: GlobalComponentConstructor<SelectButton>
+        SelectButton: GlobalComponentConstructor<SelectButton>;
     }
 }
 
@@ -115,7 +115,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [SelectButton](https://www.primefaces.org/primevue/showcase/#/selectbutton)
+ * - [SelectButton](https://www.primefaces.org/primevue/selectbutton)
  *
  */
 export default SelectButton;
diff --git a/components/selectbutton/SelectButton.spec.js b/components/selectbutton/SelectButton.spec.js
index 4a5387a0b..78aa66bb0 100644
--- a/components/selectbutton/SelectButton.spec.js
+++ b/components/selectbutton/SelectButton.spec.js
@@ -25,7 +25,6 @@ describe('SelectButton.vue', () => {
 
         await wrapper.setProps({ modelValue: wrapper.vm.options[0] });
 
-        expect(wrapper.findAll('.p-button.p-component')[0].attributes()['aria-pressed']).toBe('true');
         expect(wrapper.findAll('.p-button.p-component')[0].classes()).toContain('p-highlight');
     });
 });
@@ -38,9 +37,9 @@ describe('multiple select', () => {
             props: {
                 modelValue: null,
                 options: [
-                    {name: 'Option 1', value: 1},
-                    {name: 'Option 2', value: 2},
-                    {name: 'Option 3', value: 3}
+                    { name: 'Option 1', value: 1 },
+                    { name: 'Option 2', value: 2 },
+                    { name: 'Option 3', value: 3 }
                 ],
                 optionLabel: 'name',
                 multiple: true
@@ -53,4 +52,4 @@ describe('multiple select', () => {
 
         expect(wrapper.findAll('.p-highlight').length).toBe(3);
     });
-});
\ No newline at end of file
+});
diff --git a/components/selectbutton/SelectButton.vue b/components/selectbutton/SelectButton.vue
index 8a095423d..a2c9f71f6 100755
--- a/components/selectbutton/SelectButton.vue
+++ b/components/selectbutton/SelectButton.vue
@@ -1,16 +1,29 @@
 <template>
     <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
-        <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :tabindex="i === focusedIndex ? '0' : '-1'" :aria-label="getOptionLabel(option)" :role="multiple ? 'checkbox' : 'radio'" :aria-checked="isSelected(option)" :aria-disabled="optionDisabled"
-            :class="getButtonClass(option, i)" @click="onOptionSelect($event, option, i)" @keydown="onKeydown($event, option, i)" @focus="onFocus($event)" @blur="onBlur($event, option)" v-ripple>
+        <div
+            v-for="(option, i) of options"
+            :key="getOptionRenderKey(option)"
+            v-ripple
+            :tabindex="i === focusedIndex ? '0' : '-1'"
+            :aria-label="getOptionLabel(option)"
+            :role="multiple ? 'checkbox' : 'radio'"
+            :aria-checked="isSelected(option)"
+            :aria-disabled="optionDisabled"
+            :class="getButtonClass(option, i)"
+            @click="onOptionSelect($event, option, i)"
+            @keydown="onKeydown($event, option, i)"
+            @focus="onFocus($event)"
+            @blur="onBlur($event, option)"
+        >
             <slot name="option" :option="option" :index="i">
-                <span class="p-button-label">{{getOptionLabel(option)}}</span>
+                <span class="p-button-label">{{ getOptionLabel(option) }}</span>
             </slot>
         </div>
     </div>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -22,7 +35,7 @@ export default {
         optionLabel: null,
         optionValue: null,
         optionDisabled: null,
-		multiple: Boolean,
+        multiple: Boolean,
         unselectable: {
             type: Boolean,
             default: true
@@ -31,13 +44,13 @@ export default {
         dataKey: null,
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         }
     },
     data() {
         return {
             focusedIndex: 0
-        }
+        };
     },
     mounted() {
         this.defaultTabIndexes();
@@ -71,6 +84,7 @@ export default {
             }
 
             let selected = this.isSelected(option);
+
             if (selected && !this.unselectable) {
                 return;
             }
@@ -79,18 +93,15 @@ export default {
             let newValue;
 
             if (this.multiple) {
-                if (selected)
-                    newValue = this.modelValue.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
-                else
-                    newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
-            }
-            else {
+                if (selected) newValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
+                else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue];
+            } else {
                 newValue = selected ? null : optionValue;
             }
 
             this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
-            this.$emit('change', {event: event, value: newValue});
+            this.$emit('change', { event: event, value: newValue });
         },
         isSelected(option) {
             let selected = false;
@@ -105,8 +116,7 @@ export default {
                         }
                     }
                 }
-            }
-            else {
+            } else {
                 selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
             }
 
@@ -121,6 +131,7 @@ export default {
                 }
 
                 case 'ArrowDown':
+
                 case 'ArrowRight': {
                     this.changeTabIndexes(event, 'next');
                     event.preventDefault();
@@ -128,29 +139,29 @@ export default {
                 }
 
                 case 'ArrowUp':
+
                 case 'ArrowLeft': {
                     this.changeTabIndexes(event, 'prev');
                     event.preventDefault();
                     break;
                 }
-                
+
                 default:
                     //no op
-                break;
+                    break;
             }
         },
         changeTabIndexes(event, direction) {
             let firstTabableChild, index;
+
             for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
-                if (this.$refs.container.children[i].getAttribute('tabindex') === '0')
-                    firstTabableChild = {elem: this.$refs.container.children[i], index: i};
+                if (this.$refs.container.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: this.$refs.container.children[i], index: i };
             }
 
             if (direction === 'prev') {
                 if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
                 else index = firstTabableChild.index - 1;
-            }
-            else {
+            } else {
                 if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
                 else index = firstTabableChild.index + 1;
             }
@@ -165,27 +176,34 @@ export default {
             if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
                 this.defaultTabIndexes();
             }
+
             this.$emit('blur', event, option);
         },
         getButtonClass(option) {
-            return ['p-button p-component', {
-                'p-highlight': this.isSelected(option),
-                'p-disabled': this.isOptionDisabled(option)
-            }];
+            return [
+                'p-button p-component',
+                {
+                    'p-highlight': this.isSelected(option),
+                    'p-disabled': this.isOptionDisabled(option)
+                }
+            ];
         }
     },
-	computed: {
+    computed: {
         containerClass() {
-            return ['p-selectbutton p-buttonset p-component', {
-                'p-disabled': this.disabled
-            }];
+            return [
+                'p-selectbutton p-buttonset p-component',
+                {
+                    'p-disabled': this.disabled
+                }
+            ];
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/sidebar/Sidebar.d.ts b/components/sidebar/Sidebar.d.ts
index 98ab3b586..c27ae76a4 100755
--- a/components/sidebar/Sidebar.d.ts
+++ b/components/sidebar/Sidebar.d.ts
@@ -66,18 +66,18 @@ export declare type SidebarEmits = {
     /**
      * Callback to invoke when sidebar gets shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when sidebar gets hidden.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
-declare class Sidebar extends ClassComponent<SidebarProps, SidebarSlots, SidebarEmits> { }
+declare class Sidebar extends ClassComponent<SidebarProps, SidebarSlots, SidebarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Sidebar: GlobalComponentConstructor<Sidebar>
+        Sidebar: GlobalComponentConstructor<Sidebar>;
     }
 }
 
@@ -87,7 +87,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Sidebar](https://www.primefaces.org/primevue/showcase/#/sidebar)
+ * - [Sidebar](https://www.primefaces.org/primevue/sidebar)
  *
  */
 export default Sidebar;
diff --git a/components/sidebar/Sidebar.spec.js b/components/sidebar/Sidebar.spec.js
index eda571e6f..c224c492f 100644
--- a/components/sidebar/Sidebar.spec.js
+++ b/components/sidebar/Sidebar.spec.js
@@ -51,4 +51,4 @@ describe('Sidebar.vue', () => {
         expect(wrapper.vm.fullScreen).toBe(true);
         expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-full');
     });
-});
\ No newline at end of file
+});
diff --git a/components/sidebar/Sidebar.vue b/components/sidebar/Sidebar.vue
index 3412e489f..9c455a30e 100755
--- a/components/sidebar/Sidebar.vue
+++ b/components/sidebar/Sidebar.vue
@@ -1,12 +1,12 @@
 <template>
     <Portal>
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
-            <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" role="complementary" :aria-modal="modal" v-bind="$attrs">
                 <div class="p-sidebar-header">
-                    <div class="p-sidebar-header-content" v-if="$slots.header">
+                    <div v-if="$slots.header" class="p-sidebar-header-content">
                         <slot name="header"></slot>
                     </div>
-                    <button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
+                    <button v-if="showCloseIcon" v-ripple class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" type="button">
                         <span class="p-sidebar-close-icon pi pi-times" />
                     </button>
                 </div>
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'Sidebar',
-    emits: ['update:visible', 'show', 'hide'],
     inheritAttrs: false,
+    emits: ['update:visible', 'show', 'hide'],
     props: {
         visible: {
             type: Boolean,
@@ -70,6 +70,7 @@ export default {
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
@@ -82,7 +83,9 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
             }
+
             this.focus();
+
             if (this.modal && !this.fullScreen) {
                 this.enableModality();
             }
@@ -101,6 +104,7 @@ export default {
         },
         focus() {
             let focusable = DomHandler.findSingle(this.container, 'input,button');
+
             if (focusable) {
                 focusable.focus();
             }
@@ -110,9 +114,11 @@ export default {
                 this.mask = document.createElement('div');
                 this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
                 this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
+
                 if (this.dismissable) {
                     this.bindMaskClickListener();
                 }
+
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
@@ -130,6 +136,7 @@ export default {
                 this.maskClickListener = () => {
                     this.hide();
                 };
+
                 this.mask.addEventListener('click', this.maskClickListener);
             }
         },
@@ -153,29 +160,32 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-sidebar p-component p-sidebar-' + this.position , {
-                'p-sidebar-active': this.visible,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-sidebar p-component p-sidebar-' + this.position,
+                {
+                    'p-sidebar-active': this.visible,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         fullScreen() {
             return this.position === 'full';
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
 .p-sidebar {
     position: fixed;
-    transition: transform .3s;
+    transition: transform 0.3s;
     display: flex;
     flex-direction: column;
 }
diff --git a/components/skeleton/Skeleton.d.ts b/components/skeleton/Skeleton.d.ts
index 57274a2cf..2a9bb672c 100644
--- a/components/skeleton/Skeleton.d.ts
+++ b/components/skeleton/Skeleton.d.ts
@@ -37,17 +37,15 @@ export interface SkeletonProps {
     animation?: SkeletonAnimationType;
 }
 
-export interface SkeletonSlots {
-}
+export interface SkeletonSlots {}
 
-export declare type SkeletonEmits = {
-}
+export declare type SkeletonEmits = {};
 
-declare class Skeleton extends ClassComponent<SkeletonProps, SkeletonSlots, SkeletonEmits> { }
+declare class Skeleton extends ClassComponent<SkeletonProps, SkeletonSlots, SkeletonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Skeleton: GlobalComponentConstructor<Skeleton>
+        Skeleton: GlobalComponentConstructor<Skeleton>;
     }
 }
 
@@ -57,7 +55,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Skeleton](https://www.primefaces.org/primevue/showcase/#/skeleton)
+ * - [Skeleton](https://www.primefaces.org/primevue/skeleton)
  *
  */
 export default Skeleton;
diff --git a/components/skeleton/Skeleton.spec.js b/components/skeleton/Skeleton.spec.js
index 954a3e461..81eb94b7b 100644
--- a/components/skeleton/Skeleton.spec.js
+++ b/components/skeleton/Skeleton.spec.js
@@ -3,7 +3,7 @@ import Skeleton from './Skeleton.vue';
 
 describe('Skeleton.vue', () => {
     let wrapper;
-    
+
     beforeEach(() => {
         wrapper = mount(Skeleton);
     });
diff --git a/components/skeleton/Skeleton.vue b/components/skeleton/Skeleton.vue
index b60aa2c34..0ec79e267 100644
--- a/components/skeleton/Skeleton.vue
+++ b/components/skeleton/Skeleton.vue
@@ -33,19 +33,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-skeleton p-component', {
-                'p-skeleton-circle': this.shape === 'circle',
-                'p-skeleton-none': this.animation === 'none'
-            }];
+            return [
+                'p-skeleton p-component',
+                {
+                    'p-skeleton-circle': this.shape === 'circle',
+                    'p-skeleton-none': this.animation === 'none'
+                }
+            ];
         },
         containerStyle() {
-            if (this.size)
-                return {width: this.size, height: this.size, borderRadius: this.borderRadius};
-            else
-                return {width: this.width, height: this.height, borderRadius: this.borderRadius};
+            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
+            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
         }
     }
-}
+};
 </script>
 
 <style>
@@ -55,7 +56,7 @@ export default {
 }
 
 .p-skeleton::after {
-    content: "";
+    content: '';
     animation: p-skeleton-animation 1.2s infinite;
     height: 100%;
     left: 0;
@@ -71,7 +72,7 @@ export default {
 }
 
 .p-skeleton-none::after {
-   animation: none;
+    animation: none;
 }
 
 @keyframes p-skeleton-animation {
diff --git a/components/slider/Slider.d.ts b/components/slider/Slider.d.ts
index faa672404..3731ebf8f 100755
--- a/components/slider/Slider.d.ts
+++ b/components/slider/Slider.d.ts
@@ -62,8 +62,7 @@ export interface SliderProps {
     'aria-label'?: string | undefined;
 }
 
-export interface SliderSlots {
-}
+export interface SliderSlots {}
 
 export declare type SliderEmits = {
     /**
@@ -75,19 +74,19 @@ export declare type SliderEmits = {
      * Callback to invoke on value change.
      * @param {number} value - New value
      */
-    'change': (value: number) => void;
+    change: (value: number) => void;
     /**
      * Callback to invoke when slide ends.
      * @param {SliderSlideEndEvent} event - Custom slide end event.
      */
-    'slideend': (event: SliderSlideEndEvent) => void;
-}
+    slideend: (event: SliderSlideEndEvent) => void;
+};
 
-declare class Slider extends ClassComponent<SliderProps, SliderSlots, SliderEmits> { }
+declare class Slider extends ClassComponent<SliderProps, SliderSlots, SliderEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Slider: GlobalComponentConstructor<Slider>
+        Slider: GlobalComponentConstructor<Slider>;
     }
 }
 
@@ -97,7 +96,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Slider](https://www.primefaces.org/primevue/showcase/#/slider)
+ * - [Slider](https://www.primefaces.org/primevue/slider)
  *
  */
 export default Slider;
diff --git a/components/slider/Slider.spec.js b/components/slider/Slider.spec.js
index fdb600a4e..67c8a5a71 100644
--- a/components/slider/Slider.spec.js
+++ b/components/slider/Slider.spec.js
@@ -32,7 +32,7 @@ describe('Slider.vue', () => {
 
         await wrapper.vm.updateDomData();
 
-        await wrapper.vm.setValue({ pageX: 60 }); // TODO: 
+        await wrapper.vm.setValue({ pageX: 60 }); // TODO:
 
         expect(wrapper.emitted()['update:modelValue'][0][0]).toBeGreaterThan(0);
     });
@@ -44,6 +44,6 @@ describe('Slider.vue', () => {
 
         await wrapper.vm.setValue({ pageY: 111 }); // TODO:
 
-        expect(wrapper.emitted()['update:modelValue'][0][0]).toBeGreaterThan(0);
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(0);
     });
-});
\ No newline at end of file
+});
diff --git a/components/slider/Slider.vue b/components/slider/Slider.vue
index 613d00908..0cc3d5961 100755
--- a/components/slider/Slider.vue
+++ b/components/slider/Slider.vue
@@ -1,46 +1,94 @@
 <template>
     <div :class="containerClass" @click="onBarClick">
         <span class="p-slider-range" :style="rangeStyle"></span>
-        <span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event, 0)" :tabindex="tabindex"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
+        <span
+            v-if="!range"
+            class="p-slider-handle"
+            :style="handleStyle"
+            @touchstart="onDragStart($event)"
+            @touchmove="onDrag($event)"
+            @touchend="onDragEnd($event)"
+            @mousedown="onMouseDown($event)"
+            @keydown="onKeyDown($event)"
+            :tabindex="tabindex"
+            role="slider"
+            :aria-valuemin="min"
+            :aria-valuenow="modelValue"
+            :aria-valuemax="max"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-orientation="orientation"
+        ></span>
+        <span
+            v-if="range"
+            class="p-slider-handle"
+            :style="rangeStartHandleStyle"
+            @touchstart="onDragStart($event, 0)"
+            @touchmove="onDrag($event)"
+            @touchend="onDragEnd($event)"
+            @mousedown="onMouseDown($event, 0)"
+            @keydown="onKeyDown($event, 0)"
+            :tabindex="tabindex"
+            role="slider"
+            :aria-valuemin="min"
+            :aria-valuenow="modelValue ? modelValue[0] : null"
+            :aria-valuemax="max"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-orientation="orientation"
+        ></span>
+        <span
+            v-if="range"
+            class="p-slider-handle"
+            :style="rangeEndHandleStyle"
+            @touchstart="onDragStart($event, 1)"
+            @touchmove="onDrag($event)"
+            @touchend="onDragEnd($event)"
+            @mousedown="onMouseDown($event, 1)"
+            @keydown="onKeyDown($event, 1)"
+            :tabindex="tabindex"
+            role="slider"
+            :aria-valuemin="min"
+            :aria-valuenow="modelValue ? modelValue[1] : null"
+            :aria-valuemax="max"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-orientation="orientation"
+        ></span>
     </div>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'Slider',
     emits: ['update:modelValue', 'change', 'slideend'],
     props: {
-        modelValue: [Number,Array],
-		min: {
-			type: Number,
-			default: 0
-		},
-		max: {
-			type: Number,
-			default: 100
-		},
-		orientation: {
-			type: String,
-			default: 'horizontal'
-		},
-		step: {
-			type: Number,
-			default: null
-		},
-		range: {
-			type: Boolean,
-			default: false
-		},
+        modelValue: [Number, Array],
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        orientation: {
+            type: String,
+            default: 'horizontal'
+        },
+        step: {
+            type: Number,
+            default: null
+        },
+        range: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
-			type: Boolean,
-			default: false
+            type: Boolean,
+            default: false
         },
         tabindex: {
             type: Number,
@@ -48,7 +96,7 @@ export default {
         },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -69,6 +117,7 @@ export default {
     methods: {
         updateDomData() {
             let rect = this.$el.getBoundingClientRect();
+
             this.initX = rect.left + DomHandler.getWindowScrollLeft();
             this.initY = rect.top + DomHandler.getWindowScrollTop();
             this.barWidth = this.$el.offsetWidth;
@@ -78,22 +127,21 @@ export default {
             let handleValue;
             let pageX = event.touches ? event.touches[0].pageX : event.pageX;
             let pageY = event.touches ? event.touches[0].pageY : event.pageY;
-            if(this.orientation === 'horizontal')
-                handleValue = ((pageX - this.initX) * 100) / (this.barWidth);
-            else
-                handleValue = (((this.initY + this.barHeight) - pageY) * 100) / (this.barHeight);
+
+            if (this.orientation === 'horizontal') handleValue = ((pageX - this.initX) * 100) / this.barWidth;
+            else handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
             let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
+
             if (this.step) {
                 const oldValue = this.range ? this.modelValue[this.handleIndex] : this.modelValue;
-                const diff = (newValue - oldValue);
-                if (diff < 0)
-                    newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
-                else if (diff > 0)
-                    newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
-            }
-            else {
+                const diff = newValue - oldValue;
+
+                if (diff < 0) newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
+                else if (diff > 0) newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
+            } else {
                 newValue = Math.floor(newValue);
             }
+
             this.updateModel(event, newValue);
         },
         updateModel(event, value) {
@@ -106,30 +154,23 @@ export default {
                 if (this.handleIndex == 0) {
                     let maxValue = this.modelValue ? this.modelValue[1] : this.max;
 
-                    if (newValue < this.min)
-                        newValue = this.min;
-                    else if (newValue >= maxValue)
-                        newValue = maxValue;
+                    if (newValue < this.min) newValue = this.min;
+                    else if (newValue >= maxValue) newValue = maxValue;
 
                     modelValue[0] = newValue;
                     modelValue[1] = modelValue[1] || this.max;
-                }
-                else {
+                } else {
                     let minValue = this.modelValue ? this.modelValue[0] : this.min;
-                    if (newValue > this.max)
-                        newValue = this.max;
-                    else if (newValue <= minValue)
-                        newValue = minValue;
+
+                    if (newValue > this.max) newValue = this.max;
+                    else if (newValue <= minValue) newValue = minValue;
 
                     modelValue[0] = modelValue[0] || this.min;
                     modelValue[1] = newValue;
                 }
-            }
-            else {
-                if (newValue < this.min)
-                    newValue = this.min;
-                else if (newValue > this.max)
-                    newValue = this.max;
+            } else {
+                if (newValue < this.min) newValue = this.min;
+                else if (newValue > this.max) newValue = this.max;
 
                 modelValue = newValue;
             }
@@ -148,8 +189,7 @@ export default {
 
             if (this.range && this.modelValue[0] === this.max) {
                 this.handleIndex = 0;
-            }
-            else {
+            } else {
                 this.handleIndex = index;
             }
 
@@ -165,13 +205,14 @@ export default {
             if (this.dragging) {
                 this.dragging = false;
                 DomHandler.removeClass(this.$el, 'p-slider-sliding');
-                this.$emit('slideend', {originalEvent: event, value: this.modelValue});
+                this.$emit('slideend', { originalEvent: event, value: this.modelValue });
             }
         },
         onBarClick(event) {
             if (this.disabled) {
                 return;
             }
+
             if (!DomHandler.hasClass(event.target, 'p-slider-handle')) {
                 this.updateDomData();
                 this.setValue(event);
@@ -183,78 +224,71 @@ export default {
         },
         onKeyDown(event, index) {
             this.handleIndex = index;
+
             switch (event.code) {
                 case 'ArrowDown':
                 case 'ArrowLeft':
                     this.decrementValue(event, index);
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'ArrowUp':
                 case 'ArrowRight':
                     this.incrementValue(event, index);
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'PageDown':
                     this.decrementValue(event, index, true);
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'PageUp':
                     this.incrementValue(event, index, true);
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'Home':
                     this.updateModel(event, this.min);
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'End':
                     this.updateModel(event, this.max);
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         decrementValue(event, index, pageKey = false) {
             let newValue;
+
             if (this.range) {
-                if (this.step)
-                    newValue = this.modelValue[index] - this.step;
-                else
-                    newValue = this.modelValue[index] - 1;
-            }
-            else {
-                if (this.step)
-                    newValue = this.modelValue - this.step;
-                else if (!this.step && pageKey)
-                    newValue = this.modelValue - 10;
-                else
-                    newValue = this.modelValue - 1;
+                if (this.step) newValue = this.modelValue[index] - this.step;
+                else newValue = this.modelValue[index] - 1;
+            } else {
+                if (this.step) newValue = this.modelValue - this.step;
+                else if (!this.step && pageKey) newValue = this.modelValue - 10;
+                else newValue = this.modelValue - 1;
             }
+
             this.updateModel(event, newValue);
             event.preventDefault();
         },
         incrementValue(event, index, pageKey = false) {
             let newValue;
+
             if (this.range) {
-                if (this.step)
-                    newValue = this.modelValue[index] + this.step;
-                else
-                    newValue = this.modelValue[index] + 1;
-            }
-            else {
-                if (this.step)
-                    newValue = this.modelValue + this.step;
-                else if (!this.step && pageKey)
-                    newValue = this.modelValue + 10;
-                else
-                    newValue = this.modelValue + 1;
+                if (this.step) newValue = this.modelValue[index] + this.step;
+                else newValue = this.modelValue[index] + 1;
+            } else {
+                if (this.step) newValue = this.modelValue + this.step;
+                else if (!this.step && pageKey) newValue = this.modelValue + 10;
+                else newValue = this.modelValue + 1;
             }
+
             this.updateModel(event, newValue);
             event.preventDefault();
         },
@@ -263,6 +297,7 @@ export default {
                 this.dragListener = this.onDrag.bind(this);
                 document.addEventListener('mousemove', this.dragListener);
             }
+
             if (!this.dragEndListener) {
                 this.dragEndListener = this.onDragEnd.bind(this);
                 document.addEventListener('mouseup', this.dragEndListener);
@@ -273,6 +308,7 @@ export default {
                 document.removeEventListener('mousemove', this.dragListener);
                 this.dragListener = null;
             }
+
             if (this.dragEndListener) {
                 document.removeEventListener('mouseup', this.dragEndListener);
                 this.dragEndListener = null;
@@ -281,11 +317,14 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-slider p-component', {
-                'p-disabled': this.disabled,
-                'p-slider-horizontal': (this.orientation === 'horizontal'),
-                'p-slider-vertical': (this.orientation === 'vertical')
-            }];
+            return [
+                'p-slider p-component',
+                {
+                    'p-disabled': this.disabled,
+                    'p-slider-horizontal': this.orientation === 'horizontal',
+                    'p-slider-vertical': this.orientation === 'vertical'
+                }
+            ];
         },
         horizontal() {
             return this.orientation === 'horizontal';
@@ -295,81 +334,63 @@ export default {
         },
         rangeStyle() {
             if (this.range) {
-                if (this.horizontal)
-                    return {'left': this.rangeStartPosition + '%', width: (this.rangeEndPosition - this.rangeStartPosition + '%')};
-                else
-                    return {'bottom': this.rangeStartPosition + '%', height: (this.rangeEndPosition - this.rangeStartHandlePosition + '%')};
-            }
-            else {
-                if (this.horizontal)
-                    return {'width': this.handlePosition + '%'};
-                else
-                    return {'height': this.handlePosition + '%'};
+                if (this.horizontal) return { left: this.rangeStartPosition + '%', width: this.rangeEndPosition - this.rangeStartPosition + '%' };
+                else return { bottom: this.rangeStartPosition + '%', height: this.rangeEndPosition - this.rangeStartHandlePosition + '%' };
+            } else {
+                if (this.horizontal) return { width: this.handlePosition + '%' };
+                else return { height: this.handlePosition + '%' };
             }
         },
         handleStyle() {
-            if (this.horizontal)
-                return {'left': this.handlePosition + '%'};
-            else
-                return {'bottom': this.handlePosition + '%'};
+            if (this.horizontal) return { left: this.handlePosition + '%' };
+            else return { bottom: this.handlePosition + '%' };
         },
         handlePosition() {
-            if (this.modelValue < this.min)
-                return 0;
-            else if (this.modelValue > this.max)
-                return 100;
-            else
-                return (this.modelValue - this.min) * 100 / (this.max - this.min);
+            if (this.modelValue < this.min) return 0;
+            else if (this.modelValue > this.max) return 100;
+            else return ((this.modelValue - this.min) * 100) / (this.max - this.min);
         },
         rangeStartPosition() {
-            if (this.modelValue && this.modelValue[0])
-                return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min);
-            else
-                return 0;
+            if (this.modelValue && this.modelValue[0]) return ((this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100) / (this.max - this.min);
+            else return 0;
         },
         rangeEndPosition() {
-            if (this.modelValue && this.modelValue.length === 2)
-                return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min);
-            else
-                return 100;
+            if (this.modelValue && this.modelValue.length === 2) return ((this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100) / (this.max - this.min);
+            else return 100;
         },
         rangeStartHandleStyle() {
-            if (this.horizontal)
-                return {'left': this.rangeStartPosition + '%'};
-            else
-                return {'bottom': this.rangeStartPosition + '%'};
+            if (this.horizontal) return { left: this.rangeStartPosition + '%' };
+            else return { bottom: this.rangeStartPosition + '%' };
         },
         rangeEndHandleStyle() {
-            if (this.horizontal)
-                return {'left': this.rangeEndPosition + '%'};
-            else
-                return {'bottom': this.rangeEndPosition + '%'};
-        },
+            if (this.horizontal) return { left: this.rangeEndPosition + '%' };
+            else return { bottom: this.rangeEndPosition + '%' };
+        }
     }
-}
+};
 </script>
 
 <style>
 .p-slider {
-	position: relative;
+    position: relative;
 }
 
 .p-slider .p-slider-handle {
-	position: absolute;
-	cursor: grab;
+    position: absolute;
+    cursor: grab;
     touch-action: none;
     display: block;
 }
 
 .p-slider-range {
-	position: absolute;
+    position: absolute;
     display: block;
 }
 
 .p-slider-horizontal .p-slider-range {
     top: 0;
     left: 0;
-	height: 100%;
+    height: 100%;
 }
 
 .p-slider-horizontal .p-slider-handle {
@@ -377,7 +398,7 @@ export default {
 }
 
 .p-slider-vertical {
-	height: 100px;
+    height: 100px;
 }
 
 .p-slider-vertical .p-slider-handle {
diff --git a/components/speeddial/SpeedDial.d.ts b/components/speeddial/SpeedDial.d.ts
index 6f661bfed..71bbd14c5 100644
--- a/components/speeddial/SpeedDial.d.ts
+++ b/components/speeddial/SpeedDial.d.ts
@@ -141,22 +141,22 @@ export declare type SpeedDialEmits = {
      * Fired when the button element clicked.
      * @param {Event} event - Browser event.
      */
-    'click': (event: Event) => void;
+    click: (event: Event) => void;
     /**
      * Fired when the actions are visible.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Fired when the actions are hidden.
      */
-    'hide': () => void;
-}
+    hide: () => void;
+};
 
-declare class SpeedDial extends ClassComponent<SpeedDialProps, SpeedDialSlots, SpeedDialEmits> { }
+declare class SpeedDial extends ClassComponent<SpeedDialProps, SpeedDialSlots, SpeedDialEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SpeedDial: GlobalComponentConstructor<SpeedDial>
+        SpeedDial: GlobalComponentConstructor<SpeedDial>;
     }
 }
 
@@ -166,11 +166,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [SpeedDial](https://www.primefaces.org/primevue/showcase/#/speeddial)
+ * - [SpeedDial](https://www.primefaces.org/primevue/speeddial)
  *
  */
 export default SpeedDial;
diff --git a/components/speeddial/SpeedDial.spec.js b/components/speeddial/SpeedDial.spec.js
index 1d028a6d9..25190991d 100644
--- a/components/speeddial/SpeedDial.spec.js
+++ b/components/speeddial/SpeedDial.spec.js
@@ -24,14 +24,14 @@ describe('SpeedDial.vue', () => {
                         label: 'Upload',
                         icon: 'pi pi-upload',
                         command: () => {
-                            window.location.hash = "/fileupload"
+                            window.location.hash = '/fileupload';
                         }
                     },
                     {
                         label: 'Vue Website',
                         icon: 'pi pi-external-link',
                         command: () => {
-                            window.location.href = 'https://vuejs.org/'
+                            window.location.href = 'https://vuejs.org/';
                         }
                     }
                 ],
@@ -94,4 +94,4 @@ describe('SpeedDial.vue', () => {
 
         expect(wrapper.find('.p-speeddial-mask').exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/components/speeddial/SpeedDial.vue b/components/speeddial/SpeedDial.vue
index 8c7f75e09..7227c2225 100644
--- a/components/speeddial/SpeedDial.vue
+++ b/components/speeddial/SpeedDial.vue
@@ -6,8 +6,15 @@
         <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"
-                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" v-ripple>
+                    <a
+                        v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
+                        v-ripple
+                        :href="item.url || '#'"
+                        role="menuitem"
+                        :class="['p-speeddial-action', { 'p-disabled': item.disabled }]"
+                        :target="item.target"
+                        @click="onItemClick($event, item)"
+                    >
                         <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
                     </a>
                 </template>
@@ -24,7 +31,7 @@
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'SpeedDial',
@@ -86,7 +93,7 @@ export default {
         return {
             d_visible: this.visible,
             isItemClicked: false
-        }
+        };
     },
     watch: {
         visible(newValue) {
@@ -101,6 +108,7 @@ export default {
             if (button && firstItem) {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
                 const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
+
                 this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
                 this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
             }
@@ -150,49 +158,43 @@ export default {
 
             if (type !== 'linear') {
                 const length = this.model.length;
-                const radius = this.radius || (length * 20);
+                const radius = this.radius || length * 20;
 
                 if (type === 'circle') {
-                    const step = 2 * Math.PI / length;
+                    const step = (2 * Math.PI) / length;
 
                     return {
                         left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
-                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
-                    }
-                }
-                else if (type === 'semi-circle') {
+                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
+                    };
+                } else if (type === 'semi-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (length - 1);
                     const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                     const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                     if (direction === 'up') {
                         return { left: x, bottom: y };
-                    }
-                    else if (direction === 'down') {
+                    } else if (direction === 'down') {
                         return { left: x, top: y };
-                    }
-                    else if (direction === 'left') {
+                    } else if (direction === 'left') {
                         return { right: y, top: x };
-                    }
-                    else if (direction === 'right') {
+                    } else if (direction === 'right') {
                         return { left: y, top: x };
                     }
-                }
-                else if (type === 'quarter-circle') {
+                } else if (type === 'quarter-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (2 * (length - 1));
                     const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                     const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                     if (direction === 'up-left') {
                         return { right: x, bottom: y };
-                    }
-                    else if (direction === 'up-right') {
+                    } else if (direction === 'up-right') {
                         return { left: x, bottom: y };
-                    }
-                    else if (direction === 'down-left') {
+                    } else if (direction === 'down-left') {
                         return { right: y, top: x };
-                    }
-                    else if (direction === 'down-right') {
+                    } else if (direction === 'down-right') {
                         return { left: y, top: x };
                     }
                 }
@@ -218,6 +220,7 @@ export default {
 
                     this.isItemClicked = false;
                 };
+
                 document.addEventListener('click', this.documentClickListener);
             }
         },
@@ -239,34 +242,46 @@ export default {
     },
     computed: {
         containerClass() {
-            return [`p-speeddial p-component p-speeddial-${this.type}`, {
-                [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
-                'p-speeddial-opened': this.d_visible,
-                'p-disabled': this.disabled
-            }, this.class];
+            return [
+                `p-speeddial p-component p-speeddial-${this.type}`,
+                {
+                    [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
+                    'p-speeddial-opened': this.d_visible,
+                    'p-disabled': this.disabled
+                },
+                this.class
+            ];
         },
         buttonClassName() {
-            return ['p-speeddial-button p-button-rounded', {
-                'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
-            }, this.buttonClass];
+            return [
+                'p-speeddial-button p-button-rounded',
+                {
+                    'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
+                },
+                this.buttonClass
+            ];
         },
         iconClassName() {
             return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
         },
         maskClassName() {
-            return ['p-speeddial-mask', {
-                'p-speeddial-mask-visible': this.d_visible
-            }, this.maskClass];
+            return [
+                'p-speeddial-mask',
+                {
+                    'p-speeddial-mask-visible': this.d_visible
+                },
+                this.maskClass
+            ];
         }
     },
     components: {
-        'SDButton': Button
+        SDButton: Button
     },
     directives: {
-        'ripple': Ripple,
-        'tooltip': Tooltip
+        ripple: Ripple,
+        tooltip: Tooltip
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/splitbutton/SplitButton.d.ts b/components/splitbutton/SplitButton.d.ts
index 467a47e8e..910605ce1 100755
--- a/components/splitbutton/SplitButton.d.ts
+++ b/components/splitbutton/SplitButton.d.ts
@@ -55,14 +55,14 @@ export declare type SplitButtonEmits = {
      * Callback to invoke when main button is clicked.
      * @param {Event} event - Browser event.
      */
-    'click': (event: Event) => void;
-}
+    click: (event: Event) => void;
+};
 
-declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> { }
+declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SplitButton: GlobalComponentConstructor<SplitButton>
+        SplitButton: GlobalComponentConstructor<SplitButton>;
     }
 }
 
@@ -72,11 +72,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [SplitButton](https://www.primefaces.org/primevue/showcase/#/splitbutton)
+ * - [SplitButton](https://www.primefaces.org/primevue/splitbutton)
  *
  */
 export default SplitButton;
diff --git a/components/splitbutton/SplitButton.spec.js b/components/splitbutton/SplitButton.spec.js
index cbbe32b09..441e7d32e 100644
--- a/components/splitbutton/SplitButton.spec.js
+++ b/components/splitbutton/SplitButton.spec.js
@@ -29,13 +29,10 @@ describe('SplitButton.vue', () => {
                         label: 'Vue Website',
                         icon: 'pi pi-external-link',
                         command: () => {
-                            window.location.href = 'https://vuejs.org/'
+                            window.location.href = 'https://vuejs.org/';
                         }
                     },
-                    {   label: 'Upload',
-                        icon: 'pi pi-upload',
-                        to: '/fileupload'
-                    }
+                    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
                 ]
             }
         });
@@ -56,4 +53,4 @@ describe('SplitButton.vue', () => {
 
         expect(wrapper.find('.p-tieredmenu.p-component').exists()).toBe(false);
     });
-});
\ No newline at end of file
+});
diff --git a/components/splitbutton/SplitButton.vue b/components/splitbutton/SplitButton.vue
index 91eaee0a0..f9af3252b 100755
--- a/components/splitbutton/SplitButton.vue
+++ b/components/splitbutton/SplitButton.vue
@@ -3,17 +3,15 @@
         <slot>
             <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
         </slot>
-        <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled"
-            aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
-        <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
-            :baseZIndex="baseZIndex" :appendTo="appendTo" />
+        <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled" aria-haspopup="true" :aria-controls="ariaId + '_overlay'" />
+        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
     </div>
 </template>
 
 <script>
 import Button from 'primevue/button';
 import TieredMenu from 'primevue/tieredmenu';
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SplitButton',
@@ -27,7 +25,7 @@ export default {
             type: String,
             default: null
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -48,7 +46,7 @@ export default {
     },
     methods: {
         onDropdownButtonClick() {
-            this.$refs.menu.toggle({currentTarget: this.$el});
+            this.$refs.menu.toggle({ currentTarget: this.$el });
         },
         onDefaultButtonClick() {
             this.$refs.menu.hide();
@@ -63,10 +61,10 @@ export default {
         }
     },
     components: {
-        'PVSButton': Button,
-        'PVSMenu': TieredMenu
+        PVSButton: Button,
+        PVSMenu: TieredMenu
     }
-}
+};
 </script>
 
 <style scoped>
@@ -98,7 +96,7 @@ export default {
     min-width: 100%;
 }
 
-.p-fluid .p-splitbutton  {
+.p-fluid .p-splitbutton {
     display: flex;
 }
 </style>
diff --git a/components/splitter/Splitter.d.ts b/components/splitter/Splitter.d.ts
index 4e104052e..a38916426 100644
--- a/components/splitter/Splitter.d.ts
+++ b/components/splitter/Splitter.d.ts
@@ -38,6 +38,11 @@ export interface SplitterProps {
      * Default value is 'session'.
      */
     stateStorage?: SplitterStateStorageType;
+    /**
+     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+     * Default value is 1.
+     */
+    step?: number | undefined;
 }
 
 export interface SplitterSlots {
@@ -52,14 +57,14 @@ export declare type SplitterEmits = {
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.
      */
-    'resizeend': (event: SplitterResizeEndEvent) => void;
-}
+    resizeend: (event: SplitterResizeEndEvent) => void;
+};
 
-declare class Splitter extends ClassComponent<SplitterProps, SplitterSlots, SplitterEmits> { }
+declare class Splitter extends ClassComponent<SplitterProps, SplitterSlots, SplitterEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Splitter: GlobalComponentConstructor<Splitter>
+        Splitter: GlobalComponentConstructor<Splitter>;
     }
 }
 
@@ -73,7 +78,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Splitter](https://www.primefaces.org/primevue/showcase/#/splitter)
+ * - [Splitter](https://www.primefaces.org/primevue/splitter)
  *
  */
 export default Splitter;
diff --git a/components/splitter/Splitter.spec.js b/components/splitter/Splitter.spec.js
index d9e2788f8..dbfd2db71 100644
--- a/components/splitter/Splitter.spec.js
+++ b/components/splitter/Splitter.spec.js
@@ -35,8 +35,9 @@ describe('Splitter.vue', () => {
     it('should mousedown', async () => {
         const gutter = wrapper.find('.p-splitter-gutter-handle').element;
         const siblings = wrapper.findAll('.p-splitter-panel');
-        await wrapper.vm.onGutterMouseDown({ currentTarget: {gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
-        
+
+        await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
+
         expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-resizing');
     });
-});
\ No newline at end of file
+});
diff --git a/components/splitter/Splitter.vue b/components/splitter/Splitter.vue
index fdd08ce2a..1d3514349 100644
--- a/components/splitter/Splitter.vue
+++ b/components/splitter/Splitter.vue
@@ -1,20 +1,25 @@
 <template>
     <div :class="containerClass">
-        <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
-            <component :is="panel"></component>
-            <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
+        <template v-for="(panel, i) of panels" :key="i" class="p-splitter-panel">
+            <component :is="panel" tabindex="-1"></component>
+            <div
+                v-if="i !== panels.length - 1"
+                class="p-splitter-gutter"
+                role="separator"
+                tabindex="-1"
                 @mousedown="onGutterMouseDown($event, i)"
                 @touchstart="onGutterTouchStart($event, i)"
                 @touchmove="onGutterTouchMove($event, i)"
-                @touchend="onGutterTouchEnd($event, i)">
-                <div class="p-splitter-gutter-handle"></div>
+                @touchend="onGutterTouchEnd($event, i)"
+            >
+                <div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)"></div>
             </div>
         </template>
     </div>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Splitter',
@@ -35,6 +40,10 @@ export default {
         stateStorage: {
             type: String,
             default: 'session'
+        },
+        step: {
+            type: Number,
+            default: 5
         }
     },
     dragging: false,
@@ -51,25 +60,34 @@ export default {
     prevPanelSize: null,
     panelSizes: null,
     prevPanelIndex: null,
+    timer: null,
+    data() {
+        return {
+            prevSize: null
+        };
+    },
     mounted() {
         if (this.panels && this.panels.length) {
             let initialized = false;
+
             if (this.isStateful()) {
                 initialized = this.restoreState();
             }
 
             if (!initialized) {
-                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                let children = [...this.$el.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel'));
                 let _panelSizes = [];
 
                 this.panels.map((panel, i) => {
-                    let panelInitialSize = panel.props && panel.props.size ? panel.props.size: null;
-                    let panelSize = panelInitialSize || (100 / this.panels.length);
+                    let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
+                    let panelSize = panelInitialSize || 100 / this.panels.length;
+
                     _panelSizes[i] = panelSize;
-                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 });
 
                 this.panelSizes = _panelSizes;
+                this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
             }
         }
     },
@@ -81,32 +99,54 @@ export default {
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
-        onResizeStart(event, index) {
-            this.gutterElement = event.currentTarget;
+        onResizeStart(event, index, isKeyDown) {
+            this.gutterElement = event.currentTarget || event.target.parentElement;
             this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
-            this.dragging = true;
-            this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
+
+            if (!isKeyDown) {
+                this.dragging = true;
+                this.startPos = this.layout === 'horizontal' ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
+            }
+
             this.prevPanelElement = this.gutterElement.previousElementSibling;
             this.nextPanelElement = this.gutterElement.nextElementSibling;
-            this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
-            this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+
+            if (isKeyDown) {
+                this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
+                this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
+            } else {
+                this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size;
+                this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size;
+            }
+
             this.prevPanelIndex = index;
             DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.addClass(this.$el, 'p-splitter-resizing');
         },
-        onResize(event) {
-            let newPos;
-            if (this.horizontal)
-                newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
-            else
-                newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
+        onResize(event, step, isKeyDown) {
+            let newPos, newPrevPanelSize, newNextPanelSize;
 
-            let newPrevPanelSize = this.prevPanelSize + newPos;
-            let newNextPanelSize = this.nextPanelSize - newPos;
+            if (isKeyDown) {
+                if (this.horizontal) {
+                    newPrevPanelSize = (100 * (this.prevPanelSize + step)) / this.size;
+                    newNextPanelSize = (100 * (this.nextPanelSize - step)) / this.size;
+                } else {
+                    newPrevPanelSize = (100 * (this.prevPanelSize - step)) / this.size;
+                    newNextPanelSize = (100 * (this.nextPanelSize + step)) / this.size;
+                }
+            } else {
+                if (this.horizontal) newPos = (event.pageX * 100) / this.size - (this.startPos * 100) / this.size;
+                else newPos = (event.pageY * 100) / this.size - (this.startPos * 100) / this.size;
+
+                newPrevPanelSize = this.prevPanelSize + newPos;
+                newNextPanelSize = this.nextPanelSize - newPos;
+            }
+
+            this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
 
             if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
-                this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
-                this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+                this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
                 this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
             }
@@ -116,11 +156,73 @@ export default {
                 this.saveState();
             }
 
-            this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes});
+            this.$emit('resizeend', { originalEvent: event, sizes: this.panelSizes });
             DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.removeClass(this.$el, 'p-splitter-resizing');
             this.clear();
         },
+        repeat(event, index, step) {
+            this.onResizeStart(event, index, true);
+            this.onResize(event, step, true);
+        },
+        setTimer(event, index, step) {
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(event, index, step);
+            }, 40);
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+        },
+        onGutterKeyUp() {
+            this.clearTimer();
+            this.onResizeEnd();
+        },
+        onGutterKeyDown(event, index) {
+            switch (event.code) {
+                case 'ArrowLeft': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
         onGutterMouseDown(event, index) {
             this.onResizeStart(event, index);
             this.bindMouseListeners();
@@ -141,39 +243,43 @@ export default {
         },
         bindMouseListeners() {
             if (!this.mouseMoveListener) {
-                this.mouseMoveListener = event => this.onResize(event)
+                this.mouseMoveListener = (event) => this.onResize(event);
                 document.addEventListener('mousemove', this.mouseMoveListener);
             }
 
             if (!this.mouseUpListener) {
-                this.mouseUpListener = event => {
+                this.mouseUpListener = (event) => {
                     this.onResizeEnd(event);
                     this.unbindMouseListeners();
-                }
+                };
+
                 document.addEventListener('mouseup', this.mouseUpListener);
             }
         },
         bindTouchListeners() {
             if (!this.touchMoveListener) {
-                this.touchMoveListener = event => this.onResize(event.changedTouches[0])
+                this.touchMoveListener = (event) => this.onResize(event.changedTouches[0]);
                 document.addEventListener('touchmove', this.touchMoveListener);
             }
 
             if (!this.touchEndListener) {
-                this.touchEndListener = event => {
+                this.touchEndListener = (event) => {
                     this.resizeEnd(event);
                     this.unbindTouchListeners();
-                }
+                };
+
                 document.addEventListener('touchend', this.touchEndListener);
             }
         },
         validateResize(newPrevPanelSize, newNextPanelSize) {
             let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
+
             if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
                 return false;
             }
 
             let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[1], 'minSize');
+
             if (this.panels[1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
                 return false;
             }
@@ -217,7 +323,7 @@ export default {
             return this.stateKey != null;
         },
         getStorage() {
-            switch(this.stateStorage) {
+            switch (this.stateStorage) {
                 case 'local':
                     return window.localStorage;
 
@@ -237,9 +343,10 @@ export default {
 
             if (stateString) {
                 this.panelSizes = JSON.parse(stateString);
-                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                let children = [...this.$el.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel'));
+
                 children.forEach((child, i) => {
-                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
                 });
 
                 return true;
@@ -254,32 +361,30 @@ export default {
         },
         panels() {
             const panels = [];
-            this.$slots.default().forEach(child => {
-                    if (this.isSplitterPanel(child)) {
-                        panels.push(child);
-                    }
-                    else if (child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isSplitterPanel(nestedChild)) {
-                                panels.push(nestedChild)
-                            }
-                        });
-                    }
+
+            this.$slots.default().forEach((child) => {
+                if (this.isSplitterPanel(child)) {
+                    panels.push(child);
+                } else if (child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isSplitterPanel(nestedChild)) {
+                            panels.push(nestedChild);
+                        }
+                    });
                 }
-            )
+            });
+
             return panels;
         },
         gutterStyle() {
-            if (this.horizontal)
-                return {width: this.gutterSize + 'px'};
-            else
-                return {height: this.gutterSize + 'px'};
+            if (this.horizontal) return { width: this.gutterSize + 'px' };
+            else return { height: this.gutterSize + 'px' };
         },
         horizontal() {
             return this.layout === 'horizontal';
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/splitterpanel/SplitterPanel.d.ts b/components/splitterpanel/SplitterPanel.d.ts
index 86f913053..23be12e29 100644
--- a/components/splitterpanel/SplitterPanel.d.ts
+++ b/components/splitterpanel/SplitterPanel.d.ts
@@ -19,14 +19,13 @@ export interface SplitterPanelSlots {
     default: () => VNode[];
 }
 
-export declare type SplitterPanelEmits = {
-}
+export declare type SplitterPanelEmits = {};
 
-declare class SplitterPanel extends ClassComponent<SplitterPanelProps, SplitterPanelSlots, SplitterPanelEmits> { }
+declare class SplitterPanel extends ClassComponent<SplitterPanelProps, SplitterPanelSlots, SplitterPanelEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SplitterPanel: GlobalComponentConstructor<SplitterPanel>
+        SplitterPanel: GlobalComponentConstructor<SplitterPanel>;
     }
 }
 
@@ -36,7 +35,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [SplitterPanel](https://www.primefaces.org/primevue/showcase/#/splitter)
+ * - [SplitterPanel](https://www.primefaces.org/primevue/splitter)
  *
  */
 export default SplitterPanel;
diff --git a/components/splitterpanel/SplitterPanel.spec.js b/components/splitterpanel/SplitterPanel.spec.js
index d1f18461c..f756b73e5 100644
--- a/components/splitterpanel/SplitterPanel.spec.js
+++ b/components/splitterpanel/SplitterPanel.spec.js
@@ -20,4 +20,4 @@ describe('SplitterPanel.vue', () => {
         expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center');
         expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1');
     });
-});
\ No newline at end of file
+});
diff --git a/components/splitterpanel/SplitterPanel.vue b/components/splitterpanel/SplitterPanel.vue
index 3bd15e4b4..65a904cf7 100644
--- a/components/splitterpanel/SplitterPanel.vue
+++ b/components/splitterpanel/SplitterPanel.vue
@@ -19,13 +19,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-splitter-panel', {'p-splitter-panel-nested': this.isNested}];
+            return ['p-splitter-panel', { 'p-splitter-panel-nested': this.isNested }];
         },
         isNested() {
-            return this.$slots.default().some(child => {
+            return this.$slots.default().some((child) => {
                 return child.type.name === 'Splitter';
             });
         }
     }
-}
+};
 </script>
diff --git a/components/steps/Steps.d.ts b/components/steps/Steps.d.ts
index c726f3239..8adb6dbd9 100755
--- a/components/steps/Steps.d.ts
+++ b/components/steps/Steps.d.ts
@@ -36,14 +36,13 @@ export interface StepsSlots {
     }) => VNode[];
 }
 
-export declare type StepsEmits = {
-}
+export declare type StepsEmits = {};
 
-declare class Steps extends ClassComponent<StepsProps, StepsSlots, StepsEmits> { }
+declare class Steps extends ClassComponent<StepsProps, StepsSlots, StepsEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Steps: GlobalComponentConstructor<Steps>
+        Steps: GlobalComponentConstructor<Steps>;
     }
 }
 
@@ -53,7 +52,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Steps](https://www.primefaces.org/primevue/showcase/#/steps)
+ * - [Steps](https://www.primefaces.org/primevue/steps)
  *
  */
 export default Steps;
diff --git a/components/steps/Steps.vue b/components/steps/Steps.vue
index 59548a98f..fd8ae0d04 100755
--- a/components/steps/Steps.vue
+++ b/components/steps/Steps.vue
@@ -1,18 +1,18 @@
 <template>
     <div :id="id" :class="containerClass">
         <ul role="tablist">
-            <template v-for="(item,index) of model" :key="item.to">
+            <template v-for="(item, index) of model" :key="item.to">
                 <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
                     <template v-if="!$slots.item">
-                        <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
-                            <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
-                                <span class="p-steps-number">{{index + 1}}</span>
-                                <span class="p-steps-title">{{label(item)}}</span>
+                        <router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                            <a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="presentation">
+                                <span class="p-steps-number">{{ index + 1 }}</span>
+                                <span class="p-steps-title">{{ label(item) }}</span>
                             </a>
                         </router-link>
                         <span v-else :class="linkClass()" role="presentation">
-                            <span class="p-steps-number">{{index + 1}}</span>
-                            <span class="p-steps-title">{{label(item)}}</span>
+                            <span class="p-steps-number">{{ index + 1 }}</span>
+                            <span class="p-steps-title">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Steps',
@@ -32,7 +32,7 @@ export default {
             type: String,
             default: UniqueComponentId()
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -49,6 +49,7 @@ export default {
         onItemClick(event, item, navigate) {
             if (this.disabled(item) || this.readonly) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -67,36 +68,43 @@ export default {
             return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
         },
         getItemClass(item) {
-            return ['p-steps-item', item.class, {
-                'p-highlight p-steps-current': this.isActive(item),
-                'p-disabled': this.isItemDisabled(item)
-            }];
+            return [
+                'p-steps-item',
+                item.class,
+                {
+                    'p-highlight p-steps-current': this.isActive(item),
+                    'p-disabled': this.isItemDisabled(item)
+                }
+            ];
         },
         linkClass(routerProps) {
-            return ['p-menuitem-link', {
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         isItemDisabled(item) {
-            return (this.disabled(item) || (this.readonly && !this.isActive(item)));
+            return this.disabled(item) || (this.readonly && !this.isActive(item));
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return ['p-steps p-component', {'p-readonly': this.readonly}];
+            return ['p-steps p-component', { 'p-readonly': this.readonly }];
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/styleclass/StyleClass.js b/components/styleclass/StyleClass.js
index 871232c54..3fd13d85f 100644
--- a/components/styleclass/StyleClass.js
+++ b/components/styleclass/StyleClass.js
@@ -1,22 +1,18 @@
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 
 function bind(el, binding) {
     el.$_pstyleclass_clicklistener = () => {
         const target = resolveTarget(el, binding);
 
         if (binding.value.toggleClass) {
-            if (DomHandler.hasClass(target, binding.value.toggleClass))
-                DomHandler.removeClass(target, binding.value.toggleClass);
-            else
-                DomHandler.addClass(target, binding.value.toggleClass);
-        }
-        else {
-            if (target.offsetParent === null)
-                enter(target, el, binding);
-            else 
-                leave(target, binding);
+            if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);
+            else DomHandler.addClass(target, binding.value.toggleClass);
+        } else {
+            if (target.offsetParent === null) enter(target, el, binding);
+            else leave(target, binding);
         }
     };
+
     el.addEventListener('click', el.$_pstyleclass_clicklistener);
 }
 
@@ -43,28 +39,30 @@ function enter(target, el, binding) {
             }
 
             DomHandler.addClass(target, binding.value.enterActiveClass);
+
             if (binding.value.enterClass) {
                 DomHandler.removeClass(target, binding.value.enterClass);
             }
 
             target.$p_styleclass_enterlistener = () => {
                 DomHandler.removeClass(target, binding.value.enterActiveClass);
+
                 if (binding.value.enterToClass) {
                     DomHandler.addClass(target, binding.value.enterToClass);
                 }
+
                 target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
-            
+
                 if (binding.value.enterActiveClass === 'slidedown') {
                     target.style.maxHeight = '';
                 }
-        
+
                 target.$_pstyleclass_animating = false;
             };
-            
+
             target.addEventListener('animationend', target.$p_styleclass_enterlistener);
         }
-    }
-    else {
+    } else {
         if (binding.value.enterClass) {
             DomHandler.removeClass(target, binding.value.enterClass);
         }
@@ -84,23 +82,25 @@ function leave(target, binding) {
         if (!target.$_pstyleclass_animating) {
             target.$_pstyleclass_animating = true;
             DomHandler.addClass(target, binding.value.leaveActiveClass);
+
             if (binding.value.leaveClass) {
                 DomHandler.removeClass(target, binding.value.leaveClass);
             }
 
             target.$p_styleclass_leavelistener = () => {
                 DomHandler.removeClass(target, binding.value.leaveActiveClass);
+
                 if (binding.value.leaveToClass) {
                     DomHandler.addClass(target, binding.value.leaveToClass);
                 }
+
                 target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
                 target.$_pstyleclass_animating = false;
             };
 
             target.addEventListener('animationend', target.$p_styleclass_leavelistener);
         }
-    }
-    else {
+    } else {
         if (binding.value.leaveClass) {
             DomHandler.removeClass(target, binding.value.leaveClass);
         }
@@ -139,13 +139,11 @@ function bindDocumentListener(target, el, binding) {
         target.$p_styleclass_documentlistener = (event) => {
             if (!isVisible(target) || getComputedStyle(target).getPropertyValue('position') === 'static') {
                 unbindDocumentListener(target);
-            }
-
-            else if (isOutsideClick(event, target, el)) {
+            } else if (isOutsideClick(event, target, el)) {
                 leave(target, binding);
             }
-        }
-        
+        };
+
         target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);
     }
 }
@@ -174,4 +172,4 @@ const StyleClass = {
     }
 };
 
-export default StyleClass;
\ No newline at end of file
+export default StyleClass;
diff --git a/components/styleclass/StyleClass.spec.js b/components/styleclass/StyleClass.spec.js
index 821c9abe8..cd74a793f 100644
--- a/components/styleclass/StyleClass.spec.js
+++ b/components/styleclass/StyleClass.spec.js
@@ -4,8 +4,8 @@ import Button from '@/components/button/Button.vue';
 import InputText from '@/components/inputtext/InputText.vue';
 
 config.global.directives = {
-    'styleclass': StyleClass
-}
+    styleclass: StyleClass
+};
 
 describe('StyleClass', () => {
     it('should work with next selector', async () => {
@@ -33,4 +33,4 @@ describe('StyleClass', () => {
 
         expect(input.classes()).not.toContain('p-disabled');
     });
-});
\ No newline at end of file
+});
diff --git a/components/tabmenu/TabMenu.d.ts b/components/tabmenu/TabMenu.d.ts
index 729d3877d..01e8f6101 100755
--- a/components/tabmenu/TabMenu.d.ts
+++ b/components/tabmenu/TabMenu.d.ts
@@ -49,13 +49,13 @@ export declare type TabMenuEmits = {
      * @param {TabMenuChangeEvent} event - Custom tab change event.
      */
     'tab-change': (event: TabMenuChangeEvent) => void;
-}
+};
 
-declare class TabMenu extends ClassComponent<TabMenuProps, TabMenuSlots, TabMenuEmits> { }
+declare class TabMenu extends ClassComponent<TabMenuProps, TabMenuSlots, TabMenuEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TabMenu: GlobalComponentConstructor<TabMenu>
+        TabMenu: GlobalComponentConstructor<TabMenu>;
     }
 }
 
@@ -65,7 +65,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TabMenu](https://www.primefaces.org/primevue/showcase/#/tabmenu)
+ * - [TabMenu](https://www.primefaces.org/primevue/tabmenu)
  *
  */
 export default TabMenu;
diff --git a/components/tabmenu/TabMenu.vue b/components/tabmenu/TabMenu.vue
index dfbd69769..017ef5476 100755
--- a/components/tabmenu/TabMenu.vue
+++ b/components/tabmenu/TabMenu.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="p-tabmenu p-component">
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
-            <template v-for="(item,i) of model" :key="label(item) + '_' + i.toString()">
-                <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-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
+                <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                    <li v-if="visible(item)" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="tab">
                         <template v-if="!$slots.item">
-                            <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">{{label(item)}}</span>
+                            <a v-ripple :href="href" class="p-menuitem-link" @click="onItemClick($event, item, i, navigate)" role="presentation">
+                                <span v-if="item.icon" :class="getItemIcon(item)"></span>
+                                <span class="p-menuitem-text">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item"></component>
@@ -15,9 +15,9 @@
                 </router-link>
                 <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, i)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                            <span :class="getItemIcon(item)" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                        <a v-ripple :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" role="presentation" :tabindex="disabled(item) ? null : '0'">
+                            <span v-if="item.icon" :class="getItemIcon(item)"></span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -29,14 +29,14 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'TabMenu',
     emits: ['update:activeIndex', 'tab-change'],
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -53,6 +53,14 @@ export default {
     data() {
         return {
             d_activeIndex: this.activeIndex
+        };
+    },
+    watch: {
+        $route() {
+            this.timeout = setTimeout(() => this.updateInkBar(), 50);
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
         }
     },
     mounted() {
@@ -64,18 +72,11 @@ export default {
     beforeUnmount() {
         clearTimeout(this.timeout);
     },
-    watch: {
-        $route() {
-            this.timeout = setTimeout(() => this.updateInkBar(), 50);
-        },
-        activeIndex(newValue) {
-            this.d_activeIndex = newValue;
-        }
-    },
     methods: {
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -101,51 +102,61 @@ export default {
             });
         },
         getItemClass(item, index) {
-            return ['p-tabmenuitem', item.class, {
-                'p-highlight': this.d_activeIndex === index,
-                'p-disabled': this.disabled(item)
-            }];
+            return [
+                'p-tabmenuitem',
+                item.class,
+                {
+                    'p-highlight': this.d_activeIndex === index,
+                    'p-disabled': this.disabled(item)
+                }
+            ];
         },
         getRouteItemClass(item, isActive, isExactActive) {
-            return ['p-tabmenuitem', item.class, {
-                'p-highlight': this.exact ? isExactActive : isActive,
-                'p-disabled': this.disabled(item)
-            }];
+            return [
+                'p-tabmenuitem',
+                item.class,
+                {
+                    'p-highlight': this.exact ? isExactActive : isActive,
+                    'p-disabled': this.disabled(item)
+                }
+            ];
         },
         getItemIcon(item) {
             return ['p-menuitem-icon', item.icon];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         },
         updateInkBar() {
             let tabs = this.$refs.nav.children;
             let inkHighlighted = false;
+
             for (let i = 0; i < tabs.length; i++) {
                 let tab = tabs[i];
+
                 if (DomHandler.hasClass(tab, 'p-highlight')) {
                     this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
-                    this.$refs.inkbar.style.left =  DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+                    this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
                     inkHighlighted = true;
                 }
             }
 
             if (!inkHighlighted) {
                 this.$refs.inkbar.style.width = '0px';
-                this.$refs.inkbar.style.left =  '0px';
+                this.$refs.inkbar.style.left = '0px';
             }
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/tabpanel/TabPanel.d.ts b/components/tabpanel/TabPanel.d.ts
index 6a4a7553d..ba6e7d85e 100755
--- a/components/tabpanel/TabPanel.d.ts
+++ b/components/tabpanel/TabPanel.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabPanelProps {
@@ -6,6 +6,34 @@ export interface TabPanelProps {
      * Orientation of tab headers.
      */
     header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     */
+    headerClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLLiElement to the tab header.
+     */
+    headerProps?: LiHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     */
+    contentClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab content.
+     */
+    contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      */
@@ -23,14 +51,13 @@ export interface TabPanelSlots {
     header: () => VNode[];
 }
 
-export declare type TabPanelEmits = {
-}
+export declare type TabPanelEmits = {};
 
-declare class TabPanel extends ClassComponent<TabPanelProps, TabPanelSlots, TabPanelEmits> { }
+declare class TabPanel extends ClassComponent<TabPanelProps, TabPanelSlots, TabPanelEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TabPanel: GlobalComponentConstructor<TabPanel>
+        TabPanel: GlobalComponentConstructor<TabPanel>;
     }
 }
 
@@ -40,7 +67,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TabPanel](https://www.primefaces.org/primevue/showcase/#/tabpanel)
+ * - [TabPanel](https://www.primefaces.org/primevue/tabpanel)
  *
  */
 export default TabPanel;
diff --git a/components/tabpanel/TabPanel.vue b/components/tabpanel/TabPanel.vue
index 65662351a..eb75d5be1 100755
--- a/components/tabpanel/TabPanel.vue
+++ b/components/tabpanel/TabPanel.vue
@@ -7,7 +7,14 @@ export default {
     name: 'TabPanel',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
-}
+};
 </script>
diff --git a/components/tabview/TabView.d.ts b/components/tabview/TabView.d.ts
index 964e41692..db7809af0 100755
--- a/components/tabview/TabView.d.ts
+++ b/components/tabview/TabView.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabViewChangeEvent {
@@ -15,7 +15,7 @@ export interface TabViewChangeEvent {
 /**
  * @extends TabViewChangeEvent
  */
-export interface TabViewClickEvent extends TabViewChangeEvent { }
+export interface TabViewClickEvent extends TabViewChangeEvent {}
 
 export interface TabViewProps {
     /**
@@ -30,6 +30,22 @@ export interface TabViewProps {
      * When enabled displays buttons at each side of the tab headers to scroll the tab list.
      */
     scrollable?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the previous button.
+     */
+    previousButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the next button.
+     */
+    nextButtonProps?: ButtonHTMLAttributes | undefined;
 }
 
 export interface TabViewSlots {
@@ -55,13 +71,13 @@ export declare type TabViewEmits = {
      * @param {TabViewClickEvent} event - Custom tab click event.
      */
     'tab-click': (event: TabViewClickEvent) => void;
-}
+};
 
-declare class TabView extends ClassComponent<TabViewProps, TabViewSlots, TabViewEmits> { }
+declare class TabView extends ClassComponent<TabViewProps, TabViewSlots, TabViewEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TabView: GlobalComponentConstructor<TabView>
+        TabView: GlobalComponentConstructor<TabView>;
     }
 }
 
@@ -75,7 +91,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TabView](https://www.primefaces.org/primevue/showcase/#/tabview)
+ * - [TabView](https://www.primefaces.org/primevue/tabview)
  *
  */
 export default TabView;
diff --git a/components/tabview/TabView.spec.js b/components/tabview/TabView.spec.js
index 9c36c96ea..b509570d9 100644
--- a/components/tabview/TabView.spec.js
+++ b/components/tabview/TabView.spec.js
@@ -1,18 +1,18 @@
+import TabPanel from '@/components/tabpanel/TabPanel.vue';
 import { mount } from '@vue/test-utils';
 import TabView from './TabView.vue';
-import TabPanel from '@/components/tabpanel/TabPanel.vue';
 
 describe('TabPanel.vue', () => {
     let wrapper;
 
-    window.HTMLElement.prototype.scrollIntoView = function() {};
+    window.HTMLElement.prototype.scrollIntoView = function () {};
 
     beforeEach(() => {
         wrapper = mount(TabView, {
             global: {
                 components: {
                     TabPanel
-                }    
+                }
             },
             slots: {
                 default: `
@@ -42,7 +42,7 @@ describe('TabPanel.vue', () => {
     it('should change the active item', async () => {
         await wrapper.vm.onTabClick({}, 1);
 
-        expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-tabview-header');
         expect(wrapper.findAll('.p-tabview-panel')[0].attributes().style).toBe('display: none;');
     });
 });
@@ -53,7 +53,7 @@ describe('dynamic tabs', () => {
             global: {
                 components: {
                     TabPanel
-                }    
+                }
             },
             slots: {
                 default: `
@@ -71,4 +71,4 @@ describe('dynamic tabs', () => {
         expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
         expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
     });
-});
\ No newline at end of file
+});
diff --git a/components/tabview/TabView.vue b/components/tabview/TabView.vue
index 357a2b15a..5f29bb4e7 100755
--- a/components/tabview/TabView.vue
+++ b/components/tabview/TabView.vue
@@ -1,27 +1,67 @@
 <template>
     <div :class="contentClasses">
         <div class="p-tabview-nav-container">
-            <button v-if="scrollable && !backwardIsDisabled" ref="prevBtn" :class="prevButtonClasses" @click="navBackward" type="button" v-ripple>
-				<span class="pi pi-chevron-left"></span>
-			</button>
+            <button
+                v-if="scrollable && !isPrevButtonDisabled"
+                ref="prevBtn"
+                v-ripple
+                type="button"
+                class="p-tabview-nav-prev p-tabview-nav-btn p-link"
+                :tabindex="tabindex"
+                :aria-label="prevButtonAriaLabel"
+                @click="onPrevButtonClick"
+                v-bind="previousButtonProps"
+            >
+                <span class="pi pi-chevron-left" aria-hidden="true"></span>
+            </button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
                 <ul ref="nav" class="p-tabview-nav" role="tablist">
-                    <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
-                        <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple>
-                            <span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
-                            <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
+                    <li v-for="(tab, i) of tabs" :key="getKey(tab, i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
+                        <a
+                            :id="getTabHeaderActionId(i)"
+                            v-ripple
+                            class="p-tabview-nav-link p-tabview-header-action"
+                            :tabindex="getTabProp(tab, 'disabled') || !isTabActive(i) ? -1 : tabindex"
+                            role="tab"
+                            :aria-disabled="getTabProp(tab, 'disabled')"
+                            :aria-selected="isTabActive(i)"
+                            :aria-controls="getTabContentId(i)"
+                            @click="onTabClick($event, tab, i)"
+                            @keydown="onTabKeyDown($event, tab, i)"
+                            v-bind="getTabProp(tab, 'headerActionProps')"
+                        >
+                            <span v-if="tab.props && tab.props.header" class="p-tabview-title">{{ tab.props.header }}</span>
+                            <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                         </a>
                     </li>
-                    <li ref="inkbar" class="p-tabview-ink-bar"></li>
+                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true"></li>
                 </ul>
             </div>
-            <button v-if="scrollable && !forwardIsDisabled" ref="nextBtn" :class="nextButtonClasses" @click="navForward" type="button" v-ripple>
-				<span class="pi pi-chevron-right"></span>
-			</button>
+            <button
+                v-if="scrollable && !isNextButtonDisabled"
+                ref="nextBtn"
+                v-ripple
+                type="button"
+                class="p-tabview-nav-next p-tabview-nav-btn p-link"
+                :tabindex="tabindex"
+                :aria-label="nextButtonAriaLabel"
+                @click="onNextButtonClick"
+                v-bind="nextButtonProps"
+            >
+                <span class="pi pi-chevron-right" aria-hidden="true"></span>
+            </button>
         </div>
         <div class="p-tabview-panels">
-            <template v-for="(tab, i) of tabs" :key="getKey(tab,i)">
-                <div  class="p-tabview-panel" role="tabpanel" v-if="lazy ? (d_activeIndex === i) : true" v-show="lazy ? true: (d_activeIndex === i)">
+            <template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
+                <div
+                    v-if="lazy ? isTabActive(i) : true"
+                    v-show="lazy ? true : isTabActive(i)"
+                    :style="getTabProp(tab, 'contentStyle')"
+                    :class="getTabContentClass(tab)"
+                    role="tabpanel"
+                    :aria-labelledby="getTabHeaderActionId(i)"
+                    v-bind="getTabProp(tab, 'contentProps')"
+                >
                     <component :is="tab"></component>
                 </div>
             </template>
@@ -30,7 +70,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -48,135 +88,279 @@ export default {
         scrollable: {
             type: Boolean,
             default: false
-        }
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        previousButtonProps: null,
+        nextButtonProps: null
     },
     data() {
         return {
             d_activeIndex: this.activeIndex,
-            backwardIsDisabled: true,
-            forwardIsDisabled: false
-        }
+            focusedTabIndex: -1,
+            isPrevButtonDisabled: true,
+            isNextButtonDisabled: false
+        };
     },
     watch: {
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
-            this.updateScrollBar(newValue);
+            this.scrollInView({ index: newValue });
         }
     },
-    updated() {
-        this.updateInkBar();
-    },
     mounted() {
         this.updateInkBar();
     },
+    updated() {
+        this.updateInkBar();
+    },
     methods: {
-        onTabClick(event, i) {
-            if (!this.isTabDisabled(this.tabs[i]) && i !== this.d_activeIndex) {
-                this.d_activeIndex = i;
-                this.$emit('update:activeIndex', this.d_activeIndex);
-
-                this.$emit('tab-change', {
-                    originalEvent: event,
-                    index: i
-                });
-
-                this.updateScrollBar(i);
-            }
-
-            this.$emit('tab-click', {
-                originalEvent: event,
-                index: i
-            });
-        },
-        onTabKeydown(event, i) {
-            if (event.which === 13) {
-                this.onTabClick(event, i);
-            }
-        },
-        updateInkBar() {
-            let tabHeader = this.$refs.nav.children[this.d_activeIndex];
-            this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
-            this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
-        },
-        updateScrollBar(index) {
-            let tabHeader = this.$refs.nav.children[index];
-            tabHeader.scrollIntoView({ block: 'nearest' })
-        },
-        updateButtonState() {
-            const content = this.$refs.content;
-            const { scrollLeft, scrollWidth } = content;
-            const width = DomHandler.getWidth(content);
-
-            this.backwardIsDisabled = scrollLeft === 0;
-            this.forwardIsDisabled = parseInt(scrollLeft) === scrollWidth - width;
-        },
-        getKey(tab, i) {
-            return (tab.props && tab.props.header) ? tab.props.header : i;
-        },
-        isTabDisabled(tab) {
-            return (tab.props && tab.props.disabled);
-        },
         isTabPanel(child) {
-            return child.type.name === 'TabPanel'
+            return child.type.name === 'TabPanel';
+        },
+        isTabActive(index) {
+            return this.d_activeIndex === index;
+        },
+        getTabProp(tab, name) {
+            return tab.props ? tab.props[name] : undefined;
+        },
+        getKey(tab, index) {
+            return this.getTabProp(tab, 'header') || index;
+        },
+        getTabHeaderActionId(index) {
+            return `${this.id}_${index}_header_action`;
+        },
+        getTabContentId(index) {
+            return `${this.id}_${index}_content`;
         },
         onScroll(event) {
             this.scrollable && this.updateButtonState();
 
             event.preventDefault();
         },
-        getVisibleButtonWidths() {
-            const { prevBtn, nextBtn } = this.$refs;
-
-            return [prevBtn, nextBtn].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
-        },
-        navBackward() {
+        onPrevButtonClick() {
             const content = this.$refs.content;
             const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
             const pos = content.scrollLeft - width;
+
             content.scrollLeft = pos <= 0 ? 0 : pos;
         },
-        navForward() {
+        onNextButtonClick() {
             const content = this.$refs.content;
             const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
             const pos = content.scrollLeft + width;
             const lastPos = content.scrollWidth - width;
 
             content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        },
+        onTabClick(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+            this.$emit('tab-click', { originalEvent: event, index });
+        },
+        onTabKeyDown(event, tab, index) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onTabArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onTabArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onTabHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onTabEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onTabEnterKey(event, tab, index);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onTabArrowRightKey(event) {
+            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
+
+            nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
+            event.preventDefault();
+        },
+        onTabArrowLeftKey(event) {
+            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
+
+            prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
+            event.preventDefault();
+        },
+        onTabHomeKey(event) {
+            const firstHeaderAction = this.findFirstHeaderAction();
+
+            this.changeFocusedTab(event, firstHeaderAction);
+            event.preventDefault();
+        },
+        onTabEndKey(event) {
+            const lastHeaderAction = this.findLastHeaderAction();
+
+            this.changeFocusedTab(event, lastHeaderAction);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView({ index: this.$refs.nav.children.length - 2 });
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView({ index: 0 });
+            event.preventDefault();
+        },
+        onTabEnterKey(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+
+            event.preventDefault();
+        },
+        findNextHeaderAction(tabElement, selfCheck = false) {
+            const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+
+            return headerElement
+                ? DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar')
+                    ? this.findNextHeaderAction(headerElement)
+                    : DomHandler.findSingle(headerElement, '.p-tabview-header-action')
+                : null;
+        },
+        findPrevHeaderAction(tabElement, selfCheck = false) {
+            const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+
+            return headerElement
+                ? DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar')
+                    ? this.findPrevHeaderAction(headerElement)
+                    : DomHandler.findSingle(headerElement, '.p-tabview-header-action')
+                : null;
+        },
+        findFirstHeaderAction() {
+            return this.findNextHeaderAction(this.$refs.nav.firstElementChild, true);
+        },
+        findLastHeaderAction() {
+            return this.findPrevHeaderAction(this.$refs.nav.lastElementChild, true);
+        },
+        changeActiveIndex(event, tab, index) {
+            if (!this.getTabProp(tab, 'disabled') && this.d_activeIndex !== index) {
+                this.d_activeIndex = index;
+
+                this.$emit('update:activeIndex', index);
+                this.$emit('tab-change', { originalEvent: event, index });
+
+                this.scrollInView({ index });
+            }
+        },
+        changeFocusedTab(event, element) {
+            if (element) {
+                DomHandler.focus(element);
+                this.scrollInView({ element });
+
+                if (this.selectOnFocus) {
+                    const index = parseInt(element.parentElement.dataset.index, 10);
+                    const tab = this.tabs[index];
+
+                    this.changeActiveIndex(event, tab, index);
+                }
+            }
+        },
+        scrollInView({ element, index = -1 }) {
+            const currentElement = element || this.$refs.nav.children[index];
+
+            if (currentElement) {
+                currentElement.scrollIntoView && currentElement.scrollIntoView({ block: 'nearest' });
+            }
+        },
+        updateInkBar() {
+            let tabHeader = this.$refs.nav.children[this.d_activeIndex];
+
+            this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
+            this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+        },
+        updateButtonState() {
+            const content = this.$refs.content;
+            const { scrollLeft, scrollWidth } = content;
+            const width = DomHandler.getWidth(content);
+
+            this.isPrevButtonDisabled = scrollLeft === 0;
+            this.isNextButtonDisabled = parseInt(scrollLeft) === scrollWidth - width;
+        },
+        getVisibleButtonWidths() {
+            const { prevBtn, nextBtn } = this.$refs;
+
+            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
+        },
+        getTabHeaderClass(tab, i) {
+            return [
+                'p-tabview-header',
+                this.getTabProp(tab, 'headerClass'),
+                {
+                    'p-highlight': this.d_activeIndex === i,
+                    'p-disabled': this.getTabProp(tab, 'disabled')
+                }
+            ];
+        },
+        getTabContentClass(tab) {
+            return ['p-tabview-panel', this.getTabProp(tab, 'contentClass')];
         }
     },
     computed: {
         contentClasses() {
-			return ['p-tabview p-component', {'p-tabview-scrollable': this.scrollable}];
-		},
-        prevButtonClasses() {
-            return ['p-tabview-nav-prev p-tabview-nav-btn p-link']
-        },
-        nextButtonClasses() {
-            return ['p-tabview-nav-next p-tabview-nav-btn p-link']
+            return [
+                'p-tabview p-component',
+                {
+                    'p-tabview-scrollable': this.scrollable
+                }
+            ];
         },
         tabs() {
-            const tabs = []
-            this.$slots.default().forEach(child => {
-                    if (this.isTabPanel(child)) {
-                        tabs.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isTabPanel(nestedChild)) {
-                                tabs.push(nestedChild)
-                            }
-                        });
-                    }
+            return this.$slots.default().reduce((tabs, child) => {
+                if (this.isTabPanel(child)) {
+                    tabs.push(child);
+                } else if (child.children && child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isTabPanel(nestedChild)) {
+                            tabs.push(nestedChild);
+                        }
+                    });
                 }
-            )
-            return tabs;
+
+                return tabs;
+            }, []);
+        },
+        prevButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
+        },
+        nextButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
+        },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -204,7 +388,7 @@ export default {
     flex: 1 1 auto;
 }
 
-.p-tabview-nav-link {
+.p-tabview-header-action {
     cursor: pointer;
     user-select: none;
     display: flex;
@@ -219,7 +403,7 @@ export default {
     z-index: 1;
 }
 
-.p-tabview-nav-link:focus {
+.p-tabview-header-action:focus {
     z-index: 1;
 }
 
diff --git a/components/tag/Tag.d.ts b/components/tag/Tag.d.ts
index ee954644c..66bd60de2 100644
--- a/components/tag/Tag.d.ts
+++ b/components/tag/Tag.d.ts
@@ -30,14 +30,13 @@ export interface TagSlots {
     default: () => VNode[];
 }
 
-export declare type TagEmits = {
-}
+export declare type TagEmits = {};
 
-declare class Tag extends ClassComponent<TagProps, TagSlots, TagEmits> { }
+declare class Tag extends ClassComponent<TagProps, TagSlots, TagEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Tag: GlobalComponentConstructor<Tag>
+        Tag: GlobalComponentConstructor<Tag>;
     }
 }
 
@@ -47,7 +46,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Tag](https://www.primefaces.org/primevue/showcase/#/tag)
+ * - [Tag](https://www.primefaces.org/primevue/tag)
  *
  */
 export default Tag;
diff --git a/components/tag/Tag.spec.js b/components/tag/Tag.spec.js
index 595e656b8..3ebe973d4 100644
--- a/components/tag/Tag.spec.js
+++ b/components/tag/Tag.spec.js
@@ -3,47 +3,47 @@ import { mount } from '@vue/test-utils';
 import Tag from '@/components/tag/Tag.vue';
 
 describe('Tag.vue', () => {
-	it('is Tag element exist', () => {
-		const wrapper = mount(Tag);
+    it('is Tag element exist', () => {
+        const wrapper = mount(Tag);
 
-		expect(wrapper.find('.p-tag.p-component').exists()).toBe(true);
-	})
+        expect(wrapper.find('.p-tag.p-component').exists()).toBe(true);
+    });
 });
 
 describe('Tag.vue', () => {
-	it('renders props severity when passed', () => {
-		const severity = 'info';
-		const wrapper = mount(Tag, {
-			props: { severity }
-		});
+    it('renders props severity when passed', () => {
+        const severity = 'info';
+        const wrapper = mount(Tag, {
+            props: { severity }
+        });
 
-		expect(wrapper.find('.p-tag-' + severity).exists()).toBe(true);
-	})
+        expect(wrapper.find('.p-tag-' + severity).exists()).toBe(true);
+    });
 });
 
 describe('Tag.vue', () => {
-	it('renders props value when passed', () => {
-		const value = 'submit';
-		const wrapper = mount(Tag, {
-			props: { value }
-		});
+    it('renders props value when passed', () => {
+        const value = 'submit';
+        const wrapper = mount(Tag, {
+            props: { value }
+        });
 
-		expect(wrapper.find('span').text()).toBe(value);
-	})
+        expect(wrapper.find('span').text()).toBe(value);
+    });
 });
 
 describe('Tag.vue', () => {
-	it('renders props icon when passed', () => {
-		const icon = 'pi pi-discord';
-		const wrapper = mount(Tag, {
-			props: { icon }
-		});
-		const array = icon.split(' ');
-		const lastIcon = '.' + array.join('.');
+    it('renders props icon when passed', () => {
+        const icon = 'pi pi-discord';
+        const wrapper = mount(Tag, {
+            props: { icon }
+        });
+        const array = icon.split(' ');
+        const lastIcon = '.' + array.join('.');
 
-		expect(wrapper.find('.p-tag-icon').isVisible()).toBe(true);
+        expect(wrapper.find('.p-tag-icon').isVisible()).toBe(true);
         expect(wrapper.find('.p-tag-icon' + lastIcon).exists()).toBe(true);
-	})
+    });
 });
 
 describe('Tag.vue', () => {
@@ -53,17 +53,17 @@ describe('Tag.vue', () => {
         });
 
         expect(wrapper.find('.p-tag-rounded').exists()).toBe(true);
-    })
+    });
 });
 
 describe('Tag.vue', () => {
     it('should render default slot', () => {
         const wrapper = mount(Tag, {
             slots: {
-                default: h('i', {class: 'pi pi-discord'}, '')
+                default: h('i', { class: 'pi pi-discord' }, '')
             }
         });
 
         expect(wrapper.html()).toBe('<span class="p-tag p-component"><!--v-if--><i class="pi pi-discord"></i></span>');
-    })
-});
\ No newline at end of file
+    });
+});
diff --git a/components/tag/Tag.vue b/components/tag/Tag.vue
index d6fce1bcf..21d1dd9dc 100644
--- a/components/tag/Tag.vue
+++ b/components/tag/Tag.vue
@@ -1,8 +1,8 @@
 <template>
     <span :class="containerClass" v-bind="$attrs">
-        <span :class="iconClass" v-if="icon"></span>
+        <span v-if="icon" :class="iconClass"></span>
         <slot>
-            <span class="p-tag-value">{{value}}</span>
+            <span class="p-tag-value">{{ value }}</span>
         </slot>
     </span>
 </template>
@@ -18,19 +18,22 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-tag p-component', {
-                'p-tag-info': this.severity === 'info',
-                'p-tag-success': this.severity === 'success',
-                'p-tag-warning': this.severity === 'warning',
-                'p-tag-danger': this.severity === 'danger',
-                'p-tag-rounded': this.rounded
-            }];
+            return [
+                'p-tag p-component',
+                {
+                    'p-tag-info': this.severity === 'info',
+                    'p-tag-success': this.severity === 'success',
+                    'p-tag-warning': this.severity === 'warning',
+                    'p-tag-danger': this.severity === 'danger',
+                    'p-tag-rounded': this.rounded
+                }
+            ];
         },
         iconClass() {
             return ['p-tag-icon', this.icon];
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/terminal/Terminal.d.ts b/components/terminal/Terminal.d.ts
index 268e14ec6..802a212d4 100755
--- a/components/terminal/Terminal.d.ts
+++ b/components/terminal/Terminal.d.ts
@@ -11,17 +11,15 @@ export interface TerminalProps {
     prompt?: string | undefined;
 }
 
-export interface TerminalSlots {
-}
+export interface TerminalSlots {}
 
-export declare type TerminalEmits = {
-}
+export declare type TerminalEmits = {};
 
-declare class Terminal extends ClassComponent<TerminalProps, TerminalSlots, TerminalEmits> { }
+declare class Terminal extends ClassComponent<TerminalProps, TerminalSlots, TerminalEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Terminal: GlobalComponentConstructor<Terminal>
+        Terminal: GlobalComponentConstructor<Terminal>;
     }
 }
 
@@ -35,7 +33,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Terminal](https://www.primefaces.org/primevue/showcase/#/terminal)
+ * - [Terminal](https://www.primefaces.org/primevue/terminal)
  *
  */
 export default Terminal;
diff --git a/components/terminal/Terminal.spec.js b/components/terminal/Terminal.spec.js
index 7d2de4114..a3eefd355 100644
--- a/components/terminal/Terminal.spec.js
+++ b/components/terminal/Terminal.spec.js
@@ -21,13 +21,13 @@ describe('Terminal.vue', () => {
                     let argsIndex = text.indexOf(' ');
                     let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
-                    switch(command) {
-                        case "d":
+                    switch (command) {
+                        case 'd':
                             response = 'Valid command';
                             break;
 
                         default:
-                            response = "Unknown command: " + command;
+                            response = 'Unknown command: ' + command;
                     }
 
                     TerminalService.emit('response', response);
@@ -67,13 +67,13 @@ describe('Terminal.vue', () => {
                     let argsIndex = text.indexOf(' ');
                     let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
-                    switch(command) {
-                        case "d":
+                    switch (command) {
+                        case 'd':
                             response = 'Valid command';
                             break;
 
                         default:
-                            response = "Unknown command: " + command;
+                            response = 'Unknown command: ' + command;
                     }
 
                     TerminalService.emit('response', response);
@@ -94,4 +94,4 @@ describe('Terminal.vue', () => {
 
         expect(wrapper.find('.p-terminal-response').text()).toBe('Unknown command: dd');
     });
-});
\ No newline at end of file
+});
diff --git a/components/terminal/Terminal.vue b/components/terminal/Terminal.vue
index 72ae98393..e85676c94 100755
--- a/components/terminal/Terminal.vue
+++ b/components/terminal/Terminal.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="p-terminal p-component" @click="onClick">
-        <div v-if="welcomeMessage">{{welcomeMessage}}</div>
+        <div v-if="welcomeMessage">{{ welcomeMessage }}</div>
         <div class="p-terminal-content">
-            <div v-for="(command,i) of commands" :key="command.text + i.toString()">
-                <span class="p-terminal-prompt">{{prompt}}</span>
-                <span class="p-terminal-command">{{command.text}}</span>
-                <div class="p-terminal-response">{{command.response}}</div>
+            <div v-for="(command, i) of commands" :key="command.text + i.toString()">
+                <span class="p-terminal-prompt">{{ prompt }}</span>
+                <span class="p-terminal-command">{{ command.text }}</span>
+                <div class="p-terminal-response">{{ command.response }}</div>
             </div>
         </div>
         <div class="p-terminal-prompt-container">
-            <span class="p-terminal-prompt">{{prompt}}</span>
-            <input ref="input" type="text" v-model="commandText" class="p-terminal-input" autocomplete="off" @keydown="onKeydown">
+            <span class="p-terminal-prompt">{{ prompt }}</span>
+            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" />
         </div>
     </div>
 </template>
@@ -34,7 +34,7 @@ export default {
         return {
             commandText: null,
             commands: []
-        }
+        };
     },
     mounted() {
         TerminalService.on('response', this.responseListener);
@@ -52,7 +52,7 @@ export default {
         },
         onKeydown(event) {
             if (event.keyCode === 13 && this.commandText) {
-                this.commands.push({text: this.commandText});
+                this.commands.push({ text: this.commandText });
                 TerminalService.emit('command', this.commandText);
                 this.commandText = '';
             }
@@ -61,7 +61,7 @@ export default {
             this.commands[this.commands.length - 1].response = response;
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/terminalservice/TerminalService.js b/components/terminalservice/TerminalService.js
index 844a1b111..602940783 100755
--- a/components/terminalservice/TerminalService.js
+++ b/components/terminalservice/TerminalService.js
@@ -1,3 +1,3 @@
-import {EventBus} from 'primevue/utils';
+import { EventBus } from 'primevue/utils';
 
-export default EventBus();
\ No newline at end of file
+export default EventBus();
diff --git a/components/textarea/Textarea.d.ts b/components/textarea/Textarea.d.ts
index 2737885ca..c30e9cb18 100755
--- a/components/textarea/Textarea.d.ts
+++ b/components/textarea/Textarea.d.ts
@@ -12,8 +12,7 @@ export interface TextareaProps extends TextareaHTMLAttributes {
     autoResize?: boolean | undefined;
 }
 
-export interface TextareaSlots {
-}
+export interface TextareaSlots {}
 
 export declare type TextareaEmits = {
     /**
@@ -21,13 +20,13 @@ export declare type TextareaEmits = {
      * @param {string} value - New value.
      */
     'update:modelValue': (value: string) => void;
-}
+};
 
-declare class Textarea extends ClassComponent<TextareaProps, TextareaSlots, TextareaEmits> { }
+declare class Textarea extends ClassComponent<TextareaProps, TextareaSlots, TextareaEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Textarea: GlobalComponentConstructor<Textarea>
+        Textarea: GlobalComponentConstructor<Textarea>;
     }
 }
 
@@ -37,7 +36,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Textarea](https://www.primefaces.org/primevue/showcase/#/textarea)
+ * - [Textarea](https://www.primefaces.org/primevue/textarea)
  *
  */
 export default Textarea;
diff --git a/components/textarea/Textarea.spec.js b/components/textarea/Textarea.spec.js
index f7150ef63..c15df7aec 100644
--- a/components/textarea/Textarea.spec.js
+++ b/components/textarea/Textarea.spec.js
@@ -34,11 +34,11 @@ describe('Textarea.vue', () => {
 
     it('should resize', async () => {
         const firstHeight = wrapper.attributes().style;
-        
+
         await wrapper.setProps({ autoResize: true });
 
         await wrapper.vm.onInput({ target: { value: 'primevue' } });
 
         expect(wrapper.attributes().style).not.toEqual(firstHeight);
     });
-});
\ No newline at end of file
+});
diff --git a/components/textarea/Textarea.vue b/components/textarea/Textarea.vue
index 7b1330c9e..ac7024031 100755
--- a/components/textarea/Textarea.vue
+++ b/components/textarea/Textarea.vue
@@ -1,5 +1,5 @@
 <template>
-    <textarea :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" :value="modelValue" @input="onInput"></textarea>
+    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput"></textarea>
 </template>
 
 <script>
@@ -23,15 +23,15 @@ export default {
     methods: {
         resize() {
             const style = window.getComputedStyle(this.$el);
+
             this.$el.style.height = 'auto';
             this.$el.style.height = `calc(${style.borderTopWidth} + ${style.borderBottomWidth} + ${this.$el.scrollHeight}px)`;
 
             if (parseFloat(this.$el.style.height) >= parseFloat(this.$el.style.maxHeight)) {
-                this.$el.style.overflowY = "scroll";
+                this.$el.style.overflowY = 'scroll';
                 this.$el.style.height = this.$el.style.maxHeight;
-            }
-            else {
-                this.$el.style.overflow = "hidden";
+            } else {
+                this.$el.style.overflow = 'hidden';
             }
         },
         onInput(event) {
@@ -44,10 +44,10 @@ export default {
     },
     computed: {
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/tieredmenu/TieredMenu.d.ts b/components/tieredmenu/TieredMenu.d.ts
index 0212a236c..4af08e7dc 100755
--- a/components/tieredmenu/TieredMenu.d.ts
+++ b/components/tieredmenu/TieredMenu.d.ts
@@ -49,8 +49,7 @@ export interface TieredMenuSlots {
     }) => VNode[];
 }
 
-export declare type TieredMenuEmits = {
-}
+export declare type TieredMenuEmits = {};
 
 declare class TieredMenu extends ClassComponent<TieredMenuProps, TieredMenuSlots, TieredMenuEmits> {
     /**
@@ -77,7 +76,7 @@ declare class TieredMenu extends ClassComponent<TieredMenuProps, TieredMenuSlots
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TieredMenu: GlobalComponentConstructor<TieredMenu>
+        TieredMenu: GlobalComponentConstructor<TieredMenu>;
     }
 }
 
@@ -87,11 +86,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [TieredMenu](https://www.primefaces.org/primevue/showcase/#/tieredmenu)
+ * - [TieredMenu](https://www.primefaces.org/primevue/tieredmenu)
  *
  */
 export default TieredMenu;
diff --git a/components/tieredmenu/TieredMenu.vue b/components/tieredmenu/TieredMenu.vue
index 44b91f16e..a8766c1ad 100755
--- a/components/tieredmenu/TieredMenu.vue
+++ b/components/tieredmenu/TieredMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="popup ? visible : true" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import TieredMenuSub from './TieredMenuSub.vue';
@@ -22,7 +22,7 @@ export default {
             type: Boolean,
             default: false
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -61,26 +61,29 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.target = null;
+
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (item.command) {
                 item.command(event);
                 event.originalEvent.preventDefault();
             }
+
             this.hide();
         },
         toggle(event) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.visible) this.hide();
+            else this.show(event);
         },
         show(event) {
             this.visible = true;
@@ -120,6 +123,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -152,6 +156,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -181,18 +186,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-tieredmenu p-component', {
-                'p-tieredmenu-overlay': this.popup,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-tieredmenu p-component',
+                {
+                    'p-tieredmenu-overlay': this.popup,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'TieredMenuSub': TieredMenuSub,
-        'Portal': Portal
+        TieredMenuSub: TieredMenuSub,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
diff --git a/components/tieredmenu/TieredMenuSub.vue b/components/tieredmenu/TieredMenuSub.vue
index 7b7071005..f8319e933 100755
--- a/components/tieredmenu/TieredMenuSub.vue
+++ b/components/tieredmenu/TieredMenuSub.vue
@@ -1,33 +1,42 @@
 <template>
     <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
         <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
-                @mouseenter="onItemMouseEnter($event, item)" role="none">
+            <li v-if="visible(item) && !item.separator" :class="getItemClass(item)" :style="item.style" @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <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" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
-                            <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                        <a v-ripple :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, { isActive, isExactActive })" @keydown="onItemKeyDown($event, item)" role="menuitem">
+                            <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                        <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                        <span class="p-menuitem-text">{{label(item)}}</span>
-                        <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
+                    <a
+                        v-else
+                        v-ripple
+                        :href="item.url"
+                        :class="linkClass(item)"
+                        :target="item.target"
+                        :aria-haspopup="item.items != null"
+                        :aria-expanded="item === activeItem"
+                        @click="onItemClick($event, item)"
+                        @keydown="onItemKeyDown($event, item)"
+                        role="menuitem"
+                        :tabindex="disabled(item) ? null : '0'"
+                    >
+                        <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                        <span class="p-menuitem-text">{{ label(item) }}</span>
+                        <span v-if="item.items" class="p-submenu-icon pi pi-angle-right"></span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
-                <TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
-                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
+                <TieredMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+            <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
         </template>
     </ul>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -60,6 +69,11 @@ export default {
         }
     },
     documentClickListener: null,
+    data() {
+        return {
+            activeItem: null
+        };
+    },
     watch: {
         parentActive(newValue) {
             if (!newValue) {
@@ -67,11 +81,6 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
     updated() {
         if (this.root && this.activeItem) {
             this.bindDocumentClickListener();
@@ -84,6 +93,7 @@ export default {
         onItemMouseEnter(event, item) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -91,14 +101,14 @@ export default {
                 if (this.activeItem || this.popup) {
                     this.activeItem = item;
                 }
-            }
-            else {
+            } else {
                 this.activeItem = item;
             }
         },
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -110,10 +120,8 @@ export default {
             }
 
             if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
+                if (this.activeItem && item === this.activeItem) this.activeItem = null;
+                else this.activeItem = item;
             }
 
             if (!item.items) {
@@ -135,22 +143,24 @@ export default {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //right
                 case 39:
@@ -163,10 +173,10 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
 
             this.$emit('keydown-item', {
@@ -184,32 +194,33 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         getItemClass(item) {
             return [
-                'p-menuitem', item.class, {
+                'p-menuitem',
+                item.class,
+                {
                     'p-menuitem-active': this.activeItem === item
                 }
-            ]
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -230,22 +241,22 @@ export default {
             }
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root};
+            return { 'p-submenu-list': !this.root };
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/timeline/Timeline.d.ts b/components/timeline/Timeline.d.ts
index a984889e8..f62fb39c9 100644
--- a/components/timeline/Timeline.d.ts
+++ b/components/timeline/Timeline.d.ts
@@ -90,14 +90,13 @@ export interface TimelineSlots {
     }) => VNode[];
 }
 
-export declare type TimelineEmits = {
-}
+export declare type TimelineEmits = {};
 
-declare class Timeline extends ClassComponent<TimelineProps, TimelineSlots, TimelineEmits> { }
+declare class Timeline extends ClassComponent<TimelineProps, TimelineSlots, TimelineEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Timeline: GlobalComponentConstructor<Timeline>
+        Timeline: GlobalComponentConstructor<Timeline>;
     }
 }
 
@@ -107,7 +106,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Timeline](https://www.primefaces.org/primevue/showcase/#/timeline)
+ * - [Timeline](https://www.primefaces.org/primevue/timeline)
  *
  */
 export default Timeline;
diff --git a/components/timeline/Timeline.spec.js b/components/timeline/Timeline.spec.js
index c5c9b422d..8535db71e 100644
--- a/components/timeline/Timeline.spec.js
+++ b/components/timeline/Timeline.spec.js
@@ -8,10 +8,10 @@ describe('Timeline.vue', () => {
         wrapper = mount(Timeline, {
             props: {
                 value: [
-                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
-                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
-                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
-                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+                    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
                 ]
             },
             slots: {
@@ -65,10 +65,10 @@ describe('customized timeline', () => {
             },
             props: {
                 value: [
-                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
-                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
-                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
-                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+                    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
                 ]
             }
         });
@@ -80,4 +80,4 @@ describe('customized timeline', () => {
         expect(firstItem.find('.p-text-secondary').text()).toBe('15/10/2020 10:30');
         expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe('');
     });
-});
\ No newline at end of file
+});
diff --git a/components/timeline/Timeline.vue b/components/timeline/Timeline.vue
index d2eb3b9be..1ddf00d10 100644
--- a/components/timeline/Timeline.vue
+++ b/components/timeline/Timeline.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <div v-for="(item,index) of value" :key="getKey(item, index)" class="p-timeline-event">
+        <div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event">
             <div class="p-timeline-event-opposite">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
@@ -8,7 +8,7 @@
                 <slot name="marker" :item="item" :index="index">
                     <div class="p-timeline-event-marker"></div>
                 </slot>
-                <slot name="connector" v-if="index !== (value.length - 1)" :item="item" :index="index">
+                <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
                     <div class="p-timeline-event-connector"></div>
                 </slot>
             </div>
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Timeline',
@@ -43,14 +43,10 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
-                'p-timeline p-component',
-                'p-timeline-' + this.align,
-                'p-timeline-' + this.layout
-            ];
+            return ['p-timeline p-component', 'p-timeline-' + this.align, 'p-timeline-' + this.layout];
         }
     }
-}
+};
 </script>
 
 <style>
@@ -153,7 +149,7 @@ export default {
     flex-direction: row;
 }
 
-.p-timeline-horizontal .p-timeline-event-connector  {
+.p-timeline-horizontal .p-timeline-event-connector {
     width: 100%;
 }
 
diff --git a/components/toast/Toast.d.ts b/components/toast/Toast.d.ts
index d1abb5faa..4a9916f09 100755
--- a/components/toast/Toast.d.ts
+++ b/components/toast/Toast.d.ts
@@ -89,24 +89,21 @@ export interface ToastSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message: (
-        scope: {
-            /**
-             * Message of the component
-             */
-            message: any;
-        }
-    ) => VNode[];
+    message: (scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+    }) => VNode[];
 }
 
-export declare type ToastEmits = {
-}
+export declare type ToastEmits = {};
 
-declare class Toast extends ClassComponent<ToastProps, ToastSlots, ToastEmits> { }
+declare class Toast extends ClassComponent<ToastProps, ToastSlots, ToastEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Toast: GlobalComponentConstructor<Toast>
+        Toast: GlobalComponentConstructor<Toast>;
     }
 }
 
@@ -120,7 +117,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Toast](https://www.primefaces.org/primevue/showcase/#/toast)
+ * - [Toast](https://www.primefaces.org/primevue/toast)
  *
  */
 export default Toast;
diff --git a/components/toast/Toast.spec.js b/components/toast/Toast.spec.js
index 1c5ac9985..ea592cfd7 100644
--- a/components/toast/Toast.spec.js
+++ b/components/toast/Toast.spec.js
@@ -10,7 +10,7 @@ describe('Toast.vue', () => {
                 mocks: {
                     $primevue: {
                         config: {
-                            'ripple': true
+                            ripple: true
                         }
                     }
                 },
@@ -20,10 +20,10 @@ describe('Toast.vue', () => {
             },
             data() {
                 return {
-                    messages: [{severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000}]
-                }
+                    messages: [{ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 }]
+                };
             }
-        })
+        });
     });
 
     it('should exist', () => {
@@ -46,7 +46,7 @@ describe('Toast.vue', () => {
     });
 
     it('should close toast', async () => {
-        await wrapper.vm.remove({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
+        await wrapper.vm.remove({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
 
         expect(wrapper.find('.p-toast-message').exists()).toBe(false);
     });
@@ -54,9 +54,9 @@ describe('Toast.vue', () => {
     it('should show multiple toast', async () => {
         await wrapper.setData({
             messages: [
-                {severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000},
-                {severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000},
-                {severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000}
+                { severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 },
+                { severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 },
+                { severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }
             ]
         });
 
@@ -66,9 +66,9 @@ describe('Toast.vue', () => {
     it('should close multiple toast', async () => {
         await wrapper.setData({
             messages: [
-                {severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000},
-                {severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000},
-                {severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000}
+                { severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 },
+                { severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 },
+                { severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }
             ]
         });
 
@@ -84,4 +84,4 @@ describe('Toast.vue', () => {
 
         expect(wrapper.findAll('.p-toast-message').length).toBe(0);
     });
-});
\ No newline at end of file
+});
diff --git a/components/toast/Toast.vue b/components/toast/Toast.vue
index dd4ae63eb..c13de320a 100755
--- a/components/toast/Toast.vue
+++ b/components/toast/Toast.vue
@@ -2,7 +2,7 @@
     <Portal>
         <div ref="container" :class="containerClass" v-bind="$attrs">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
-                <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
+                <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message" />
             </transition-group>
         </div>
     </Portal>
@@ -11,7 +11,7 @@
 <script>
 import ToastEventBus from 'primevue/toasteventbus';
 import ToastMessage from './ToastMessage.vue';
-import {ZIndexUtils,UniqueComponentId,ObjectUtils} from 'primevue/utils';
+import { ZIndexUtils, UniqueComponentId, ObjectUtils } from 'primevue/utils';
 import Portal from 'primevue/portal';
 
 var messageIdx = 0;
@@ -44,7 +44,7 @@ export default {
     data() {
         return {
             messages: []
-        }
+        };
     },
     styleElement: null,
     mounted() {
@@ -77,6 +77,7 @@ export default {
         },
         remove(message) {
             let index = -1;
+
             for (let i = 0; i < this.messages.length; i++) {
                 if (this.messages[i] === message) {
                     index = i;
@@ -118,11 +119,14 @@ export default {
                 document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     let breakpointStyle = '';
+
                     for (let styleProp in this.breakpoints[breakpoint]) {
                         breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
                     }
+
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-toast[${this.attributeSelector}] {
@@ -142,22 +146,25 @@ export default {
             }
         }
     },
-    components: {
-        'ToastMessage': ToastMessage,
-        'Portal': Portal
-    },
     computed: {
         containerClass() {
-            return ['p-toast p-component p-toast-' + this.position, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-toast p-component p-toast-' + this.position,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         attributeSelector() {
             return UniqueComponentId();
         }
+    },
+    components: {
+        ToastMessage: ToastMessage,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -176,40 +183,40 @@ export default {
 }
 
 .p-toast-top-right {
-	top: 20px;
-	right: 20px;
+    top: 20px;
+    right: 20px;
 }
 
 .p-toast-top-left {
-	top: 20px;
-	left: 20px;
+    top: 20px;
+    left: 20px;
 }
 
 .p-toast-bottom-left {
-	bottom: 20px;
-	left: 20px;
+    bottom: 20px;
+    left: 20px;
 }
 
 .p-toast-bottom-right {
-	bottom: 20px;
-	right: 20px;
+    bottom: 20px;
+    right: 20px;
 }
 
 .p-toast-top-center {
-	top: 20px;
+    top: 20px;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-bottom-center {
-	bottom: 20px;
+    bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-center {
-	left: 50%;
-	top: 50%;
+    left: 50%;
+    top: 50%;
     min-width: 20vw;
     transform: translate(-50%, -50%);
 }
@@ -223,7 +230,7 @@ export default {
 }
 
 .p-toast-icon-close.p-link {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 /* Animations */
@@ -246,12 +253,12 @@ export default {
 }
 
 .p-toast-message-enter-active {
-    -webkit-transition: transform .3s, opacity .3s;
-    transition: transform .3s, opacity .3s;
+    -webkit-transition: transform 0.3s, opacity 0.3s;
+    transition: transform 0.3s, opacity 0.3s;
 }
 
 .p-toast-message-leave-active {
-    -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
-    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
+    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
 }
 </style>
diff --git a/components/toast/ToastMessage.vue b/components/toast/ToastMessage.vue
index 15f8acafb..d1ea77cb9 100755
--- a/components/toast/ToastMessage.vue
+++ b/components/toast/ToastMessage.vue
@@ -4,12 +4,12 @@
             <template v-if="!template">
                 <span :class="iconClass"></span>
                 <div class="p-toast-message-text">
-                    <span class="p-toast-summary">{{message.summary}}</span>
-                    <div class="p-toast-detail">{{message.detail}}</div>
+                    <span class="p-toast-summary">{{ message.summary }}</span>
+                    <div class="p-toast-detail">{{ message.detail }}</div>
                 </div>
             </template>
             <component v-else :is="template" :message="message"></component>
-            <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button" v-ripple>
+            <button v-if="message.closable !== false" v-ripple class="p-toast-icon-close p-link" @click="onCloseClick" type="button">
                 <span class="p-toast-icon-close-icon pi pi-times"></span>
             </button>
         </div>
@@ -31,7 +31,7 @@ export default {
         if (this.message.life) {
             this.closeTimeout = setTimeout(() => {
                 this.close();
-            }, this.message.life)
+            }, this.message.life);
         }
     },
     beforeUnmount() {
@@ -54,24 +54,31 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-toast-message', this.message.styleClass, {
-                'p-toast-message-info': this.message.severity === 'info',
-                'p-toast-message-warn': this.message.severity === 'warn',
-                'p-toast-message-error': this.message.severity === 'error',
-                'p-toast-message-success': this.message.severity === 'success'
-            }];
+            return [
+                'p-toast-message',
+                this.message.styleClass,
+                {
+                    'p-toast-message-info': this.message.severity === 'info',
+                    'p-toast-message-warn': this.message.severity === 'warn',
+                    'p-toast-message-error': this.message.severity === 'error',
+                    'p-toast-message-success': this.message.severity === 'success'
+                }
+            ];
         },
         iconClass() {
-            return ['p-toast-message-icon pi', {
-                'pi-info-circle': this.message.severity === 'info',
-                'pi-exclamation-triangle': this.message.severity === 'warn',
-                'pi-times': this.message.severity === 'error',
-                'pi-check': this.message.severity === 'success'
-            }];
+            return [
+                'p-toast-message-icon pi',
+                {
+                    'pi-info-circle': this.message.severity === 'info',
+                    'pi-exclamation-triangle': this.message.severity === 'warn',
+                    'pi-times': this.message.severity === 'error',
+                    'pi-check': this.message.severity === 'success'
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/toasteventbus/ToastEventBus.js b/components/toasteventbus/ToastEventBus.js
index 844a1b111..602940783 100755
--- a/components/toasteventbus/ToastEventBus.js
+++ b/components/toasteventbus/ToastEventBus.js
@@ -1,3 +1,3 @@
-import {EventBus} from 'primevue/utils';
+import { EventBus } from 'primevue/utils';
 
-export default EventBus();
\ No newline at end of file
+export default EventBus();
diff --git a/components/toastservice/ToastService.js b/components/toastservice/ToastService.js
index 87b82303d..9890fd6d2 100755
--- a/components/toastservice/ToastService.js
+++ b/components/toastservice/ToastService.js
@@ -1,5 +1,5 @@
 import ToastEventBus from 'primevue/toasteventbus';
-import {PrimeVueToastSymbol} from 'primevue/usetoast';
+import { PrimeVueToastSymbol } from 'primevue/usetoast';
 
 export default {
     install: (app) => {
@@ -14,7 +14,8 @@ export default {
                 ToastEventBus.emit('remove-all-groups');
             }
         };
+
         app.config.globalProperties.$toast = ToastService;
         app.provide(PrimeVueToastSymbol, ToastService);
     }
-}
\ No newline at end of file
+};
diff --git a/components/togglebutton/ToggleButton.d.ts b/components/togglebutton/ToggleButton.d.ts
index b55353269..ddc94fd4b 100755
--- a/components/togglebutton/ToggleButton.d.ts
+++ b/components/togglebutton/ToggleButton.d.ts
@@ -66,8 +66,7 @@ export interface ToggleButtonProps {
     'aria-label'?: string | undefined;
 }
 
-export interface ToggleButtonSlots {
-}
+export interface ToggleButtonSlots {}
 
 export declare type ToggleButtonEmits = {
     /**
@@ -79,24 +78,24 @@ export declare type ToggleButtonEmits = {
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
+    change: (event: Event) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
-}
+    blur: (event: Event) => void;
+};
 
-declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> { }
+declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ToggleButton: GlobalComponentConstructor<ToggleButton>
+        ToggleButton: GlobalComponentConstructor<ToggleButton>;
     }
 }
 
@@ -106,7 +105,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ToggleButton](https://www.primefaces.org/primevue/showcase/#/togglebutton)
+ * - [ToggleButton](https://www.primefaces.org/primevue/togglebutton)
  *
  */
 export default ToggleButton;
diff --git a/components/togglebutton/ToggleButton.spec.js b/components/togglebutton/ToggleButton.spec.js
index b2033ef9e..ec785ec31 100644
--- a/components/togglebutton/ToggleButton.spec.js
+++ b/components/togglebutton/ToggleButton.spec.js
@@ -21,7 +21,7 @@ describe('ToggleButton', () => {
 
     it('should have onIcon', async () => {
         await wrapper.setProps({ modelValue: true });
-        
+
         expect(wrapper.find('span.pi-check').exists()).toBe(true);
     });
 
@@ -51,4 +51,4 @@ describe('ToggleButton', () => {
 
         expect(wrapper.find('.p-button-label').text()).toBe('I reject');
     });
-});
\ No newline at end of file
+});
diff --git a/components/togglebutton/ToggleButton.vue b/components/togglebutton/ToggleButton.vue
index 07dc0be48..8783f665e 100755
--- a/components/togglebutton/ToggleButton.vue
+++ b/components/togglebutton/ToggleButton.vue
@@ -1,11 +1,23 @@
 <template>
-    <div :class="buttonClass" @click="onClick($event)" v-ripple>
+    <div v-ripple :class="buttonClass" @click="onClick($event)">
         <span class="p-hidden-accessible">
-            <input type="checkbox" role="switch" :id="inputId" :class="inputClass" :style="inputStyle" :checked="modelValue" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+            <input
+                :id="inputId"
+                type="checkbox"
+                role="switch"
+                :class="inputClass"
+                :style="inputStyle"
+                :checked="modelValue"
+                :value="modelValue"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </span>
         <span v-if="hasIcon" :class="iconClass"></span>
-        <span class="p-button-label">{{label}}</span>
+        <span class="p-button-label">{{ label }}</span>
     </div>
 </template>
 
@@ -17,8 +29,8 @@ export default {
     emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
-		onIcon: String,
-		offIcon: String,
+        onIcon: String,
+        offIcon: String,
         onLabel: {
             type: String,
             default: 'Yes'
@@ -39,13 +51,25 @@ export default {
             type: Number,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -74,17 +98,17 @@ export default {
                 'p-button-icon-only': this.hasIcon && !this.hasLabel,
                 'p-disabled': this.disabled,
                 'p-highlight': this.modelValue === true
-            }
+            };
         },
         iconClass() {
             return [
-                this.modelValue ? this.onIcon: this.offIcon,
+                this.modelValue ? this.onIcon : this.offIcon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
                     'p-button-icon-right': this.iconPos === 'right' && this.label
                 }
-            ]
+            ];
         },
         hasLabel() {
             return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
@@ -93,11 +117,11 @@ export default {
             return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
         },
         label() {
-            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel): '&nbsp;';
+            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/components/toolbar/Toolbar.d.ts b/components/toolbar/Toolbar.d.ts
index d3a7e1991..44ffa7ae7 100755
--- a/components/toolbar/Toolbar.d.ts
+++ b/components/toolbar/Toolbar.d.ts
@@ -2,6 +2,10 @@ import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface ToolbarProps {
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    'aria-labelledby'?: string | undefined;
 }
 
 export interface ToolbarSlots {
@@ -15,14 +19,13 @@ export interface ToolbarSlots {
     end: () => VNode[];
 }
 
-export declare type ToolbarEmits = {
-}
+export declare type ToolbarEmits = {};
 
-declare class Toolbar extends ClassComponent<ToolbarProps, ToolbarSlots, ToolbarEmits> { }
+declare class Toolbar extends ClassComponent<ToolbarProps, ToolbarSlots, ToolbarEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Toolbar: GlobalComponentConstructor<Toolbar>
+        Toolbar: GlobalComponentConstructor<Toolbar>;
     }
 }
 
@@ -32,7 +35,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Toolbar](https://www.primefaces.org/primevue/showcase/#/toolbar)
+ * - [Toolbar](https://www.primefaces.org/primevue/toolbar)
  *
  */
 export default Toolbar;
diff --git a/components/toolbar/Toolbar.vue b/components/toolbar/Toolbar.vue
index 8fb5b2a1f..ddd48ddb9 100755
--- a/components/toolbar/Toolbar.vue
+++ b/components/toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-toolbar p-component" role="toolbar">
+    <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby">
         <div class="p-toolbar-group-left">
             <slot name="start"></slot>
         </div>
@@ -11,8 +11,14 @@
 
 <script>
 export default {
-    name: 'Toolbar'
-}
+    name: 'Toolbar',
+    props: {
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    }
+};
 </script>
 
 <style>
diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 28d378723..c8934cc94 100755
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -1,12 +1,12 @@
-import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
+import { UniqueComponentId, DomHandler, ObjectUtils, ConnectedOverlayScrollHandler, ZIndexUtils } from 'primevue/utils';
 
 function bindEvents(el) {
     const modifiers = el.$_ptooltipModifiers;
+
     if (modifiers.focus) {
         el.addEventListener('focus', onFocus);
         el.addEventListener('blur', onBlur);
-    }
-    else {
+    } else {
         el.addEventListener('mouseenter', onMouseEnter);
         el.addEventListener('mouseleave', onMouseLeave);
         el.addEventListener('click', onClick);
@@ -15,11 +15,11 @@ function bindEvents(el) {
 
 function unbindEvents(el) {
     const modifiers = el.$_ptooltipModifiers;
+
     if (modifiers.focus) {
         el.removeEventListener('focus', onFocus);
         el.removeEventListener('blur', onBlur);
-    }
-    else {
+    } else {
         el.removeEventListener('mouseenter', onMouseEnter);
         el.removeEventListener('mouseleave', onMouseLeave);
         el.removeEventListener('click', onClick);
@@ -28,7 +28,7 @@ function unbindEvents(el) {
 
 function bindScrollListener(el) {
     if (!el.$_ptooltipScrollHandler) {
-        el.$_ptooltipScrollHandler = new ConnectedOverlayScrollHandler(el, function() {
+        el.$_ptooltipScrollHandler = new ConnectedOverlayScrollHandler(el, function () {
             hide(el);
         });
     }
@@ -68,6 +68,7 @@ function show(el) {
     }
 
     let tooltipElement = create(el);
+
     align(el);
     DomHandler.fadeIn(tooltipElement, 250);
 
@@ -75,6 +76,7 @@ function show(el) {
         if (!DomHandler.isTouchDevice()) {
             hide(el);
         }
+
         this.removeEventListener('resize', onWindowResize);
     });
 
@@ -93,23 +95,25 @@ function getTooltipElement(el) {
 
 function create(el) {
     const id = UniqueComponentId() + '_tooltip';
+
     el.$_ptooltipId = id;
 
     let container = document.createElement('div');
+
     container.id = id;
 
     let tooltipArrow = document.createElement('div');
+
     tooltipArrow.className = 'p-tooltip-arrow';
     container.appendChild(tooltipArrow);
 
     let tooltipText = document.createElement('div');
-    tooltipText.className = 'p-tooltip-text';
 
+    tooltipText.className = 'p-tooltip-text';
 
     if (el.$_ptooltipEscape) {
         tooltipText.innerHTML = el.$_ptooltipValue;
-    }
-    else {
+    } else {
         tooltipText.innerHTML = '';
         tooltipText.appendChild(document.createTextNode(el.$_ptooltipValue));
     }
@@ -129,10 +133,12 @@ function create(el) {
 function remove(el) {
     if (el) {
         let tooltipElement = getTooltipElement(el);
+
         if (tooltipElement && tooltipElement.parentElement) {
             ZIndexUtils.clear(tooltipElement);
             document.body.removeChild(tooltipElement);
         }
+
         el.$_ptooltipId = null;
     }
 }
@@ -142,6 +148,7 @@ function align(el) {
 
     if (modifiers.top) {
         alignTop(el);
+
         if (isOutOfBounds(el)) {
             alignBottom(el);
 
@@ -149,9 +156,9 @@ function align(el) {
                 alignTop(el);
             }
         }
-    }
-    else if (modifiers.left) {
+    } else if (modifiers.left) {
         alignLeft(el);
+
         if (isOutOfBounds(el)) {
             alignRight(el);
 
@@ -167,9 +174,9 @@ function align(el) {
                 }
             }
         }
-    }
-    else if (modifiers.bottom) {
+    } else if (modifiers.bottom) {
         alignBottom(el);
+
         if (isOutOfBounds(el)) {
             alignTop(el);
 
@@ -177,9 +184,9 @@ function align(el) {
                 alignBottom(el);
             }
         }
-    }
-    else {
+    } else {
         alignRight(el);
+
         if (isOutOfBounds(el)) {
             alignLeft(el);
 
@@ -203,7 +210,7 @@ function getHostOffset(el) {
     let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
     let targetTop = offset.top + DomHandler.getWindowScrollTop();
 
-    return {left: targetLeft, top: targetTop};
+    return { left: targetLeft, top: targetTop };
 }
 
 function alignRight(el) {
@@ -212,6 +219,7 @@ function alignRight(el) {
     let hostOffset = getHostOffset(el);
     let left = hostOffset.left + DomHandler.getOuterWidth(el);
     let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+
     tooltipElement.style.left = left + 'px';
     tooltipElement.style.top = top + 'px';
 }
@@ -222,6 +230,7 @@ function alignLeft(el) {
     let hostOffset = getHostOffset(el);
     let left = hostOffset.left - DomHandler.getOuterWidth(tooltipElement);
     let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+
     tooltipElement.style.left = left + 'px';
     tooltipElement.style.top = top + 'px';
 }
@@ -232,6 +241,7 @@ function alignTop(el) {
     let hostOffset = getHostOffset(el);
     let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
     let top = hostOffset.top - DomHandler.getOuterHeight(tooltipElement);
+
     tooltipElement.style.left = left + 'px';
     tooltipElement.style.top = top + 'px';
 }
@@ -242,15 +252,17 @@ function alignBottom(el) {
     let hostOffset = getHostOffset(el);
     let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
     let top = hostOffset.top + DomHandler.getOuterHeight(el);
+
     tooltipElement.style.left = left + 'px';
     tooltipElement.style.top = top + 'px';
 }
 
 function preAlign(el, position) {
     let tooltipElement = getTooltipElement(el);
+
     tooltipElement.style.left = -999 + 'px';
     tooltipElement.style.top = -999 + 'px';
-    tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass||''}`;
+    tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
 }
 
 function isOutOfBounds(el) {
@@ -262,11 +274,11 @@ function isOutOfBounds(el) {
     let height = DomHandler.getOuterHeight(tooltipElement);
     let viewport = DomHandler.getViewport();
 
-    return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
+    return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
 }
 
 function getTarget(el) {
-    return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input'): el;
+    return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input') : el;
 }
 
 function getModifiers(options) {
@@ -279,6 +291,7 @@ function getModifiers(options) {
     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;
         }, {});
     }
@@ -289,6 +302,7 @@ function getModifiers(options) {
 const Tooltip = {
     beforeMount(el, options) {
         let target = getTarget(el);
+
         target.$_ptooltipModifiers = getModifiers(options);
 
         if (!options.value) return;
@@ -298,9 +312,8 @@ const Tooltip = {
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
             target.$_ptooltipFitContent = true;
-        }
-        else if (typeof options.value === 'object' && options.value) {
-            if (options.value.value === undefined || options.value.value === null || options.value.value.trim() === '') return;
+        } else if (typeof options.value === 'object' && options.value) {
+            if (ObjectUtils.isEmpty(options.value.value)) return;
             else {
                 /* eslint-disable */
                 target.$_ptooltipValue = options.value.value;
@@ -336,9 +349,8 @@ const Tooltip = {
             target.$_ptooltipDisabled = false;
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
-        }
-        else if (typeof options.value === 'object' && options.value) {
-            if (options.value.value === undefined || options.value.value === null || options.value.value.trim() === '') return;
+        } else if (typeof options.value === 'object' && options.value) {
+            if (ObjectUtils.isEmpty(options.value.value)) return;
             else {
                 /* eslint-disable */
                 target.$_ptooltipValue = options.value.value;
diff --git a/components/tree/Tree.d.ts b/components/tree/Tree.d.ts
index 919ae69fb..4c55bb29f 100755
--- a/components/tree/Tree.d.ts
+++ b/components/tree/Tree.d.ts
@@ -149,9 +149,9 @@ export declare type TreeEmits = {
      */
     'update:expandedKeys': (value: TreeExpandedKeys) => void;
     /**
-      * Emitted when the selection keys change.
-      * @param {TreeSelectionKeys} value - New selection keys.
-      */
+     * Emitted when the selection keys change.
+     * @param {TreeSelectionKeys} value - New selection keys.
+     */
     'update:selectionKeys': (event: TreeSelectionKeys) => void;
     /**
      * Callback to invoke when a node is selected.
@@ -173,13 +173,13 @@ export declare type TreeEmits = {
      * @param {TreeNode} node - Node instance.
      */
     'node-collapse': (node: TreeNode) => void;
-}
+};
 
-declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> { }
+declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Tree: GlobalComponentConstructor<Tree>
+        Tree: GlobalComponentConstructor<Tree>;
     }
 }
 
@@ -193,7 +193,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Tree](https://www.primefaces.org/primevue/showcase/#/tree)
+ * - [Tree](https://www.primefaces.org/primevue/tree)
  *
  */
 export default Tree;
diff --git a/components/tree/Tree.vue b/components/tree/Tree.vue
index 5d4430431..863b27d50 100755
--- a/components/tree/Tree.vue
+++ b/components/tree/Tree.vue
@@ -5,16 +5,26 @@
                 <i :class="loadingIconClass" />
             </div>
         </template>
-        <div class="p-tree-filter-container" v-if="filter">
-            <input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder"
-                @keydown="onFilterKeydown" v-model="filterValue" />
+        <div v-if="filter" class="p-tree-filter-container">
+            <input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" />
             <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
-        <div class="p-tree-wrapper" :style="{maxHeight: scrollHeight}">
+        <div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }">
             <ul class="p-tree-container" role="tree">
-                <TreeNode v-for="(node, index) of valueToRender" :key="node.key" :node="node" :templates="$slots" :level="level + 1" :index="index"
-                    :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
-                    :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
+                <TreeNode
+                    v-for="(node, index) of valueToRender"
+                    :key="node.key"
+                    :node="node"
+                    :templates="$slots"
+                    :level="level + 1"
+                    :index="index"
+                    :expandedKeys="d_expandedKeys"
+                    @node-toggle="onNodeToggle"
+                    @node-click="onNodeClick"
+                    :selectionMode="selectionMode"
+                    :selectionKeys="selectionKeys"
+                    @checkbox-change="onCheckboxChange"
+                ></TreeNode>
             </ul>
         </div>
     </div>
@@ -22,7 +32,7 @@
 
 <script>
 import TreeNode from './TreeNode.vue';
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Tree',
@@ -89,7 +99,7 @@ export default {
         return {
             d_expandedKeys: this.expandedKeys || {},
             filterValue: null
-        }
+        };
     },
     watch: {
         expandedKeys(newValue) {
@@ -103,13 +113,12 @@ export default {
             if (this.d_expandedKeys[key]) {
                 delete this.d_expandedKeys[key];
                 this.$emit('node-collapse', node);
-            }
-            else {
+            } else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
             }
 
-            this.d_expandedKeys = {...this.d_expandedKeys};
+            this.d_expandedKeys = { ...this.d_expandedKeys };
             this.$emit('update:expandedKeys', this.d_expandedKeys);
         },
         onNodeClick(event) {
@@ -123,35 +132,30 @@ export default {
         onCheckboxChange(event) {
             this.$emit('update:selectionKeys', event.selectionKeys);
 
-            if (event.check)
-                this.$emit('node-select', event.node);
-            else
-                this.$emit('node-unselect', event.node);
+            if (event.check) this.$emit('node-select', event.node);
+            else this.$emit('node-unselect', event.node);
         },
         handleSelectionWithMetaKey(event) {
             const originalEvent = event.originalEvent;
             const node = event.node;
-            const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
 
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else {
-                    _selectionKeys = {...this.selectionKeys};
+                } else {
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
                 }
 
                 this.$emit('node-unselect', node);
-            }
-            else {
+            } else {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else if (this.isMultipleSelectionMode()) {
-                    _selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {});
+                } else if (this.isMultipleSelectionMode()) {
+                    _selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
                 }
 
                 _selectionKeys[node.key] = true;
@@ -169,22 +173,19 @@ export default {
                 if (selected) {
                     _selectionKeys = {};
                     this.$emit('node-unselect', node);
-                }
-                else {
+                } else {
                     _selectionKeys = {};
                     _selectionKeys[node.key] = true;
                     this.$emit('node-select', node);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
-                    _selectionKeys = {...this.selectionKeys};
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
 
                     this.$emit('node-unselect', node);
-                }
-                else {
-                    _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+                } else {
+                    _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
                     _selectionKeys[node.key] = true;
 
                     this.$emit('node-select', node);
@@ -200,10 +201,10 @@ export default {
             return this.selectionMode === 'multiple';
         },
         isNodeSelected(node) {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
         },
         isChecked(node) {
-            return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked : false;
         },
         isNodeLeaf(node) {
             return node.leaf === false ? false : !(node.children && node.children.length);
@@ -216,11 +217,15 @@ export default {
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {
                 let matched = false;
+
                 if (node.children) {
                     let childNodes = [...node.children];
+
                     node.children = [];
+
                     for (let childNode of childNodes) {
-                        let copyChildNode = {...childNode};
+                        let copyChildNode = { ...childNode };
+
                         if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
                             matched = true;
                             node.children.push(copyChildNode);
@@ -233,17 +238,19 @@ export default {
                 }
             }
         },
-        isFilterMatched(node, {searchFields, filterText, strict}) {
+        isFilterMatched(node, { searchFields, filterText, strict }) {
             let matched = false;
-            for(let field of searchFields) {
+
+            for (let field of searchFields) {
                 let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
-                if(fieldValue.indexOf(filterText) > -1) {
+
+                if (fieldValue.indexOf(filterText) > -1) {
                     matched = true;
                 }
             }
 
             if (!matched || (strict && !this.isNodeLeaf(node))) {
-                matched = this.findFilteredNodes(node, {searchFields, filterText, strict}) || matched;
+                matched = this.findFilteredNodes(node, { searchFields, filterText, strict }) || matched;
             }
 
             return matched;
@@ -251,11 +258,14 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-tree p-component', {
-                'p-tree-selectable': this.selectionMode != null,
-                'p-tree-loading': this.loading,
-                'p-tree-flex-scrollable': this.scrollHeight === 'flex'
-            }];
+            return [
+                'p-tree p-component',
+                {
+                    'p-tree-selectable': this.selectionMode != null,
+                    'p-tree-loading': this.loading,
+                    'p-tree-flex-scrollable': this.scrollHeight === 'flex'
+                }
+            ];
         },
         loadingIconClass() {
             return ['p-tree-loading-icon pi-spin', this.loadingIcon];
@@ -267,11 +277,13 @@ export default {
             const strict = this.filterMode === 'strict';
 
             for (let node of this.value) {
-                let _node = {...node};
-                let paramsWithoutNode = {searchFields, filterText, strict};
+                let _node = { ...node };
+                let paramsWithoutNode = { searchFields, filterText, strict };
 
-                if ((strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
-                    (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))) {
+                if (
+                    (strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
+                    (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))
+                ) {
                     filteredNodes.push(_node);
                 }
             }
@@ -279,16 +291,14 @@ export default {
             return filteredNodes;
         },
         valueToRender() {
-            if (this.filterValue && this.filterValue.trim().length > 0)
-                return this.filteredValue;
-            else
-                return this.value;
+            if (this.filterValue && this.filterValue.trim().length > 0) return this.filteredValue;
+            else return this.value;
         }
     },
     components: {
-        'TreeNode': TreeNode
+        TreeNode: TreeNode
     }
-}
+};
 </script>
 
 <style>
@@ -347,7 +357,7 @@ export default {
 .p-tree-filter-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-tree-loading {
diff --git a/components/tree/TreeNode.vue b/components/tree/TreeNode.vue
index ffcb9bd5a..82df13d36 100755
--- a/components/tree/TreeNode.vue
+++ b/components/tree/TreeNode.vue
@@ -1,33 +1,40 @@
 <template>
-    <li :class="containerClass" role="treeitem" :aria-label="label(node)" :aria-selected="selected" :aria-expanded="expanded"
-        :aria-setsize="node.children ? node.children.length : 0" :aria-posinset="index + 1" :aria-level="level">
-        <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded"
-            @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
-            <button type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" v-ripple>
+    <li :class="containerClass" role="treeitem" :aria-label="label(node)" :aria-selected="selected" :aria-expanded="expanded" :aria-setsize="node.children ? node.children.length : 0" :aria-posinset="index + 1" :aria-level="level">
+        <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
+            <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1">
                 <span :class="toggleIcon"></span>
             </button>
-            <div class="p-checkbox p-component" v-if="checkboxMode">
+            <div v-if="checkboxMode" class="p-checkbox p-component">
                 <div :class="checkboxClass" role="checkbox" :aria-checked="checked">
                     <span :class="checkboxIcon"></span>
                 </div>
             </div>
             <span :class="icon"></span>
             <span class="p-treenode-label">
-                <component :is="templates[node.type]||templates['default']" :node="node" v-if="templates[node.type]||templates['default']"/>
-                <template v-else>{{label(node)}}</template>
+                <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
+                <template v-else>{{ label(node) }}</template>
             </span>
         </div>
-        <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
-            <TreeNode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates" :level="level + 1"
-                :expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
-                :selectionMode="selectionMode" :selectionKeys="selectionKeys"
-                @checkbox-change="propagateUp" />
+        <ul v-if="hasChildren && expanded" class="p-treenode-children" role="group">
+            <TreeNode
+                v-for="childNode of node.children"
+                :key="childNode.key"
+                :node="childNode"
+                :templates="templates"
+                :level="level + 1"
+                :expandedKeys="expandedKeys"
+                @node-toggle="onChildNodeToggle"
+                @node-click="onChildNodeClick"
+                :selectionMode="selectionMode"
+                :selectionKeys="selectionKeys"
+                @checkbox-change="propagateUp"
+            />
         </ul>
     </li>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -69,7 +76,7 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         label(node) {
-            return (typeof node.label === 'function' ? node.label() : node.label);
+            return typeof node.label === 'function' ? node.label() : node.label;
         },
         onChildNodeToggle(node) {
             this.$emit('node-toggle', node);
@@ -81,8 +88,7 @@ export default {
 
             if (this.isCheckboxSelectionMode()) {
                 this.toggleCheckbox();
-            }
-            else {
+            } else {
                 this.$emit('node-click', {
                     originalEvent: event,
                     nodeTouched: this.nodeTouched,
@@ -104,54 +110,57 @@ export default {
             switch (event.code) {
                 case 'ArrowDown':
                     var listElement = nodeElement.children[1];
+
                     if (listElement) {
                         this.focusNode(listElement.children[0]);
-                    }
-                    else {
+                    } else {
                         const nextNodeElement = nodeElement.nextElementSibling;
+
                         if (nextNodeElement) {
                             this.focusNode(nextNodeElement);
-                        }
-                        else {
+                        } else {
                             let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
+
                             if (nextSiblingAncestor) {
                                 this.focusNode(nextSiblingAncestor);
                             }
                         }
                     }
-                break;
+
+                    break;
 
                 case 'ArrowUp':
                     if (nodeElement.previousElementSibling) {
                         this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
-                    }
-                    else {
+                    } else {
                         let parentNodeElement = this.getParentNodeElement(nodeElement);
+
                         if (parentNodeElement) {
                             this.focusNode(parentNodeElement);
                         }
                     }
-                break;
+
+                    break;
 
                 case 'ArrowRight':
                 case 'ArrowLeft':
                     this.$emit('node-toggle', this.node);
-                break;
+                    break;
 
                 case 'Enter':
                 case 'Space':
                     this.onClick(event);
-                break;
+                    break;
 
                 default:
                     //no op
-                break;
+                    break;
             }
 
             event.preventDefault();
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -163,10 +172,8 @@ export default {
             });
         },
         propagateDown(node, check, selectionKeys) {
-            if (check)
-                selectionKeys[node.key] = {checked: true, partialChecked: false};
-            else
-                delete selectionKeys[node.key];
+            if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
+            else delete selectionKeys[node.key];
 
             if (node.children && node.children.length) {
                 for (let child of node.children) {
@@ -176,29 +183,24 @@ export default {
         },
         propagateUp(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
             for (let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    delete _selectionKeys[this.node.key];
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else delete _selectionKeys[this.node.key];
             }
 
             this.$emit('checkbox-change', {
@@ -212,24 +214,22 @@ export default {
         },
         findNextSiblingOfAncestor(nodeElement) {
             let parentNodeElement = this.getParentNodeElement(nodeElement);
+
             if (parentNodeElement) {
-                if (parentNodeElement.nextElementSibling)
-                    return parentNodeElement.nextElementSibling;
-                else
-                    return this.findNextSiblingOfAncestor(parentNodeElement);
-            }
-            else {
+                if (parentNodeElement.nextElementSibling) return parentNodeElement.nextElementSibling;
+                else return this.findNextSiblingOfAncestor(parentNodeElement);
+            } else {
                 return null;
             }
         },
         findLastVisibleDescendant(nodeElement) {
             const childrenListElement = nodeElement.children[1];
+
             if (childrenListElement) {
                 const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
 
                 return this.findLastVisibleDescendant(lastChildElement);
-            }
-            else {
+            } else {
                 return nodeElement;
             }
         },
@@ -259,16 +259,20 @@ export default {
             return this.node.selectable === false ? false : this.selectionMode != null;
         },
         selected() {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
         containerClass() {
-            return ['p-treenode', {'p-treenode-leaf': this.leaf}];
+            return ['p-treenode', { 'p-treenode-leaf': this.leaf }];
         },
         contentClass() {
-            return ['p-treenode-content', this.node.styleClass, {
-                'p-treenode-selectable': this.selectable,
-                'p-highlight': this.checkboxMode ? this.checked : this.selected
-            }];
+            return [
+                'p-treenode-content',
+                this.node.styleClass,
+                {
+                    'p-treenode-selectable': this.selectable,
+                    'p-highlight': this.checkboxMode ? this.checked : this.selected
+                }
+            ];
         },
         icon() {
             return ['p-treenode-icon', this.node.icon];
@@ -277,23 +281,23 @@ export default {
             return ['p-tree-toggler-icon pi pi-fw', this.expanded ? this.node.expandedIcon || 'pi-chevron-down' : this.node.collapsedIcon || 'pi-chevron-right'];
         },
         checkboxClass() {
-            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-indeterminate': this.partialChecked}];
+            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-indeterminate': this.partialChecked }];
         },
         checkboxIcon() {
-            return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
+            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         },
         checkboxMode() {
             return this.selectionMode === 'checkbox' && this.node.selectable !== false;
         },
         checked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
         },
         partialChecked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/treeselect/TreeSelect.d.ts b/components/treeselect/TreeSelect.d.ts
index 55577d658..00ee5ba38 100644
--- a/components/treeselect/TreeSelect.d.ts
+++ b/components/treeselect/TreeSelect.d.ts
@@ -79,7 +79,7 @@ export interface TreeSelectProps {
      */
     inputStyle?: any | undefined;
     /**
-     * 
+     *
      */
     inputProps?: object | undefined;
     /**
@@ -87,8 +87,8 @@ export interface TreeSelectProps {
      */
     'aria-labelledby'?: string | undefined;
     /**
-      * Establishes a string value that labels the component.
-      */
+     * Establishes a string value that labels the component.
+     */
     'aria-label'?: string | undefined;
 }
 
@@ -155,7 +155,7 @@ export declare type TreeSelectEmits = {
      * Callback to invoke on value change.
      * @param {*} value - Selected node keys
      */
-    'change': (value: string[]) => void;
+    change: (value: string[]) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -167,11 +167,11 @@ export declare type TreeSelectEmits = {
     /**
      * Callback to invoke when the overlay is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Callback to invoke when the overlay is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNode} node - Node instance.
@@ -192,7 +192,7 @@ export declare type TreeSelectEmits = {
      * @param {TreeNode} node - Node instance.
      */
     'node-collapse': (node: TreeNode) => void;
-}
+};
 
 declare class TreeSelect extends ClassComponent<TreeSelectProps, TreeSelectSlots, TreeSelectEmits> {
     /**
@@ -211,7 +211,7 @@ declare class TreeSelect extends ClassComponent<TreeSelectProps, TreeSelectSlots
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TreeSelect: GlobalComponentConstructor<TreeSelect>
+        TreeSelect: GlobalComponentConstructor<TreeSelect>;
     }
 }
 
@@ -225,7 +225,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TreeSelect](https://www.primefaces.org/primevue/showcase/#/treeselect)
+ * - [TreeSelect](https://www.primefaces.org/primevue/treeselect)
  *
  */
 export default TreeSelect;
diff --git a/components/treeselect/TreeSelect.vue b/components/treeselect/TreeSelect.vue
index f646148c4..cdbd24bb7 100644
--- a/components/treeselect/TreeSelect.vue
+++ b/components/treeselect/TreeSelect.vue
@@ -1,21 +1,38 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" type="text" role="combobox" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" :tabindex="!disabled ? tabindex : -1"
-                :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" aria-haspopup="tree" :aria-expanded="overlayVisible" :aria-controls="listId"
-                @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" v-bind="inputProps" />
+            <input
+                ref="focusInput"
+                :id="inputId"
+                type="text"
+                role="combobox"
+                :class="inputClass"
+                :style="inputStyle"
+                readonly
+                :disabled="disabled"
+                :tabindex="!disabled ? tabindex : -1"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                aria-haspopup="tree"
+                :aria-expanded="overlayVisible"
+                :aria-controls="listId"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                @keydown="onKeyDown($event)"
+                v-bind="inputProps"
+            />
         </div>
         <div class="p-treeselect-label-container">
             <div :class="labelClass">
                 <slot name="value" :value="selectedNodes" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
-                        {{label || 'empty'}}
+                        {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" class="p-treeselect-token" :key="node.key">
-                            <span class="p-treeselect-token-label">{{node.label}}</span>
+                        <div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token">
+                            <span class="p-treeselect-token-label">{{ node.label }}</span>
                         </div>
-                        <template v-if="emptyValue">{{placeholder || 'empty'}}</template>
+                        <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
@@ -27,15 +44,26 @@
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" v-bind="panelProps">
                     <slot name="header" :value="modelValue" :options="options"></slot>
-                    <div class="p-treeselect-items-wrapper" :style="{'max-height': scrollHeight}">
-                        <TSTree :id="listId" :value="options" :selectionMode="selectionMode" @update:selectionKeys="onSelectionChange" :selectionKeys="modelValue"
-                            :expandedKeys="expandedKeys" @update:expandedKeys="onNodeToggle" :metaKeySelection="metaKeySelection"
-                            @node-expand="$emit('node-expand', $event)" @node-collapse="$emit('node-collapse', $event)"
-                            @node-select="onNodeSelect" @node-unselect="onNodeUnselect" :level="0" />
+                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }">
+                        <TSTree
+                            :id="listId"
+                            :value="options"
+                            :selectionMode="selectionMode"
+                            @update:selectionKeys="onSelectionChange"
+                            :selectionKeys="modelValue"
+                            :expandedKeys="expandedKeys"
+                            @update:expandedKeys="onNodeToggle"
+                            :metaKeySelection="metaKeySelection"
+                            @node-expand="$emit('node-expand', $event)"
+                            @node-collapse="$emit('node-collapse', $event)"
+                            @node-select="onNodeSelect"
+                            @node-unselect="onNodeUnselect"
+                            :level="0"
+                        />
                         <div v-if="emptyOptions" class="p-treeselect-empty-message">
-                            <slot name="empty">{{emptyMessageText}}</slot>
+                            <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
                     <slot name="footer" :value="modelValue" :options="options"></slot>
@@ -46,7 +74,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Tree from 'primevue/tree';
 import Ripple from 'primevue/ripple';
@@ -58,22 +86,26 @@ export default {
     props: {
         modelValue: null,
         options: Array,
-		scrollHeight: {
-			type: String,
-			default: '400px'
-		},
-		placeholder: String,
-		disabled: Boolean,
-        tabindex: String,
+        scrollHeight: {
+            type: String,
+            default: '400px'
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
         selectionMode: {
             type: String,
             default: 'single'
         },
-        panelClass: {
-            type: String,
-            default: null
-        },
-        panelProps: null,
         appendTo: {
             type: String,
             default: 'body'
@@ -90,33 +122,39 @@ export default {
             type: Boolean,
             default: true
         },
-        inputId: String,
-        inputClass: String,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
             default: null
         }
     },
-    watch: {
-        modelValue: {
-            handler: function() {
-                if (!this.selfChange) {
-                    this.updateTreeState();
-                }
-                this.selfChange = false;
-            },
-            immediate: true
-        },
-        options() {
-            this.updateTreeState();
-        }
-    },
     data() {
         return {
             focused: false,
@@ -124,6 +162,21 @@ export default {
             expandedKeys: {}
         };
     },
+    watch: {
+        modelValue: {
+            handler: function () {
+                if (!this.selfChange) {
+                    this.updateTreeState();
+                }
+
+                this.selfChange = false;
+            },
+            immediate: true
+        },
+        options() {
+            this.updateTreeState();
+        }
+    },
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
@@ -166,10 +219,8 @@ export default {
         },
         onClick(event) {
             if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
-                if (this.overlayVisible)
-                    this.hide();
-                else
-                    this.show();
+                if (this.overlayVisible) this.hide();
+                else this.show();
 
                 this.$refs.focusInput.focus();
             }
@@ -193,33 +244,30 @@ export default {
             this.expandedKeys = keys;
         },
         onKeyDown(event) {
-            switch(event.code) {
+            switch (event.code) {
                 case 'Down':
                 case 'ArrowDown':
                     if (this.overlayVisible) {
                         if (DomHandler.findSingle(this.overlay, '.p-highlight')) {
                             DomHandler.findSingle(this.overlay, '.p-highlight').focus();
-                        }
-                        else DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
-                    }
-                    else {
+                        } else DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
+                    } else {
                         this.show();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'Space':
                 case 'Enter':
                     if (this.overlayVisible) {
                         this.hide();
-                    }
-                    else {
+                    } else {
                         this.show();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'Escape':
                 case 'Tab':
@@ -227,10 +275,11 @@ export default {
                         this.hide();
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         onOverlayEnter(el) {
@@ -255,8 +304,7 @@ export default {
         alignOverlay() {
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
-            }
-            else {
+            } else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$el);
             }
@@ -268,6 +316,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -300,6 +349,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -333,8 +383,7 @@ export default {
                         this.findSelectedNodes(childNode, keys, selectedNodes);
                     }
                 }
-            }
-            else {
+            } else {
                 for (let childNode of this.options) {
                     this.findSelectedNodes(childNode, keys, selectedNodes);
                 }
@@ -344,8 +393,10 @@ export default {
             return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
         },
         updateTreeState() {
-            let keys = {...this.modelValue};
+            let keys = { ...this.modelValue };
+
             this.expandedKeys = {};
+
             if (keys && this.options) {
                 this.updateTreeBranchState(null, null, keys);
             }
@@ -363,8 +414,7 @@ export default {
                         this.updateTreeBranchState(childNode, path, keys);
                     }
                 }
-            }
-            else {
+            } else {
                 for (let childNode of this.options) {
                     this.updateTreeBranchState(childNode, [], keys);
                 }
@@ -380,6 +430,7 @@ export default {
         scrollValueInView() {
             if (this.overlay) {
                 let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
+
                 if (selectedItem) {
                     selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
                 }
@@ -409,15 +460,21 @@ export default {
             ];
         },
         panelStyleClass() {
-            return ['p-treeselect-panel p-component', this.panelClass, {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-treeselect-panel p-component',
+                this.panelClass,
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         selectedNodes() {
             let selectedNodes = [];
+
             if (this.modelValue && this.options) {
-                let keys = {...this.modelValue};
+                let keys = { ...this.modelValue };
+
                 this.findSelectedNodes(null, keys, selectedNodes);
             }
 
@@ -425,7 +482,8 @@ export default {
         },
         label() {
             let value = this.selectedNodes;
-            return value.length ? value.map(node => node.label).join(', '): this.placeholder;
+
+            return value.length ? value.map((node) => node.label).join(', ') : this.placeholder;
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
@@ -441,13 +499,13 @@ export default {
         }
     },
     components: {
-        'TSTree': Tree,
-        'Portal': Portal
+        TSTree: Tree,
+        Portal: Portal
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -471,7 +529,7 @@ export default {
     cursor: pointer;
 }
 
-.p-treeselect-label  {
+.p-treeselect-label {
     display: block;
     white-space: nowrap;
     cursor: pointer;
diff --git a/components/treetable/BodyCell.vue b/components/treetable/BodyCell.vue
index 4affd4e64..e550beaa6 100644
--- a/components/treetable/BodyCell.vue
+++ b/components/treetable/BodyCell.vue
@@ -1,9 +1,9 @@
 <template>
     <td :style="containerStyle" :class="containerClass">
-        <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp('expander')" :style="togglerStyle" tabindex="-1" v-ripple>
+        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
             <i :class="togglerIcon"></i>
         </button>
-        <div :class="['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': checkboxFocused}]" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp('expander')" role="checkbox" :aria-checked="checked">
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" role="checkbox" :aria-checked="checked">
             <div class="p-hidden-accessible">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
             </div>
@@ -11,18 +11,20 @@
                 <span :class="checkboxIcon"></span>
             </div>
         </div>
-        <component :is="column.children.body" :node="node" :column="column" v-if="column.children && column.children.body" />
-        <template v-else><span>{{resolveFieldData(node.data, columnProp('field'))}}</span></template>
+        <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
+        <template v-else
+            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
+        >
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
-import Ripple from 'primevue/ripple'
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'BodyCell',
-    emits: ['node-toggle','checkbox-toggle'],
+    emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
             type: Object,
@@ -65,7 +67,7 @@ export default {
         return {
             styleObject: {},
             checkboxFocused: false
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -87,20 +89,24 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -120,15 +126,19 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('bodyClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('bodyClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         },
         togglerStyle() {
             return {
@@ -137,20 +147,20 @@ export default {
             };
         },
         togglerIcon() {
-            return ['p-treetable-toggler-icon pi', {'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded}];
+            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
         },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
-            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked}];
+            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
         },
         checkboxIcon() {
-            return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
+            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
diff --git a/components/treetable/FooterCell.vue b/components/treetable/FooterCell.vue
index 72277956f..6897db48f 100644
--- a/components/treetable/FooterCell.vue
+++ b/components/treetable/FooterCell.vue
@@ -1,12 +1,12 @@
 <template>
     <td :style="containerStyle" :class="containerClass">
-        <component :is="column.children.footer" :column="column" v-if="column.children && column.children.footer" />
-        {{columnProp('footer')}}
+        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
+        {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -19,7 +19,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -38,20 +38,24 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -59,16 +63,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('footerClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('footerClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         }
     }
-}
+};
 </script>
diff --git a/components/treetable/HeaderCell.vue b/components/treetable/HeaderCell.vue
index 07c3e1e53..71db3eeef 100644
--- a/components/treetable/HeaderCell.vue
+++ b/components/treetable/HeaderCell.vue
@@ -1,20 +1,19 @@
 <template>
-    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown"
-        :tabindex="columnProp('sortable') ? '0' : null"  :aria-sort="ariaSort">
-        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
-        <component :is="column.children.header" :column="column" v-if="column.children && column.children.header" />
-        <span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
+    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort">
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
+        <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
+        <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
         <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
-        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
+        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'HeaderCell',
-    emits: ['column-click','column-resizestart'],
+    emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
             type: Object,
@@ -44,7 +43,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -63,37 +62,43 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;
+
                 if (filterRow) {
                     let index = DomHandler.index(this.$el);
+
                     filterRow.children[index].style.left = this.styleObject.left;
                     filterRow.children[index].style.right = this.styleObject.right;
                 }
             }
         },
         onClick(event) {
-            this.$emit('column-click', {originalEvent: event, column: this.column});
+            this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
             if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
-                this.$emit('column-click', {originalEvent: event, column: this.column});
+                this.$emit('column-click', { originalEvent: event, column: this.column });
             }
         },
         onResizeStart(event) {
@@ -104,6 +109,7 @@ export default {
 
             for (let i = 0; i < this.multiSortMeta.length; i++) {
                 let meta = this.multiSortMeta[i];
+
                 if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
                     index = i;
                     break;
@@ -113,26 +119,30 @@ export default {
             return index;
         },
         isMultiSorted() {
-            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
         },
         isColumnSorted() {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
         }
     },
     computed: {
         containerClass() {
-            return [this.columnProp('headerClass'), this.columnProp('class'), {
-                'p-sortable-column': this.columnProp('sortable'),
-                'p-resizable-column': this.resizableColumns,
-                'p-highlight': this.isColumnSorted(),
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('headerClass'),
+                this.columnProp('class'),
+                {
+                    'p-sortable-column': this.columnProp('sortable'),
+                    'p-resizable-column': this.resizableColumns,
+                    'p-highlight': this.isColumnSorted(),
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let headerStyle = this.columnProp('headerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
         sortableColumnIcon() {
             let sorted = false;
@@ -140,10 +150,10 @@ export default {
 
             if (this.sortMode === 'single') {
                 sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
-                sortOrder = sorted ? this.sortOrder: 0;
-            }
-            else if (this.sortMode === 'multiple') {
+                sortOrder = sorted ? this.sortOrder : 0;
+            } else if (this.sortMode === 'multiple') {
                 let metaIndex = this.getMultiSortMetaIndex();
+
                 if (metaIndex > -1) {
                     sorted = true;
                     sortOrder = this.multiSortMeta[metaIndex].order;
@@ -151,7 +161,8 @@ export default {
             }
 
             return [
-                'p-sortable-column-icon pi pi-fw', {
+                'p-sortable-column-icon pi pi-fw',
+                {
                     'pi-sort-alt': !sorted,
                     'pi-sort-amount-up-alt': sorted && sortOrder > 0,
                     'pi-sort-amount-down': sorted && sortOrder < 0
@@ -161,17 +172,14 @@ export default {
         ariaSort() {
             if (this.columnProp('sortable')) {
                 const sortIcon = this.sortableColumnIcon;
-                if (sortIcon[1]['pi-sort-amount-down'])
-                    return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt'])
-                    return 'ascending';
-                else
-                    return 'none';
-            }
-            else {
+
+                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                else return 'none';
+            } else {
                 return null;
             }
-        },
+        }
     }
-}
+};
 </script>
diff --git a/components/treetable/TreeTable.d.ts b/components/treetable/TreeTable.d.ts
index 7fee48829..7af89e8a6 100755
--- a/components/treetable/TreeTable.d.ts
+++ b/components/treetable/TreeTable.d.ts
@@ -404,18 +404,18 @@ export declare type TreeTableEmits = {
     /**
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {TreeTablePageEvent} event - Custom page event.
-    */
-    'page': (event: TreeTablePageEvent) => void;
+     */
+    page: (event: TreeTablePageEvent) => void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {TreeTableSortEvent} event - Custom sort event.
      */
-    'sort': (event: TreeTableSortEvent) => void;
+    sort: (event: TreeTableSortEvent) => void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {TreeTableFilterEvent} event - Custom filter event.
      */
-    'filter': (event: TreeTableFilterEvent) => void;
+    filter: (event: TreeTableFilterEvent) => void;
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNode} node - Node instance.
@@ -441,13 +441,13 @@ export declare type TreeTableEmits = {
      * @param {Event} event - Browser event.
      */
     'column-resize-end': (event: Event) => void;
-}
+};
 
-declare class TreeTable extends ClassComponent<TreeTableProps, TreeTableSlots, TreeTableEmits> { }
+declare class TreeTable extends ClassComponent<TreeTableProps, TreeTableSlots, TreeTableEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TreeTable: GlobalComponentConstructor<TreeTable>
+        TreeTable: GlobalComponentConstructor<TreeTable>;
     }
 }
 
@@ -461,7 +461,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TreeTable](https://www.primefaces.org/primevue/showcase/#/treetable)
+ * - [TreeTable](https://www.primefaces.org/primevue/treetable)
  *
  */
 export default TreeTable;
diff --git a/components/treetable/TreeTable.vue b/components/treetable/TreeTable.vue
index ef401b3cc..b1968022c 100755
--- a/components/treetable/TreeTable.vue
+++ b/components/treetable/TreeTable.vue
@@ -1,45 +1,75 @@
 <template>
     <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body">
-        <div class="p-treetable-loading" v-if="loading">
+        <div v-if="loading" class="p-treetable-loading">
             <div class="p-treetable-loading-overlay p-component-overlay">
                 <i :class="loadingIconClass"></i>
             </div>
         </div>
-        <div class="p-treetable-header" v-if="$slots.header">
+        <div v-if="$slots.header" class="p-treetable-header">
             <slot name="header"></slot>
         </div>
-        <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <TTPaginator
+            v-if="paginatorTop"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-top"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
-        <div class="p-treetable-wrapper" :style="{maxHeight: scrollHeight}">
+        <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }">
             <table ref="table">
                 <thead class="p-treetable-thead">
                     <tr>
-                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                            <TTHeaderCell v-if="!columnProp(col, 'hidden')" :column="col" :resizableColumns="resizableColumns"
-                            :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :sortMode="sortMode"
-                            @column-click="onColumnHeaderClick" @column-resizestart="onColumnResizeStart"></TTHeaderCell>
+                        <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                            <TTHeaderCell
+                                v-if="!columnProp(col, 'hidden')"
+                                :column="col"
+                                :resizableColumns="resizableColumns"
+                                :sortField="d_sortField"
+                                :sortOrder="d_sortOrder"
+                                :multiSortMeta="d_multiSortMeta"
+                                :sortMode="sortMode"
+                                @column-click="onColumnHeaderClick"
+                                @column-resizestart="onColumnResizeStart"
+                            ></TTHeaderCell>
                         </template>
                     </tr>
                     <tr v-if="hasColumnFilter()">
-                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'),columnProp(col, 'filterHeaderStyle')]">
-                                <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
+                        <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]">
+                                <component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" />
                             </th>
                         </template>
                     </tr>
                 </thead>
                 <tbody class="p-treetable-tbody">
                     <template v-if="!empty">
-                        <TTRow v-for="node of dataToRender" :key="node.key" :columns="columns" :node="node" :level="0"
-                        :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" :indentation="indentation"
-                        :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onNodeClick" @checkbox-change="onCheckboxChange"></TTRow>
+                        <TTRow
+                            v-for="node of dataToRender"
+                            :key="node.key"
+                            :columns="columns"
+                            :node="node"
+                            :level="0"
+                            :expandedKeys="d_expandedKeys"
+                            @node-toggle="onNodeToggle"
+                            :indentation="indentation"
+                            :selectionMode="selectionMode"
+                            :selectionKeys="selectionKeys"
+                            @node-click="onNodeClick"
+                            @checkbox-change="onCheckboxChange"
+                        ></TTRow>
                     </template>
                     <tr v-else class="p-treetable-emptymessage">
                         <td :colspan="columns.length">
@@ -47,25 +77,36 @@
                         </td>
                     </tr>
                 </tbody>
-                <tfoot class="p-treetable-tfoot" v-if="hasFooter">
+                <tfoot v-if="hasFooter" class="p-treetable-tfoot">
                     <tr>
-                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
+                        <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col"></TTFooterCell>
                         </template>
                     </tr>
                 </tfoot>
             </table>
         </div>
-        <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <TTPaginator
+            v-if="paginatorBottom"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-bottom"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
-        <div class="p-treetable-footer" v-if="$slots.footer">
+        <div v-if="$slots.footer" class="p-treetable-footer">
             <slot name="footer"></slot>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>
@@ -73,8 +114,8 @@
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
-import {FilterService} from 'primevue/api';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
+import { FilterService } from 'primevue/api';
 import TreeTableRow from './TreeTableRow.vue';
 import HeaderCell from './HeaderCell.vue';
 import FooterCell from './FooterCell.vue';
@@ -82,8 +123,23 @@ import Paginator from 'primevue/paginator';
 
 export default {
     name: 'TreeTable',
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect',
-        'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'column-resize-end'],
+    emits: [
+        'node-expand',
+        'node-collapse',
+        'update:expandedKeys',
+        'update:selectionKeys',
+        'node-select',
+        'node-unselect',
+        'update:first',
+        'update:rows',
+        'page',
+        'update:sortField',
+        'update:sortOrder',
+        'update:multiSortMeta',
+        'sort',
+        'filter',
+        'column-resize-end'
+    ],
     props: {
         value: {
             type: null,
@@ -223,7 +279,7 @@ export default {
         },
         scrollDirection: {
             type: String,
-            default: "vertical"
+            default: 'vertical'
         },
         scrollHeight: {
             type: String,
@@ -245,8 +301,8 @@ export default {
             d_rows: this.rows,
             d_sortField: this.sortField,
             d_sortOrder: this.sortOrder,
-            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
-        }
+            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : []
+        };
     },
     watch: {
         expandedKeys(newValue) {
@@ -288,13 +344,12 @@ export default {
             if (this.d_expandedKeys[key]) {
                 delete this.d_expandedKeys[key];
                 this.$emit('node-collapse', node);
-            }
-            else {
+            } else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
             }
 
-            this.d_expandedKeys = {...this.d_expandedKeys};
+            this.d_expandedKeys = { ...this.d_expandedKeys };
             this.$emit('update:expandedKeys', this.d_expandedKeys);
         },
         onNodeClick(event) {
@@ -308,27 +363,24 @@ export default {
         handleSelectionWithMetaKey(event) {
             const originalEvent = event.originalEvent;
             const node = event.node;
-            const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
 
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else {
-                    _selectionKeys = {...this.selectionKeys};
+                } else {
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
                 }
 
                 this.$emit('node-unselect', node);
-            }
-            else {
+            } else {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else if (this.isMultipleSelectionMode()) {
-                    _selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {});
+                } else if (this.isMultipleSelectionMode()) {
+                    _selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
                 }
 
                 _selectionKeys[node.key] = true;
@@ -346,22 +398,19 @@ export default {
                 if (selected) {
                     _selectionKeys = {};
                     this.$emit('node-unselect', node);
-                }
-                else {
+                } else {
                     _selectionKeys = {};
                     _selectionKeys[node.key] = true;
                     this.$emit('node-select', node);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
-                    _selectionKeys = {...this.selectionKeys};
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
 
                     this.$emit('node-unselect', node);
-                }
-                else {
-                    _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+                } else {
+                    _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
                     _selectionKeys[node.key] = true;
 
                     this.$emit('node-select', node);
@@ -373,10 +422,8 @@ export default {
         onCheckboxChange(event) {
             this.$emit('update:selectionKeys', event.selectionKeys);
 
-            if (event.check)
-                this.$emit('node-select', event.node);
-            else
-                this.$emit('node-unselect', event.node);
+            if (event.check) this.$emit('node-select', event.node);
+            else this.$emit('node-unselect', event.node);
         },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
@@ -389,6 +436,7 @@ export default {
             this.d_rows = event.rows;
 
             let pageEvent = this.createLazyLoadEvent(event);
+
             pageEvent.pageCount = event.pageCount;
             pageEvent.page = event.page;
 
@@ -401,9 +449,13 @@ export default {
             this.$emit('update:first', this.d_first);
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), {
-                'p-frozen-column': this.columnProp(column, 'frozen')
-            }];
+            return [
+                'p-filter-column',
+                this.columnProp(column, 'filterHeaderClass'),
+                {
+                    'p-frozen-column': this.columnProp(column, 'frozen')
+                }
+            ];
         },
         onColumnHeaderClick(e) {
             let event = e.originalEvent;
@@ -413,21 +465,23 @@ export default {
                 const targetNode = event.target;
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
-                    || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
+                if (
+                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
+                    DomHandler.hasClass(targetNode, 'p-column-title') ||
+                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
+                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                ) {
                     DomHandler.clearSelection();
 
                     if (this.sortMode === 'single') {
                         if (this.d_sortField === columnField) {
-                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
+                            if (this.removableSort && this.d_sortOrder * -1 === this.defaultSortOrder) {
                                 this.d_sortOrder = null;
                                 this.d_sortField = null;
-                            }
-                            else {
+                            } else {
                                 this.d_sortOrder = this.d_sortOrder * -1;
                             }
-                        }
-                        else {
+                        } else {
                             this.d_sortOrder = this.defaultSortOrder;
                             this.d_sortField = columnField;
                         }
@@ -435,11 +489,11 @@ export default {
                         this.$emit('update:sortField', this.d_sortField);
                         this.$emit('update:sortOrder', this.d_sortOrder);
                         this.resetPage();
-                    }
-                    else if (this.sortMode === 'multiple') {
+                    } else if (this.sortMode === 'multiple') {
                         let metaKey = event.metaKey || event.ctrlKey;
+
                         if (!metaKey) {
-                            this.d_multiSortMeta =  this.d_multiSortMeta.filter(meta => meta.field === columnField);
+                            this.d_multiSortMeta = this.d_multiSortMeta.filter((meta) => meta.field === columnField);
                         }
 
                         this.addMultiSortField(columnField);
@@ -451,16 +505,13 @@ export default {
             }
         },
         addMultiSortField(field) {
-            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
+            let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);
 
             if (index >= 0) {
-                if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
-                    this.d_multiSortMeta.splice(index, 1);
-                else
-                    this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
-            }
-            else {
-                this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
+                if (this.removableSort && this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder) this.d_multiSortMeta.splice(index, 1);
+                else this.d_multiSortMeta[index] = { field: field, order: this.d_multiSortMeta[index].order * -1 };
+            } else {
+                this.d_multiSortMeta.push({ field: field, order: this.defaultSortOrder });
             }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
@@ -476,18 +527,13 @@ export default {
                 const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_sortField);
                 let result = null;
 
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                if (value1 == null && value2 != null) result = -1;
+                else if (value1 != null && value2 == null) result = 1;
+                else if (value1 == null && value2 == null) result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
-                return (this.d_sortOrder * result);
+                return this.d_sortOrder * result;
             });
 
             return _nodes;
@@ -497,6 +543,7 @@ export default {
         },
         sortNodesMultiple(nodes) {
             let _nodes = [...nodes];
+
             _nodes.sort((node1, node2) => {
                 return this.multisortField(node1, node2, 0);
             });
@@ -508,32 +555,26 @@ export default {
             const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_multiSortMeta[index].field);
             let result = null;
 
-            if (value1 == null && value2 != null)
-                result = -1;
-            else if (value1 != null && value2 == null)
-                result = 1;
-            else if (value1 == null && value2 == null)
-                result = 0;
+            if (value1 == null && value2 != null) result = -1;
+            else if (value1 != null && value2 == null) result = 1;
+            else if (value1 == null && value2 == null) result = 0;
             else {
-                if (value1 === value2)  {
-                    return (this.d_multiSortMeta.length - 1) > (index) ? (this.multisortField(node1, node2, index + 1)) : 0;
-                }
-                else {
-                    if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String))
-                        return (this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
-                    else
-                        result = (value1 < value2) ? -1 : 1;
+                if (value1 === value2) {
+                    return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
+                } else {
+                    if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String)) return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : 1;
                 }
             }
 
-            return (this.d_multiSortMeta[index].order * result);
+            return this.d_multiSortMeta[index].order * result;
         },
         filter(value) {
             let filteredNodes = [];
             const strict = this.filterMode === 'strict';
 
             for (let node of value) {
-                let copyNode = {...node};
+                let copyNode = { ...node };
                 let localMatch = true;
                 let globalMatch = false;
 
@@ -546,11 +587,13 @@ export default {
                         let filterMatchMode = this.columnProp(col, 'filterMatchMode') || 'startsWith';
                         let filterValue = this.filters[this.columnProp(col, 'field')];
                         let filterConstraint = FilterService.filters[filterMatchMode];
-                        let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
+                        let paramsWithoutNode = { filterField, filterValue, filterConstraint, strict };
 
-                        if ((strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
-                            (!strict && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
-                                localMatch = false;
+                        if (
+                            (strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
+                            (!strict && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))
+                        ) {
+                            localMatch = false;
                         }
 
                         if (!localMatch) {
@@ -560,20 +603,23 @@ export default {
 
                     //global
                     if (this.hasGlobalFilter() && !globalMatch) {
-                        let copyNodeForGlobal = {...copyNode};
+                        let copyNodeForGlobal = { ...copyNode };
                         let filterValue = this.filters['global'];
                         let filterConstraint = FilterService.filters['contains'];
-                        let globalFilterParamsWithoutNode = {filterField, filterValue, filterConstraint, strict};
+                        let globalFilterParamsWithoutNode = { filterField, filterValue, filterConstraint, strict };
 
-                        if ((strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
-                            (!strict && (this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode)))) {
-                                globalMatch = true;
-                                copyNode = copyNodeForGlobal;
+                        if (
+                            (strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
+                            (!strict && (this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode)))
+                        ) {
+                            globalMatch = true;
+                            copyNode = copyNodeForGlobal;
                         }
                     }
                 }
 
                 let matches = localMatch;
+
                 if (this.hasGlobalFilter()) {
                     matches = localMatch && globalMatch;
                 }
@@ -584,6 +630,7 @@ export default {
             }
 
             let filterEvent = this.createLazyLoadEvent(event);
+
             filterEvent.filteredValue = filteredNodes;
             this.$emit('filter', filterEvent);
 
@@ -592,11 +639,15 @@ export default {
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {
                 let matched = false;
+
                 if (node.children) {
                     let childNodes = [...node.children];
+
                     node.children = [];
+
                     for (let childNode of childNodes) {
-                        let copyChildNode = {...childNode};
+                        let copyChildNode = { ...childNode };
+
                         if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
                             matched = true;
                             node.children.push(copyChildNode);
@@ -609,30 +660,32 @@ export default {
                 }
             }
         },
-        isFilterMatched(node, {filterField, filterValue, filterConstraint, strict}) {
+        isFilterMatched(node, { filterField, filterValue, filterConstraint, strict }) {
             let matched = false;
             let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
+
             if (filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                 matched = true;
             }
 
             if (!matched || (strict && !this.isNodeLeaf(node))) {
-                matched = this.findFilteredNodes(node, {filterField, filterValue, filterConstraint, strict}) || matched;
+                matched = this.findFilteredNodes(node, { filterField, filterValue, filterConstraint, strict }) || matched;
             }
 
             return matched;
         },
         isNodeSelected(node) {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
         },
         isNodeLeaf(node) {
             return node.leaf === false ? false : !(node.children && node.children.length);
         },
         createLazyLoadEvent(event) {
             let filterMatchModes;
+
             if (this.hasFilters()) {
                 filterMatchModes = {};
-                this.columns.forEach(col => {
+                this.columns.forEach((col) => {
                     if (this.columnProp(col, 'field')) {
                         filterMatchModes[col.props.field] = this.columnProp(col, 'filterMatchMode');
                     }
@@ -652,26 +705,28 @@ export default {
         },
         onColumnResizeStart(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             this.resizeColumnElement = event.target.parentElement;
             this.columnResizing = true;
-            this.lastResizeHelperX = (event.pageX - containerLeft + this.$el.scrollLeft);
+            this.lastResizeHelperX = event.pageX - containerLeft + this.$el.scrollLeft;
 
             this.bindColumnResizeEvents();
         },
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             DomHandler.addClass(this.$el, 'p-unselectable-text');
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
-            this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
+            this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
 
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
- let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+            let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
-            let minWidth = this.resizeColumnElement.style.minWidth||15;
+            let minWidth = this.resizeColumnElement.style.minWidth || 15;
 
             if (columnWidth + delta > parseInt(minWidth, 10)) {
                 if (this.columnResizeMode === 'fit') {
@@ -681,22 +736,19 @@ export default {
                     if (newColumnWidth > 15 && nextColumnWidth > 15) {
                         if (!this.scrollable) {
                             this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                            if(nextColumn) {
+
+                            if (nextColumn) {
                                 nextColumn.style.width = nextColumnWidth + 'px';
                             }
-                        }
-                        else {
+                        } else {
                             this.resizeTableCells(newColumnWidth, nextColumnWidth);
                         }
                     }
-                }
-                else if (this.columnResizeMode === 'expand') {
+                } else if (this.columnResizeMode === 'expand') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
 
-                    if (!this.scrollable)
-                        this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                    else
-                        this.resizeTableCells(newColumnWidth);
+                    if (!this.scrollable) this.resizeColumnElement.style.width = newColumnWidth + 'px';
+                    else this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {
@@ -714,13 +766,16 @@ export default {
         resizeTableCells(newColumnWidth, nextColumnWidth) {
             let colIndex = DomHandler.index(this.resizeColumnElement);
             let children = this.$refs.table.children;
+
             for (let child of children) {
                 for (let row of child.children) {
                     let resizeCell = row.children[colIndex];
+
                     resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
 
                     if (this.columnResizeMode === 'fit') {
                         let nextCell = resizeCell.nextElementSibling;
+
                         if (nextCell) {
                             nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
                         }
@@ -731,7 +786,7 @@ export default {
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.onColumnResize(event);
                     }
                 });
@@ -739,13 +794,12 @@ export default {
 
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.columnResizing = false;
                         this.onColumnResizeEnd();
                     }
                 });
             }
-
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
@@ -755,7 +809,7 @@ export default {
 
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
-                 this.documentColumnResizeEndListener = null;
+                this.documentColumnResizeEndListener = null;
             }
         },
         onColumnKeyDown(event, col) {
@@ -786,29 +840,30 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-treetable p-component', {
-                'p-treetable-hoverable-rows': (this.rowHover || this.rowSelectionMode),
-                'p-treetable-auto-layout': this.autoLayout,
-                'p-treetable-resizable': this.resizableColumns,
-                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
-                'p-treetable-gridlines': this.showGridlines,
-                'p-treetable-scrollable': this.scrollable,
-                'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
-                'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
-                'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                'p-treetable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
-                'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll',
-            }];
+            return [
+                'p-treetable p-component',
+                {
+                    'p-treetable-hoverable-rows': this.rowHover || this.rowSelectionMode,
+                    'p-treetable-auto-layout': this.autoLayout,
+                    'p-treetable-resizable': this.resizableColumns,
+                    'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                    'p-treetable-gridlines': this.showGridlines,
+                    'p-treetable-scrollable': this.scrollable,
+                    'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
+                    'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
+                    'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
+                    'p-treetable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
+                    'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll'
+                }
+            ];
         },
         columns() {
             let cols = [];
             let children = this.$slots.default();
 
-            children.forEach(child => {
-                if (child.children && child.children instanceof Array)
-                    cols = [...cols, ...child.children];
-                else if (child.type.name === 'Column')
-                    cols.push(child);
+            children.forEach((child) => {
+                if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
+                else if (child.type.name === 'Column') cols.push(child);
             });
 
             return cols;
@@ -816,16 +871,13 @@ export default {
         processedData() {
             if (this.lazy) {
                 return this.value;
-            }
-            else {
+            } else {
                 if (this.value && this.value.length) {
                     let data = this.value;
 
                     if (this.sorted) {
-                        if(this.sortMode === 'single')
-                            data = this.sortSingle(data);
-                        else if(this.sortMode === 'multiple')
-                            data = this.sortMultiple(data);
+                        if (this.sortMode === 'single') data = this.sortSingle(data);
+                        else if (this.sortMode === 'multiple') data = this.sortMultiple(data);
                     }
 
                     if (this.hasFilters()) {
@@ -833,8 +885,7 @@ export default {
                     }
 
                     return data;
-                }
-                else {
+                } else {
                     return null;
                 }
             }
@@ -844,15 +895,16 @@ export default {
 
             if (this.paginator) {
                 const first = this.lazy ? 0 : this.d_first;
+
                 return data.slice(first, first + this.d_rows);
-            }
-            else {
+            } else {
                 return data;
             }
         },
         empty() {
             const data = this.processedData;
-            return (!data || data.length === 0);
+
+            return !data || data.length === 0;
         },
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
@@ -861,7 +913,7 @@ export default {
             let hasFooter = false;
 
             for (let col of this.columns) {
-                if (this.columnProp(col, 'footer')|| (col.children && col.children.footer)) {
+                if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
                     hasFooter = true;
                     break;
                 }
@@ -887,9 +939,9 @@ export default {
         totalRecordsLength() {
             if (this.lazy) {
                 return this.totalRecords;
-            }
-            else {
+            } else {
                 const data = this.processedData;
+
                 return data ? data.length : 0;
             }
         },
@@ -898,12 +950,12 @@ export default {
         }
     },
     components: {
-        'TTRow': TreeTableRow,
-        'TTPaginator': Paginator,
-        'TTHeaderCell': HeaderCell,
-        'TTFooterCell': FooterCell
+        TTRow: TreeTableRow,
+        TTPaginator: Paginator,
+        TTHeaderCell: HeaderCell,
+        TTFooterCell: FooterCell
     }
-}
+};
 </script>
 
 <style>
@@ -980,10 +1032,10 @@ export default {
     top: 0;
     right: 0;
     margin: 0;
-    width: .5rem;
+    width: 0.5rem;
     height: 100%;
     padding: 0px;
-    cursor:col-resize;
+    cursor: col-resize;
     border: 1px solid transparent;
 }
 
@@ -1058,8 +1110,7 @@ export default {
 .p-treetable-scrollable-both .p-treetable-thead > tr > th,
 .p-treetable-scrollable-both .p-treetable-tbody > tr > td,
 .p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
-.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th
-.p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
 .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
     flex: 0 0 auto;
 }
diff --git a/components/treetable/TreeTableRow.vue b/components/treetable/TreeTableRow.vue
index 4de55fe4e..2110cd8f6 100755
--- a/components/treetable/TreeTableRow.vue
+++ b/components/treetable/TreeTableRow.vue
@@ -1,26 +1,48 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
-        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-            <TTBodyCell v-if="!columnProp(col, 'hidden')" :column="col" :node="node"
-                :level="level" :leaf="leaf" :indentation="indentation" :expanded="expanded" :selectionMode="selectionMode"
-                :checked="checked" :partialChecked="partialChecked"
-                @node-toggle="$emit('node-toggle', $event)" @checkbox-toggle="toggleCheckbox"></TTBodyCell>
+        <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+            <TTBodyCell
+                v-if="!columnProp(col, 'hidden')"
+                :column="col"
+                :node="node"
+                :level="level"
+                :leaf="leaf"
+                :indentation="indentation"
+                :expanded="expanded"
+                :selectionMode="selectionMode"
+                :checked="checked"
+                :partialChecked="partialChecked"
+                @node-toggle="$emit('node-toggle', $event)"
+                @checkbox-toggle="toggleCheckbox"
+            ></TTBodyCell>
         </template>
     </tr>
     <template v-if="expanded && node.children && node.children.length">
-        <TreeTableRow v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
-            :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" :indentation="indentation"
-            @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange" />
+        <TreeTableRow
+            v-for="childNode of node.children"
+            :key="childNode.key"
+            :columns="columns"
+            :node="childNode"
+            :parentNode="node"
+            :level="level + 1"
+            :expandedKeys="expandedKeys"
+            :selectionMode="selectionMode"
+            :selectionKeys="selectionKeys"
+            :indentation="indentation"
+            @node-toggle="$emit('node-toggle', $event)"
+            @node-click="$emit('node-click', $event)"
+            @checkbox-change="onCheckboxChange"
+        />
     </template>
 </template>
 
 <script>
-import {DomHandler, ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TreeTableRow',
-    emits: ['node-click', 'node-toggle', 'checkbox-change','nodeClick', 'nodeToggle', 'checkboxChange'],
+    emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
             type: null,
@@ -64,16 +86,15 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         onClick(event) {
-            if (DomHandler.isClickable(event.target) ||
-                DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
+            if (DomHandler.isClickable(event.target) || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
                 return;
             }
 
             this.$emit('node-click', {
-                    originalEvent: event,
-                    nodeTouched: this.nodeTouched,
-                    node: this.node
-                });
+                originalEvent: event,
+                nodeTouched: this.nodeTouched,
+                node: this.node
+            });
 
             this.nodeTouched = false;
         },
@@ -88,6 +109,7 @@ export default {
                     //down arrow
                     case 40: {
                         const nextRow = rowElement.nextElementSibling;
+
                         if (nextRow) {
                             nextRow.focus();
                         }
@@ -99,6 +121,7 @@ export default {
                     //up arrow
                     case 38: {
                         const previousRow = rowElement.previousElementSibling;
+
                         if (previousRow) {
                             previousRow.focus();
                         }
@@ -109,11 +132,13 @@ export default {
 
                     //right-left arrows
                     case 37:
+
                     case 39: {
                         if (!this.leaf) {
                             this.$emit('node-toggle', this.node);
                             event.preventDefault();
                         }
+
                         break;
                     }
 
@@ -126,12 +151,12 @@ export default {
 
                     default:
                         //no op
-                    break;
+                        break;
                 }
             }
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -143,10 +168,8 @@ export default {
             });
         },
         propagateDown(node, check, selectionKeys) {
-            if (check)
-                selectionKeys[node.key] = {checked: true, partialChecked: false};
-            else
-                delete selectionKeys[node.key];
+            if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
+            else delete selectionKeys[node.key];
 
             if (node.children && node.children.length) {
                 for (let child of node.children) {
@@ -156,29 +179,24 @@ export default {
         },
         propagateUp(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -189,29 +207,24 @@ export default {
         },
         onCheckboxChange(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -223,9 +236,12 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.node.styleClass, {
-                'p-highlight': this.selected
-            }]
+            return [
+                this.node.styleClass,
+                {
+                    'p-highlight': this.selected
+                }
+            ];
         },
         hasChildren() {
             return this.node.children && this.node.children.length > 0;
@@ -237,20 +253,20 @@ export default {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },
         selected() {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
         childLevel() {
             return this.level + 1;
         },
         checked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
         },
         partialChecked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
         }
     },
     components: {
-        'TTBodyCell': BodyCell
+        TTBodyCell: BodyCell
     }
-}
+};
 </script>
diff --git a/components/tristatecheckbox/TriStateCheckbox.d.ts b/components/tristatecheckbox/TriStateCheckbox.d.ts
index e0bbdd9db..ce17efd31 100755
--- a/components/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/components/tristatecheckbox/TriStateCheckbox.d.ts
@@ -27,13 +27,12 @@ export interface TriStateCheckboxProps {
      */
     'aria-labelledby'?: string | undefined;
     /**
-      * Establishes a string value that labels the component.
-      */
+     * Establishes a string value that labels the component.
+     */
     'aria-label'?: string | undefined;
 }
 
-export interface TriStateCheckboxSlots {
-}
+export interface TriStateCheckboxSlots {}
 
 export declare type TriStateCheckboxEmits = {
     /**
@@ -41,13 +40,13 @@ export declare type TriStateCheckboxEmits = {
      * @param {boolean|null|undefined} value - New value.
      */
     'update:modelValue': (value: Nullable<boolean>) => void;
-}
+};
 
-declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> { }
+declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TriStateCheckbox: GlobalComponentConstructor<TriStateCheckbox>
+        TriStateCheckbox: GlobalComponentConstructor<TriStateCheckbox>;
     }
 }
 
@@ -57,7 +56,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TriStateCheckbox](https://www.primefaces.org/primevue/showcase/#/tristatecheckbox)
+ * - [TriStateCheckbox](https://www.primefaces.org/primevue/tristatecheckbox)
  *
  */
 export default TriStateCheckbox;
diff --git a/components/tristatecheckbox/TriStateCheckbox.spec.js b/components/tristatecheckbox/TriStateCheckbox.spec.js
index 2dbb20295..2d607567c 100644
--- a/components/tristatecheckbox/TriStateCheckbox.spec.js
+++ b/components/tristatecheckbox/TriStateCheckbox.spec.js
@@ -1,47 +1,102 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import TriStateCheckbox from './TriStateCheckbox.vue';
 
-describe('TriStateCheckbox.vue', () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(TriStateCheckbox, {
-            props: {
-                modelValue: null
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    trueLabel: 'trueLabel',
+                    falseLabel: 'falseLabel',
+                    nullLabel: 'nullLabel'
+                }
             }
+        }
+    }
+};
+let wrapper;
+const modelValues = [true, false, null];
+const emittedResults = [false, null, true];
+
+describe('TriStateCheckbox.vue', () => {
+    beforeEach(() => {
+        wrapper = mount(TriStateCheckbox);
+    }),
+        describe('UpdateModel method tests', () => {
+            it('When disable props true updateModal should not triggered emit', async () => {
+                await wrapper.setProps({
+                    disabled: true,
+                    modelValue: null
+                });
+
+                wrapper.vm.updateModel();
+
+                expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+            });
+
+            it('When disable props false updateModal should triggered emit', () => {
+                wrapper.vm.updateModel();
+
+                expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+            });
+
+            modelValues.forEach((modelValue, index) => {
+                it('When modelValue changed update model emitted value should be change', async () => {
+                    await wrapper.setProps({
+                        modelValue
+                    });
+
+                    wrapper.vm.updateModel();
+
+                    expect(wrapper.emitted()['update:modelValue']).toEqual([[emittedResults[index]]]);
+                });
+            });
         });
+    it('When onClick method triggered some methods effect', () => {
+        const mockUpdateModel = jest.fn();
+
+        wrapper.vm.updateModel = mockUpdateModel;
+
+        wrapper.vm.onClick('test');
+
+        expect(wrapper.vm.updateModel).toBeCalled();
+        expect(wrapper.emitted()['click']).toBeTruthy();
+        expect(wrapper.emitted()['change']).toBeTruthy();
     });
 
-    it('is TriStateCheckbox exist', () => {
-        expect(wrapper.find('.p-checkbox.p-component').exists()).toBe(true);
+    it('When event.code is not equal Enter methods should not be effected', async () => {
+        wrapper.vm.onKeyDown({ code: 'test' });
+
+        expect(wrapper.emitted().keydown).toBeFalsy();
     });
 
-    it('is state changed', async () => {
-        await wrapper.vm.onClick({});
+    it('When event.code is equal Enter some methods should be triggered', async () => {
+        const mockUpdateModel = jest.fn();
 
-        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+        wrapper.vm.updateModel = mockUpdateModel;
 
-        await wrapper.setProps({modelValue: true});
-        await wrapper.vm.onClick({});
+        wrapper.vm.onKeyDown({ code: 'Enter', preventDefault: () => {} });
 
-        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
-
-        await wrapper.setProps({modelValue: false});
-        await wrapper.vm.onClick({});
-
-        expect(wrapper.emitted()['update:modelValue'][2]).toEqual([null]);
+        expect(wrapper.vm.updateModel).toBeCalled();
+        expect(wrapper.emitted().keydown).toBeTruthy();
     });
 
-    it('is icon chenaged', async () => {
+    it('When onBlur is triggered focused property should be false', async () => {
+        wrapper.vm.onBlur();
+
+        expect(wrapper.vm.focused).toBeFalsy();
+        expect(wrapper.emitted().blur).toBeTruthy();
+    });
+    it('is icon changed', async () => {
         expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-check');
         expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-times');
 
-        await wrapper.setProps({modelValue: true});
+        await wrapper.setProps({ modelValue: true });
 
         expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-check');
 
-        await wrapper.setProps({modelValue: false});
+        await wrapper.setProps({ modelValue: false });
 
         expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-times');
     });
-});
\ No newline at end of file
+});
diff --git a/components/tristatecheckbox/TriStateCheckbox.vue b/components/tristatecheckbox/TriStateCheckbox.vue
index b9c4e4070..01e5705ea 100755
--- a/components/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/tristatecheckbox/TriStateCheckbox.vue
@@ -1,11 +1,23 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" :checked="modelValue === true" :tabindex="tabindex" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @keydown="onKeyDown($event)" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps" >
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                :checked="modelValue === true"
+                :tabindex="tabindex"
+                :disabled="disabled"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @keydown="onKeyDown($event)"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </div>
-        <span class="p-sr-only" aria-live="polite">{{ariaValueLabel}}</span>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': disabled, 'p-focus': focused}]" >
+        <span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
             <span :class="['p-checkbox-icon', icon]"></span>
         </div>
     </div>
@@ -17,11 +29,17 @@ export default {
     emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
     props: {
         modelValue: null,
-        inputId: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         disabled: {
-			type: Boolean,
-			default: false
+            type: Boolean,
+            default: false
         },
         tabindex: {
             type: Number,
@@ -49,15 +67,15 @@ export default {
                 switch (this.modelValue) {
                     case true:
                         newValue = false;
-                    break;
+                        break;
 
                     case false:
                         newValue = null;
-                    break;
+                        break;
 
                     case null:
                         newValue = true;
-                    break;
+                        break;
                 }
 
                 this.$emit('update:modelValue', newValue);
@@ -88,33 +106,36 @@ export default {
     computed: {
         icon() {
             let icon;
+
             switch (this.modelValue) {
                 case true:
                     icon = 'pi pi-check';
-                break;
+                    break;
 
                 case false:
                     icon = 'pi pi-times';
-                break;
+                    break;
 
                 case null:
                     icon = null;
-                break;
+                    break;
             }
 
             return icon;
         },
         containerClass() {
             return [
-                'p-checkbox p-component', {
+                'p-checkbox p-component',
+                {
                     'p-checkbox-checked': this.modelValue === true,
                     'p-checkbox-disabled': this.disabled,
                     'p-checkbox-focused': this.focused
-            }];
+                }
+            ];
         },
         ariaValueLabel() {
-            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel;
         }
     }
-}
+};
 </script>
diff --git a/components/ts-helpers.d.ts b/components/ts-helpers.d.ts
index eff6d9786..d29930cd8 100644
--- a/components/ts-helpers.d.ts
+++ b/components/ts-helpers.d.ts
@@ -2,21 +2,27 @@ import { ComponentCustomProps, VNodeProps, EmitsOptions, AllowedComponentProps,
 
 declare type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps;
 
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
+declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 
-declare type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options> = Options extends Array<infer V> ? (event: V, ...args: any[]) => void : {} extends Options ? (event: string, ...args: any[]) => void : UnionToIntersection<{
-  [key in Event]: Options[key] extends ((...args: infer Args) => any) ? (event: key, ...args: Args) => void : (event: key, ...args: any[]) => void;
-}[Event]>;
+declare type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options> = Options extends Array<infer V>
+    ? (event: V, ...args: any[]) => void
+    : {} extends Options
+    ? (event: string, ...args: any[]) => void
+    : UnionToIntersection<
+          {
+              [key in Event]: Options[key] extends (...args: infer Args) => any ? (event: key, ...args: Args) => void : (event: key, ...args: any[]) => void;
+          }[Event]
+      >;
 
 export class ClassComponent<Props, Slots, Emits extends EmitsOptions = {}> {
-  $props: Props & PublicProps;
-  $slots: Slots;
-  $emit: EmitFn<Emits>;
+    $props: Props & PublicProps;
+    $slots: Slots;
+    $emit: EmitFn<Emits>;
 }
 
 export type GlobalComponentConstructor<T> = {
-  new (): T;
-}
+    new (): T;
+};
 
 /**
  * Custom types
diff --git a/components/useconfirm/UseConfirm.d.ts b/components/useconfirm/UseConfirm.d.ts
index 2fbb56622..21da667ef 100644
--- a/components/useconfirm/UseConfirm.d.ts
+++ b/components/useconfirm/UseConfirm.d.ts
@@ -3,4 +3,4 @@ import { ConfirmationOptions } from '../confirmationoptions';
 export declare function useConfirm(): {
     require: (option: ConfirmationOptions) => void;
     close: () => void;
-}
+};
diff --git a/components/useconfirm/UseConfirm.js b/components/useconfirm/UseConfirm.js
index c0a588441..dd82288d8 100644
--- a/components/useconfirm/UseConfirm.js
+++ b/components/useconfirm/UseConfirm.js
@@ -4,9 +4,10 @@ export const PrimeVueConfirmSymbol = Symbol();
 
 export function useConfirm() {
     const PrimeVueConfirm = inject(PrimeVueConfirmSymbol);
+
     if (!PrimeVueConfirm) {
         throw new Error('No PrimeVue Confirmation provided!');
-    } 
+    }
 
     return PrimeVueConfirm;
-}
\ No newline at end of file
+}
diff --git a/components/usedialog/UseDialog.d.ts b/components/usedialog/UseDialog.d.ts
index 47ebe9236..d195fac11 100644
--- a/components/usedialog/UseDialog.d.ts
+++ b/components/usedialog/UseDialog.d.ts
@@ -2,4 +2,4 @@ import { DynamicDialogOptions, DynamicDialogInstance } from '../dynamicdialogopt
 
 export declare function useDialog(): {
     open: (content: any, options?: DynamicDialogOptions) => DynamicDialogInstance;
-}
+};
diff --git a/components/usedialog/UseDialog.js b/components/usedialog/UseDialog.js
index 21fa4a313..b422d03be 100644
--- a/components/usedialog/UseDialog.js
+++ b/components/usedialog/UseDialog.js
@@ -4,9 +4,10 @@ export const PrimeVueDialogSymbol = Symbol();
 
 export function useDialog() {
     const PrimeVueDialog = inject(PrimeVueDialogSymbol);
+
     if (!PrimeVueDialog) {
         throw new Error('No PrimeVue Dialog provided!');
-    } 
+    }
 
     return PrimeVueDialog;
-}
\ No newline at end of file
+}
diff --git a/components/usetoast/UseToast.js b/components/usetoast/UseToast.js
index 24713327c..b69c68e70 100644
--- a/components/usetoast/UseToast.js
+++ b/components/usetoast/UseToast.js
@@ -4,9 +4,10 @@ export const PrimeVueToastSymbol = Symbol();
 
 export function useToast() {
     const PrimeVueToast = inject(PrimeVueToastSymbol);
+
     if (!PrimeVueToast) {
         throw new Error('No PrimeVue Toast provided!');
-    } 
+    }
 
     return PrimeVueToast;
-}
\ No newline at end of file
+}
diff --git a/components/utils/ConnectedOverlayScrollHandler.js b/components/utils/ConnectedOverlayScrollHandler.js
index d91b3a70e..052d03cda 100644
--- a/components/utils/ConnectedOverlayScrollHandler.js
+++ b/components/utils/ConnectedOverlayScrollHandler.js
@@ -1,7 +1,6 @@
 import DomHandler from './DomHandler';
 
 export default class ConnectedOverlayScrollHandler {
-
     constructor(element, listener = () => {}) {
         this.element = element;
         this.listener = listener;
@@ -9,6 +8,7 @@ export default class ConnectedOverlayScrollHandler {
 
     bindScrollListener() {
         this.scrollableParents = DomHandler.getScrollableParents(this.element);
+
         for (let i = 0; i < this.scrollableParents.length; i++) {
             this.scrollableParents[i].addEventListener('scroll', this.listener);
         }
diff --git a/components/utils/DomHandler.js b/components/utils/DomHandler.js
index a08973d0a..f348136da 100755
--- a/components/utils/DomHandler.js
+++ b/components/utils/DomHandler.js
@@ -1,13 +1,14 @@
-export default  {
-
+export default {
     innerWidth(el) {
         if (el) {
             let width = el.offsetWidth;
             let style = getComputedStyle(el);
 
             width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+
             return width;
         }
+
         return 0;
     },
 
@@ -17,18 +18,22 @@ export default  {
             let style = getComputedStyle(el);
 
             width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+
             return width;
         }
+
         return 0;
     },
 
     getWindowScrollTop() {
         let doc = document.documentElement;
+
         return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
     },
 
     getWindowScrollLeft() {
         let doc = document.documentElement;
+
         return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
     },
 
@@ -38,11 +43,13 @@ export default  {
 
             if (margin) {
                 let style = getComputedStyle(el);
+
                 width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
             }
 
             return width;
         }
+
         return 0;
     },
 
@@ -52,11 +59,13 @@ export default  {
 
             if (margin) {
                 let style = getComputedStyle(el);
+
                 height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
             }
 
             return height;
         }
+
         return 0;
     },
 
@@ -66,11 +75,13 @@ export default  {
 
             if (margin) {
                 let style = getComputedStyle(el);
+
                 height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
             }
 
             return height;
         }
+
         return 0;
     },
 
@@ -91,7 +102,7 @@ export default  {
 
             return {
                 top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
-                left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0),
+                left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
             };
         }
 
@@ -105,11 +116,13 @@ export default  {
         if (element) {
             let children = element.parentNode.childNodes;
             let num = 0;
+
             for (let i = 0; i < children.length; i++) {
                 if (children[i] === element) return num;
                 if (children[i].nodeType === 1) num++;
             }
         }
+
         return -1;
     },
 
@@ -117,13 +130,13 @@ export default  {
         if (element && className) {
             if (element.classList) {
                 let styles = className.split(' ');
+
                 for (let i = 0; i < styles.length; i++) {
                     element.classList.add(styles[i]);
                 }
-
-            }
-            else {
+            } else {
                 let styles = className.split(' ');
+
                 for (let i = 0; i < styles.length; i++) {
                     element.className += ' ' + styles[i];
                 }
@@ -133,28 +146,22 @@ export default  {
 
     addClass(element, className) {
         if (element && className) {
-            if (element.classList)
-                element.classList.add(className);
-            else
-                element.className += ' ' + className;
+            if (element.classList) element.classList.add(className);
+            else element.className += ' ' + className;
         }
     },
 
     removeClass(element, className) {
         if (element && className) {
-            if (element.classList)
-                element.classList.remove(className);
-            else
-                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+            if (element.classList) element.classList.remove(className);
+            else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
         }
     },
 
     hasClass(element, className) {
         if (element) {
-            if (element.classList)
-                return element.classList.contains(className);
-            else
-                return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+            if (element.classList) return element.classList.contains(className);
+            else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
         }
 
         return false;
@@ -168,6 +175,7 @@ export default  {
         if (element) {
             return element.querySelector(selector);
         }
+
         return null;
     },
 
@@ -180,6 +188,7 @@ export default  {
 
             return height;
         }
+
         return 0;
     },
 
@@ -192,12 +201,13 @@ export default  {
 
             return width;
         }
+
         return 0;
     },
 
     absolutePosition(element, target) {
         if (element) {
-            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element)
+            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
             let elementOuterHeight = elementDimensions.height;
             let elementOuterWidth = elementDimensions.width;
             let targetOuterHeight = target.offsetHeight;
@@ -215,16 +225,13 @@ export default  {
                 if (top < 0) {
                     top = windowScrollTop;
                 }
-            }
-            else {
+            } else {
                 top = targetOuterHeight + targetOffset.top + windowScrollTop;
                 element.style.transformOrigin = 'top';
             }
 
-            if (targetOffset.left + elementOuterWidth > viewport.width)
-                left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
-            else
-                left = targetOffset.left + windowScrollLeft;
+            if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+            else left = targetOffset.left + windowScrollLeft;
 
             element.style.top = top + 'px';
             element.style.left = left + 'px';
@@ -239,14 +246,14 @@ export default  {
             const viewport = this.getViewport();
             let top, left;
 
-            if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
-                top = -1 * (elementDimensions.height);
+            if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
+                top = -1 * elementDimensions.height;
                 element.style.transformOrigin = 'bottom';
+
                 if (targetOffset.top + top < 0) {
                     top = -1 * targetOffset.top;
                 }
-            }
-            else {
+            } else {
                 top = targetHeight;
                 element.style.transformOrigin = 'top';
             }
@@ -254,12 +261,10 @@ export default  {
             if (elementDimensions.width > viewport.width) {
                 // element wider then viewport and cannot fit on screen (align at left side of viewport)
                 left = targetOffset.left * -1;
-            }
-            else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
+            } else if (targetOffset.left + elementDimensions.width > viewport.width) {
                 // element wider then viewport but can be fit on screen (align at right side of viewport)
                 left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
-            }
-            else {
+            } else {
                 // element fits on screen (align with target)
                 left = 0;
             }
@@ -279,17 +284,22 @@ export default  {
         if (element) {
             let parents = this.getParents(element);
             const overflowRegex = /(auto|scroll)/;
+
             const overflowCheck = (node) => {
                 let styleDeclaration = window['getComputedStyle'](node, null);
+
                 return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
             };
 
             for (let parent of parents) {
                 let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+
                 if (scrollSelectors) {
                     let selectors = scrollSelectors.split(',');
+
                     for (let selector of selectors) {
                         let el = this.findSingle(parent, selector);
+
                         if (el && overflowCheck(el)) {
                             scrollableParents.push(el);
                         }
@@ -310,11 +320,13 @@ export default  {
             element.style.visibility = 'hidden';
             element.style.display = 'block';
             let elementHeight = element.offsetHeight;
+
             element.style.display = 'none';
             element.style.visibility = 'visible';
 
             return elementHeight;
         }
+
         return 0;
     },
 
@@ -323,17 +335,20 @@ export default  {
             element.style.visibility = 'hidden';
             element.style.display = 'block';
             let elementWidth = element.offsetWidth;
+
             element.style.display = 'none';
             element.style.visibility = 'visible';
 
             return elementWidth;
         }
+
         return 0;
     },
 
     getHiddenElementDimensions(element) {
         if (element) {
             let dimensions = {};
+
             element.style.visibility = 'hidden';
             element.style.display = 'block';
             dimensions.width = element.offsetWidth;
@@ -343,6 +358,7 @@ export default  {
 
             return dimensions;
         }
+
         return 0;
     },
 
@@ -352,6 +368,7 @@ export default  {
 
             let last = +new Date();
             let opacity = 0;
+
             let tick = function () {
                 opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
                 element.style.opacity = opacity;
@@ -391,12 +408,9 @@ export default  {
     },
 
     appendChild(element, target) {
-        if (this.isElement(target))
-            target.appendChild(element);
-        else if (target.el && target.elElement)
-            target.elElement.appendChild(element);
-        else
-            throw new Error('Cannot append ' + target + ' to ' + element);
+        if (this.isElement(target)) target.appendChild(element);
+        else if (target.el && target.elElement) target.elElement.appendChild(element);
+        else throw new Error('Cannot append ' + target + ' to ' + element);
     },
 
     scrollInView(container, item) {
@@ -406,15 +420,14 @@ export default  {
         let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
         let containerRect = container.getBoundingClientRect();
         let itemRect = item.getBoundingClientRect();
-        let offset = (itemRect.top + document.body.scrollTop) - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
+        let offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
         let scroll = container.scrollTop;
         let elementHeight = container.clientHeight;
         let itemHeight = this.getOuterHeight(item);
 
         if (offset < 0) {
             container.scrollTop = scroll + offset;
-        }
-        else if ((offset + itemHeight) > elementHeight) {
+        } else if (offset + itemHeight > elementHeight) {
             container.scrollTop = scroll + offset - elementHeight + itemHeight;
         }
     },
@@ -426,25 +439,25 @@ export default  {
             } else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
                 window.getSelection().removeAllRanges();
             }
-        }
-        else if (document['selection'] && document['selection'].empty) {
+        } else if (document['selection'] && document['selection'].empty) {
             try {
                 document['selection'].empty();
-            } catch(error) {
+            } catch (error) {
                 //ignore IE bug
             }
         }
     },
 
     calculateScrollbarWidth() {
-        if (this.calculatedScrollbarWidth != null)
-            return this.calculatedScrollbarWidth;
+        if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
 
-        let scrollDiv = document.createElement("div");
-        scrollDiv.className = "p-scrollbar-measure";
+        let scrollDiv = document.createElement('div');
+
+        scrollDiv.className = 'p-scrollbar-measure';
         document.body.appendChild(scrollDiv);
 
         let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
         document.body.removeChild(scrollDiv);
 
         this.calculatedScrollbarWidth = scrollbarWidth;
@@ -455,6 +468,7 @@ export default  {
     getBrowser() {
         if (!this.browser) {
             let matched = this.resolveUserAgent();
+
             this.browser = {};
 
             if (matched.browser) {
@@ -474,16 +488,11 @@ export default  {
 
     resolveUserAgent() {
         let ua = navigator.userAgent.toLowerCase();
-        let match = /(chrome)[ ]([\w.]+)/.exec(ua) ||
-            /(webkit)[ ]([\w.]+)/.exec(ua) ||
-            /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) ||
-            /(msie) ([\w.]+)/.exec(ua) ||
-            (ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) ||
-            [];
+        let match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || (ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || [];
 
         return {
-            browser: match[1] || "",
-            version: match[2] || "0"
+            browser: match[1] || '',
+            version: match[2] || '0'
         };
     },
 
@@ -492,15 +501,25 @@ export default  {
     },
 
     invokeElementMethod(element, methodName, args) {
-        (element)[methodName].apply(element, args);
+        element[methodName].apply(element, args);
+    },
+
+    isExist(element) {
+        return element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode;
     },
 
     isClient() {
         return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     },
 
+    focus(el, options) {
+        el && document.activeElement !== el && el.focus(options);
+    },
+
     getFocusableElements(element, selector = '') {
-        let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        let focusableElements = this.find(
+            element,
+            `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
                 [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
                 input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
                 select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
@@ -510,9 +529,9 @@ export default  {
         );
 
         let visibleFocusableElements = [];
+
         for (let focusableElement of focusableElements) {
-            if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
-                visibleFocusableElements.push(focusableElement);
+            if (getComputedStyle(focusableElement).display != 'none' && getComputedStyle(focusableElement).visibility != 'hidden') visibleFocusableElements.push(focusableElement);
         }
 
         return visibleFocusableElements;
@@ -520,6 +539,7 @@ export default  {
 
     getFirstFocusableElement(element, selector) {
         const focusableElements = this.getFocusableElements(element, selector);
+
         return focusableElements.length > 0 ? focusableElements[0] : null;
     },
 
@@ -527,18 +547,24 @@ export default  {
         const targetNode = element.nodeName;
         const parentNode = element.parentElement && element.parentElement.nodeName;
 
-        return (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
-                parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
-                this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') ||
-                this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton')
+        return (
+            targetNode == 'INPUT' ||
+            targetNode == 'BUTTON' ||
+            targetNode == 'A' ||
+            parentNode == 'INPUT' ||
+            parentNode == 'BUTTON' ||
+            parentNode == 'A' ||
+            this.hasClass(element, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-checkbox') ||
+            this.hasClass(element.parentElement, 'p-radiobutton')
         );
     },
 
     applyStyle(element, style) {
         if (typeof style === 'string') {
             element.style.cssText = style;
-        }
-        else {
+        } else {
             for (let prop in style) {
                 element.style[prop] = style[prop];
             }
@@ -554,7 +580,7 @@ export default  {
     },
 
     isTouchDevice() {
-        return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
     },
 
     exportCSV(csv, filename) {
@@ -564,9 +590,9 @@ export default  {
 
         if (window.navigator.msSaveOrOpenBlob) {
             navigator.msSaveOrOpenBlob(blob, filename + '.csv');
-        }
-        else {
-            let link = document.createElement("a");
+        } else {
+            let link = document.createElement('a');
+
             if (link.download !== undefined) {
                 link.setAttribute('href', URL.createObjectURL(blob));
                 link.setAttribute('download', filename + '.csv');
@@ -574,11 +600,10 @@ export default  {
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
-            }
-            else {
+            } else {
                 csv = 'data:text/csv;charset=utf-8,' + csv;
                 window.open(encodeURI(csv));
             }
         }
     }
-}
+};
diff --git a/components/utils/EventBus.js b/components/utils/EventBus.js
index 6a8f12215..85c0f845b 100644
--- a/components/utils/EventBus.js
+++ b/components/utils/EventBus.js
@@ -1,29 +1,32 @@
 export default function primebus() {
-	const allHandlers = new Map();
+    const allHandlers = new Map();
 
-	return {
-		on(type, handler) {
-			let handlers = allHandlers.get(type);
-            if (!handlers)
-                handlers = [handler];
-            else
-                handlers.push(handler);
+    return {
+        on(type, handler) {
+            let handlers = allHandlers.get(type);
+
+            if (!handlers) handlers = [handler];
+            else handlers.push(handler);
 
             allHandlers.set(type, handlers);
-		},
+        },
 
-		off(type, handler) {
-			let handlers = allHandlers.get(type);
-			if (handlers) {
-				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
-			}
-		},
-
-		emit(type, evt) {
+        off(type, handler) {
             let handlers = allHandlers.get(type);
+
             if (handlers) {
-                handlers.slice().map((handler) => { handler(evt);});
+                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
             }
-		}
-	};
-}
\ No newline at end of file
+        },
+
+        emit(type, evt) {
+            let handlers = allHandlers.get(type);
+
+            if (handlers) {
+                handlers.slice().map((handler) => {
+                    handler(evt);
+                });
+            }
+        }
+    };
+}
diff --git a/components/utils/ObjectUtils.js b/components/utils/ObjectUtils.js
index a6c217167..845aeee19 100755
--- a/components/utils/ObjectUtils.js
+++ b/components/utils/ObjectUtils.js
@@ -1,52 +1,50 @@
 export default {
-
     equals(obj1, obj2, field) {
-        if (field)
-            return (this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field));
-        else
-            return this.deepEquals(obj1, obj2);
+        if (field) return this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field);
+        else return this.deepEquals(obj1, obj2);
     },
 
     deepEquals(a, b) {
         if (a === b) return true;
 
         if (a && b && typeof a == 'object' && typeof b == 'object') {
-            var arrA = Array.isArray(a)
-                , arrB = Array.isArray(b)
-                , i
-                , length
-                , key;
+            var arrA = Array.isArray(a),
+                arrB = Array.isArray(b),
+                i,
+                length,
+                key;
 
             if (arrA && arrB) {
                 length = a.length;
                 if (length != b.length) return false;
-                for (i = length; i-- !== 0;)
-                    if (!this.deepEquals(a[i], b[i])) return false;
+                for (i = length; i-- !== 0; ) if (!this.deepEquals(a[i], b[i])) return false;
+
                 return true;
             }
 
             if (arrA != arrB) return false;
 
-            var dateA = a instanceof Date
-                , dateB = b instanceof Date;
+            var dateA = a instanceof Date,
+                dateB = b instanceof Date;
+
             if (dateA != dateB) return false;
             if (dateA && dateB) return a.getTime() == b.getTime();
 
-            var regexpA = a instanceof RegExp
-                , regexpB = b instanceof RegExp;
+            var regexpA = a instanceof RegExp,
+                regexpB = b instanceof RegExp;
+
             if (regexpA != regexpB) return false;
             if (regexpA && regexpB) return a.toString() == b.toString();
 
             var keys = Object.keys(a);
+
             length = keys.length;
 
-            if (length !== Object.keys(b).length)
-                return false;
+            if (length !== Object.keys(b).length) return false;
 
-            for (i = length; i-- !== 0;)
-                if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+            for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
 
-            for (i = length; i-- !== 0;) {
+            for (i = length; i-- !== 0; ) {
                 key = keys[i];
                 if (!this.deepEquals(a[key], b[key])) return false;
             }
@@ -61,23 +59,23 @@ export default {
         if (data && Object.keys(data).length && field) {
             if (this.isFunction(field)) {
                 return field(data);
-            }
-            else if(field.indexOf('.') === -1) {
+            } else if (field.indexOf('.') === -1) {
                 return data[field];
-            }
-            else {
+            } else {
                 let fields = field.split('.');
                 let value = data;
-                for(var i = 0, len = fields.length; i < len; ++i) {
+
+                for (var i = 0, len = fields.length; i < len; ++i) {
                     if (value == null) {
                         return null;
                     }
+
                     value = value[fields[i]];
                 }
+
                 return value;
             }
-        }
-        else {
+        } else {
             return null;
         }
     },
@@ -109,13 +107,16 @@ export default {
 
     reorderArray(value, from, to) {
         let target;
-        if (value && (from !== to)) {
+
+        if (value && from !== to) {
             if (to >= value.length) {
                 target = to - value.length;
-                while ((target--) + 1) {
+
+                while (target-- + 1) {
                     value.push(undefined);
                 }
             }
+
             value.splice(to, 0, value.splice(from, 1)[0]);
         }
     },
@@ -138,8 +139,7 @@ export default {
     contains(value, list) {
         if (value != null && list && list.length) {
             for (let val of list) {
-                if (this.equals(value, val))
-                    return true;
+                if (this.equals(value, val)) return true;
             }
         }
 
@@ -149,8 +149,10 @@ export default {
     insertIntoOrderedArray(item, index, arr, sourceArr) {
         if (arr.length > 0) {
             let injected = false;
+
             for (let i = 0; i < arr.length; i++) {
                 let currentItemIndex = this.findIndexInList(arr[i], sourceArr);
+
                 if (currentItemIndex > index) {
                     arr.splice(i, 0, item);
                     injected = true;
@@ -161,8 +163,7 @@ export default {
             if (!injected) {
                 arr.push(item);
             }
-        }
-        else {
+        } else {
             arr.push(item);
         }
     },
@@ -170,27 +171,27 @@ export default {
     removeAccents(str) {
         if (str && str.search(/[\xC0-\xFF]/g) > -1) {
             str = str
-                    .replace(/[\xC0-\xC5]/g, "A")
-                    .replace(/[\xC6]/g, "AE")
-                    .replace(/[\xC7]/g, "C")
-                    .replace(/[\xC8-\xCB]/g, "E")
-                    .replace(/[\xCC-\xCF]/g, "I")
-                    .replace(/[\xD0]/g, "D")
-                    .replace(/[\xD1]/g, "N")
-                    .replace(/[\xD2-\xD6\xD8]/g, "O")
-                    .replace(/[\xD9-\xDC]/g, "U")
-                    .replace(/[\xDD]/g, "Y")
-                    .replace(/[\xDE]/g, "P")
-                    .replace(/[\xE0-\xE5]/g, "a")
-                    .replace(/[\xE6]/g, "ae")
-                    .replace(/[\xE7]/g, "c")
-                    .replace(/[\xE8-\xEB]/g, "e")
-                    .replace(/[\xEC-\xEF]/g, "i")
-                    .replace(/[\xF1]/g, "n")
-                    .replace(/[\xF2-\xF6\xF8]/g, "o")
-                    .replace(/[\xF9-\xFC]/g, "u")
-                    .replace(/[\xFE]/g, "p")
-                    .replace(/[\xFD\xFF]/g, "y");
+                .replace(/[\xC0-\xC5]/g, 'A')
+                .replace(/[\xC6]/g, 'AE')
+                .replace(/[\xC7]/g, 'C')
+                .replace(/[\xC8-\xCB]/g, 'E')
+                .replace(/[\xCC-\xCF]/g, 'I')
+                .replace(/[\xD0]/g, 'D')
+                .replace(/[\xD1]/g, 'N')
+                .replace(/[\xD2-\xD6\xD8]/g, 'O')
+                .replace(/[\xD9-\xDC]/g, 'U')
+                .replace(/[\xDD]/g, 'Y')
+                .replace(/[\xDE]/g, 'P')
+                .replace(/[\xE0-\xE5]/g, 'a')
+                .replace(/[\xE6]/g, 'ae')
+                .replace(/[\xE7]/g, 'c')
+                .replace(/[\xE8-\xEB]/g, 'e')
+                .replace(/[\xEC-\xEF]/g, 'i')
+                .replace(/[\xF1]/g, 'n')
+                .replace(/[\xF2-\xF6\xF8]/g, 'o')
+                .replace(/[\xF9-\xFC]/g, 'u')
+                .replace(/[\xFE]/g, 'p')
+                .replace(/[\xFD\xFF]/g, 'y');
         }
 
         return str;
@@ -198,22 +199,19 @@ export default {
 
     getVNodeProp(vnode, prop) {
         let props = vnode.props;
+
         if (props) {
             let kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
             let propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
 
-            return ((vnode.type.props[prop].type === Boolean && props[propName] === '') ? true : props[propName]);
+            return vnode.type.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
         }
 
         return null;
     },
 
     isEmpty(value) {
-        return (
-            value === null || value === undefined || value === '' ||
-            (Array.isArray(value) && value.length === 0) ||
-            (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0)
-        );
+        return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
     },
 
     isNotEmpty(value) {
@@ -234,12 +232,11 @@ export default {
         if (this.isNotEmpty(arr)) {
             try {
                 index = arr.findLastIndex(callback);
-            }
-            catch {
+            } catch {
                 index = arr.lastIndexOf([...arr].reverse().find(callback));
             }
         }
 
         return index;
     }
-}
+};
diff --git a/components/utils/UniqueComponentId.js b/components/utils/UniqueComponentId.js
index 73202969a..ccb65ff83 100755
--- a/components/utils/UniqueComponentId.js
+++ b/components/utils/UniqueComponentId.js
@@ -2,5 +2,6 @@ var lastId = 0;
 
 export default function (prefix = 'pv_id_') {
     lastId++;
+
     return `${prefix}${lastId}`;
-}
\ No newline at end of file
+}
diff --git a/components/utils/Utils.d.ts b/components/utils/Utils.d.ts
index 282072672..a378c8a3b 100644
--- a/components/utils/Utils.d.ts
+++ b/components/utils/Utils.d.ts
@@ -13,8 +13,8 @@ export declare class DomHandler {
     static getOuterWidth(el: HTMLElement, margin: boolean): number;
     static getOuterHeight(el: HTMLElement, margin: boolean): number;
     static getClientHeight(el: HTMLElement, margin: boolean): number;
-    static getViewport(): { width: number; height: number; };
-    static getOffset(el: HTMLElement): { top: any; left: any; };
+    static getViewport(): { width: number; height: number };
+    static getOffset(el: HTMLElement): { top: any; left: any };
     static index(el: HTMLElement): number;
     static addMultipleClasses(el: HTMLElement, className: string): void;
     static addClass(el: HTMLElement, className: string): void;
@@ -30,7 +30,7 @@ export declare class DomHandler {
     static getScrollableParents(el: HTMLElement): any[];
     static getHiddenElementOuterHeight(el: HTMLElement): number;
     static getHiddenElementOuterWidth(el: HTMLElement): number;
-    static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number; };
+    static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number };
     static fadeIn(el: HTMLElement, duration: number): void;
     static fadeOut(el: HTMLElement, duration: number): void;
     static getUserAgent(): string;
@@ -39,10 +39,12 @@ export declare class DomHandler {
     static clearSelection(): void;
     static calculateScrollbarWidth(): number;
     static getBrowser(): object;
-    static resolveUserAgent(): { browser: string; version: string; };
+    static resolveUserAgent(): { browser: string; version: string };
     static isVisible(el: HTMLElement): boolean;
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
+    static isExist(el: HTMLElement): boolean;
     static isClient(): boolean;
+    static focus(el: HTMLElement, options?: FocusOptions): void;
     static getFocusableElements(el: HTMLElement, selector?: string): any[];
     static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
     static isClickable(el: HTMLElement): boolean;
@@ -82,4 +84,4 @@ export declare function EventBus(): {
     on(type: string, fn: any): void;
     emit(type: string, evt?: any): void;
     off(type: string, fn: any): void;
-}
+};
diff --git a/components/utils/Utils.js b/components/utils/Utils.js
index 7fb0c477f..01879ce2a 100644
--- a/components/utils/Utils.js
+++ b/components/utils/Utils.js
@@ -5,4 +5,4 @@ import ZIndexUtils from './ZIndexUtils';
 import UniqueComponentId from './UniqueComponentId';
 import EventBus from './EventBus';
 
-export {ConnectedOverlayScrollHandler,DomHandler,ObjectUtils,ZIndexUtils,UniqueComponentId,EventBus};
\ No newline at end of file
+export { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId, EventBus };
diff --git a/components/utils/ZIndexUtils.js b/components/utils/ZIndexUtils.js
index 5d7ba543d..744a4094e 100644
--- a/components/utils/ZIndexUtils.js
+++ b/components/utils/ZIndexUtils.js
@@ -6,20 +6,21 @@ function handler() {
         let newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
 
         zIndexes.push({ key, value: newZIndex });
+
         return newZIndex;
-    }
+    };
 
     const revertZIndex = (zIndex) => {
-        zIndexes = zIndexes.filter(obj => obj.value !== zIndex);
-    }
+        zIndexes = zIndexes.filter((obj) => obj.value !== zIndex);
+    };
 
     const getCurrentZIndex = () => {
         return zIndexes.length > 0 ? zIndexes[zIndexes.length - 1].value : 0;
-    }
+    };
 
     const getZIndex = (el) => {
-        return el ? parseInt(el.style.zIndex, 10) || 0 : 0
-    }
+        return el ? parseInt(el.style.zIndex, 10) || 0 : 0;
+    };
 
     return {
         get: getZIndex,
@@ -38,4 +39,4 @@ function handler() {
     };
 }
 
-export default handler();
\ No newline at end of file
+export default handler();
diff --git a/components/virtualscroller/VirtualScroller.d.ts b/components/virtualscroller/VirtualScroller.d.ts
index f98bdcdd5..1b1cbcfcc 100644
--- a/components/virtualscroller/VirtualScroller.d.ts
+++ b/components/virtualscroller/VirtualScroller.d.ts
@@ -23,12 +23,12 @@ export interface VirtualScrollerScrollIndexChangeEvent {
 /**
  * @extends VirtualScrollerScrollIndexChangeEvent
  */
-export interface VirtualScrollerLazyEvent extends VirtualScrollerScrollIndexChangeEvent { }
+export interface VirtualScrollerLazyEvent extends VirtualScrollerScrollIndexChangeEvent {}
 
 /**
  * @extends VirtualScrollerScrollIndexChangeEvent
  */
-export interface VirtualScrollerViewport extends VirtualScrollerScrollIndexChangeEvent { }
+export interface VirtualScrollerViewport extends VirtualScrollerScrollIndexChangeEvent {}
 
 export interface VirtualScrollerRangeMethod {
     /**
@@ -80,7 +80,7 @@ export interface VirtualScrollerItemOptions {
 /**
  * @extends VirtualScrollerItemOptions
  */
-export interface VirtualScrollerLoaderOptions extends VirtualScrollerItemOptions { }
+export interface VirtualScrollerLoaderOptions extends VirtualScrollerItemOptions {}
 
 export interface VirtualScrollerProps {
     /**
@@ -268,19 +268,19 @@ export declare type VirtualScrollerEmits = {
     /**
      * Callback to invoke when scroll position changes.
      * @param {Event} event - Browser event.
-    */
-    'scroll': (event: Event) => void;
+     */
+    scroll: (event: Event) => void;
     /**
      * Callback to invoke when scroll position and item's range in view changes.
      * @param {AccordionTabOpenEvent} event - Custom tab open event.
-    */
+     */
     'scroll-index-change': (event: VirtualScrollerScrollIndexChangeEvent) => void;
     /**
      * Callback to invoke in lazy mode to load new data.
      * @param {VirtualScrollerLazyEvent} event - Custom lazy event.
      */
     'lazy-load': (event: VirtualScrollerLazyEvent) => void;
-}
+};
 
 declare class VirtualScroller extends ClassComponent<VirtualScrollerProps, VirtualScrollerSlots, VirtualScrollerEmits> {
     /**
@@ -309,7 +309,7 @@ declare class VirtualScroller extends ClassComponent<VirtualScrollerProps, Virtu
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        VirtualScroller: GlobalComponentConstructor<VirtualScroller>
+        VirtualScroller: GlobalComponentConstructor<VirtualScroller>;
     }
 }
 
@@ -319,7 +319,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [VirtualScroller](https://www.primefaces.org/primevue/showcase/#/virtualscroller)
+ * - [VirtualScroller](https://www.primefaces.org/primevue/virtualscroller)
  *
  */
 export default VirtualScroller;
diff --git a/components/virtualscroller/VirtualScroller.vue b/components/virtualscroller/VirtualScroller.vue
index 021987a08..93efe8ac2 100644
--- a/components/virtualscroller/VirtualScroller.vue
+++ b/components/virtualscroller/VirtualScroller.vue
@@ -1,17 +1,31 @@
 <template>
     <template v-if="!disabled">
         <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll">
-            <slot name="content" :styleClass="contentClass" :items="loadedItems" :getItemOptions="getOptions" :loading="d_loading" :getLoaderOptions="getLoaderOptions" :itemSize="itemSize"
-                :rows="loadedRows" :columns="loadedColumns" :contentRef="contentRef" :spacerStyle="spacerStyle" :contentStyle="contentStyle"
-                :vertical="isVertical()" :horizontal="isHorizontal()" :both="isBoth()">
+            <slot
+                name="content"
+                :styleClass="contentClass"
+                :items="loadedItems"
+                :getItemOptions="getOptions"
+                :loading="d_loading"
+                :getLoaderOptions="getLoaderOptions"
+                :itemSize="itemSize"
+                :rows="loadedRows"
+                :columns="loadedColumns"
+                :contentRef="contentRef"
+                :spacerStyle="spacerStyle"
+                :contentStyle="contentStyle"
+                :vertical="isVertical()"
+                :horizontal="isHorizontal()"
+                :both="isBoth()"
+            >
                 <div :ref="contentRef" :class="contentClass" :style="contentStyle">
                     <template v-for="(item, index) of loadedItems" :key="index">
                         <slot name="item" :item="item" :options="getOptions(index)"></slot>
                     </template>
                 </div>
             </slot>
-            <div class="p-virtualscroller-spacer" :style="spacerStyle" v-if="showSpacer"></div>
-            <div :class="loaderClass" v-if="!loaderDisabled && showLoader && d_loading">
+            <div v-if="showSpacer" class="p-virtualscroller-spacer" :style="spacerStyle"></div>
+            <div v-if="!loaderDisabled && showLoader && d_loading" :class="loaderClass">
                 <template v-if="$slots && $slots.loader">
                     <template v-for="(_, index) of loaderArr" :key="index">
                         <slot name="loader" :options="getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })"></slot>
@@ -43,7 +57,7 @@ export default {
             default: null
         },
         itemSize: {
-            type: [Number,Array],
+            type: [Number, Array],
             default: 0
         },
         scrollHeight: null,
@@ -104,17 +118,12 @@ export default {
             loaderArr: [],
             spacerStyle: {},
             contentStyle: {}
-        }
+        };
     },
     element: null,
     content: null,
     lastScrollPos: null,
     scrollTimeout: null,
-    mounted() {
-        this.init();
-
-        this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;
-    },
     watch: {
         numToleratedItems(newValue) {
             this.d_numToleratedItems = newValue;
@@ -131,6 +140,11 @@ export default {
             this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;
         }
     },
+    mounted() {
+        this.init();
+
+        this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;
+    },
     methods: {
         init() {
             this.setSize();
@@ -156,17 +170,18 @@ export default {
             const { numToleratedItems } = this.calculateNumItems();
             const itemSize = this.itemSize;
             const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);
-            const calculateCoord = (_first, _size) => (_first * _size);
+            const calculateCoord = (_first, _size) => _first * _size;
             const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });
 
             if (both) {
                 const newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };
+
                 if (newFirst.rows !== first.rows || newFirst.cols !== first.cols) {
-                    scrollTo(calculateCoord(newFirst.cols, itemSize[1]), calculateCoord(newFirst.rows, itemSize[0]))
+                    scrollTo(calculateCoord(newFirst.cols, itemSize[1]), calculateCoord(newFirst.rows, itemSize[0]));
                 }
-            }
-            else {
+            } else {
                 const newFirst = calculateFirst(index, numToleratedItems);
+
                 if (newFirst !== first) {
                     horizontal ? scrollTo(calculateCoord(newFirst, itemSize), 0) : scrollTo(0, calculateCoord(newFirst, itemSize));
                 }
@@ -185,36 +200,32 @@ export default {
                     if (both) {
                         if (viewport.first.rows - first.rows > index[0]) {
                             scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows - 1) * this.itemSize[0]);
-                        }
-                        else if (viewport.first.cols - first.cols > index[1]) {
+                        } else if (viewport.first.cols - first.cols > index[1]) {
                             scrollTo((viewport.first.cols - 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);
                         }
-                    }
-                    else {
+                    } else {
                         if (viewport.first - first > index) {
                             const pos = (viewport.first - 1) * this.itemSize;
+
                             horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);
                         }
                     }
-                }
-                else if (isToEnd) {
+                } else if (isToEnd) {
                     if (both) {
                         if (viewport.last.rows - first.rows <= index[0] + 1) {
                             scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows + 1) * this.itemSize[0]);
-                        }
-                        else if (viewport.last.cols - first.cols <= index[1] + 1) {
+                        } else if (viewport.last.cols - first.cols <= index[1] + 1) {
                             scrollTo((viewport.first.cols + 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);
                         }
-                    }
-                    else {
+                    } else {
                         if (viewport.last - first <= index + 1) {
                             const pos = (viewport.first + 1) * this.itemSize;
+
                             horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);
                         }
                     }
                 }
-            }
-            else {
+            } else {
                 this.scrollToIndex(index, behavior);
             }
         },
@@ -233,9 +244,9 @@ export default {
                 if (both) {
                     firstInViewport = { rows: calculateFirstInViewport(scrollTop, this.itemSize[0]), cols: calculateFirstInViewport(scrollLeft, this.itemSize[1]) };
                     lastInViewport = { rows: firstInViewport.rows + this.numItemsInViewport.rows, cols: firstInViewport.cols + this.numItemsInViewport.cols };
-                }
-                else {
+                } else {
                     const scrollPos = horizontal ? scrollLeft : scrollTop;
+
                     firstInViewport = calculateFirstInViewport(scrollPos, this.itemSize);
                     lastInViewport = firstInViewport + this.numItemsInViewport;
                 }
@@ -259,13 +270,11 @@ export default {
             const contentHeight = this.element ? this.element.offsetHeight - contentPos.top : 0;
             const calculateNumItemsInViewport = (_contentSize, _itemSize) => Math.ceil(_contentSize / (_itemSize || _contentSize));
             const calculateNumToleratedItems = (_numItems) => Math.ceil(_numItems / 2);
-            const numItemsInViewport = both ?
-                { rows: calculateNumItemsInViewport(contentHeight, itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, itemSize[1]) } :
-                calculateNumItemsInViewport((horizontal ? contentWidth : contentHeight), itemSize);
+            const numItemsInViewport = both
+                ? { rows: calculateNumItemsInViewport(contentHeight, itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, itemSize[1]) }
+                : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, itemSize);
 
-            const numToleratedItems = this.d_numToleratedItems || (both ?
-                [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] :
-                calculateNumToleratedItems(numItemsInViewport));
+            const numToleratedItems = this.d_numToleratedItems || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
 
             return { numItemsInViewport, numToleratedItems };
         },
@@ -273,10 +282,10 @@ export default {
             const both = this.isBoth();
             const first = this.first;
             const { numItemsInViewport, numToleratedItems } = this.calculateNumItems();
-            const calculateLast = (_first, _num, _numT, _isCols) => this.getLast(_first + _num + ((_first < _numT ? 2 : 3) * _numT), _isCols);
-            const last = both ?
-                { rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true) } :
-                calculateLast(first, numItemsInViewport, numToleratedItems);
+            const calculateLast = (_first, _num, _numT, _isCols) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
+            const last = both
+                ? { rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true) }
+                : calculateLast(first, numItemsInViewport, numToleratedItems);
 
             this.last = last;
             this.numItemsInViewport = numItemsInViewport;
@@ -284,9 +293,7 @@ export default {
             this.$emit('update:numToleratedItems', this.d_numToleratedItems);
 
             if (this.showLoader) {
-                this.loaderArr = both ?
-                    Array.from({ length: numItemsInViewport.rows }).map(() => Array.from({ length: numItemsInViewport.cols })) :
-                    Array.from({ length: numItemsInViewport });
+                this.loaderArr = both ? Array.from({ length: numItemsInViewport.rows }).map(() => Array.from({ length: numItemsInViewport.cols })) : Array.from({ length: numItemsInViewport });
             }
 
             if (this.lazy) {
@@ -295,7 +302,7 @@ export default {
         },
         getLast(last = 0, isCols) {
             if (this.items) {
-                return Math.min((isCols ? (this.columns || this.items[0]).length : this.items.length), last);
+                return Math.min(isCols ? (this.columns || this.items[0]).length : this.items.length, last);
             }
 
             return 0;
@@ -318,15 +325,14 @@ export default {
                 const both = this.isBoth();
                 const horizontal = this.isHorizontal();
                 const parentElement = this.element.parentElement;
-                const width = this.scrollWidth || `${(this.element.offsetWidth || parentElement.offsetWidth)}px`;
-                const height = this.scrollHeight || `${(this.element.offsetHeight || parentElement.offsetHeight)}px`;
-                const setProp = (_name, _value) => this.element.style[_name] = _value;
+                const width = this.scrollWidth || `${this.element.offsetWidth || parentElement.offsetWidth}px`;
+                const height = this.scrollHeight || `${this.element.offsetHeight || parentElement.offsetHeight}px`;
+                const setProp = (_name, _value) => (this.element.style[_name] = _value);
 
                 if (both || horizontal) {
                     setProp('height', height);
                     setProp('width', width);
-                }
-                else {
+                } else {
                     setProp('height', height);
                 }
             }
@@ -338,14 +344,13 @@ export default {
                 const both = this.isBoth();
                 const horizontal = this.isHorizontal();
                 const contentPos = this.getContentPosition();
-                const setProp = (_name, _value, _size, _cpos = 0) => this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (((_value || []).length * _size) + _cpos) + 'px' } };
+                const setProp = (_name, _value, _size, _cpos = 0) => (this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });
 
                 if (both) {
                     setProp('height', items, this.itemSize[0], contentPos.y);
-                    setProp('width', (this.columns || items[1]), this.itemSize[1], contentPos.x);
-                }
-                else {
-                    horizontal ? setProp('width', (this.columns || items), this.itemSize, contentPos.x) : setProp('height', items, this.itemSize, contentPos.y);
+                    setProp('width', this.columns || items[1], this.itemSize[1], contentPos.x);
+                } else {
+                    horizontal ? setProp('width', this.columns || items, this.itemSize, contentPos.x) : setProp('height', items, this.itemSize, contentPos.y);
                 }
             }
         },
@@ -354,16 +359,17 @@ export default {
                 const both = this.isBoth();
                 const horizontal = this.isHorizontal();
                 const first = pos ? pos.first : this.first;
-                const calculateTranslateVal = (_first, _size) => (_first * _size);
+                const calculateTranslateVal = (_first, _size) => _first * _size;
+
                 const setTransform = (_x = 0, _y = 0) => {
                     this.contentStyle = { ...this.contentStyle, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } };
                 };
 
                 if (both) {
                     setTransform(calculateTranslateVal(first.cols, this.itemSize[1]), calculateTranslateVal(first.rows, this.itemSize[0]));
-                }
-                else {
+                } else {
                     const translateVal = calculateTranslateVal(first, this.itemSize);
+
                     horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
                 }
             }
@@ -373,24 +379,23 @@ export default {
             const both = this.isBoth();
             const horizontal = this.isHorizontal();
             const contentPos = this.getContentPosition();
-            const calculateScrollPos = (_pos, _cpos) => _pos ? (_pos > _cpos ? _pos - _cpos : _pos) : 0;
+            const calculateScrollPos = (_pos, _cpos) => (_pos ? (_pos > _cpos ? _pos - _cpos : _pos) : 0);
             const calculateCurrentIndex = (_pos, _size) => Math.floor(_pos / (_size || _pos));
+
             const calculateTriggerIndex = (_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
-                return (_currentIndex <= _numT ? _numT : (_isScrollDownOrRight ? (_last - _num - _numT) : (_first + _numT - 1)))
+                return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
             };
+
             const calculateFirst = (_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
-                if (_currentIndex <= _numT)
-                    return 0;
-                else
-                    return Math.max(0, _isScrollDownOrRight ?
-                            (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) :
-                            (_currentIndex > _triggerIndex ? _first : _currentIndex - (2 * _numT)));
+                if (_currentIndex <= _numT) return 0;
+                else return Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
             };
+
             const calculateLast = (_currentIndex, _first, _last, _num, _numT, _isCols) => {
-                let lastValue = _first + _num + (2 * _numT);
+                let lastValue = _first + _num + 2 * _numT;
 
                 if (_currentIndex >= _numT) {
-                    lastValue += (_numT + 1);
+                    lastValue += _numT + 1;
                 }
 
                 return this.getLast(lastValue, _isCols);
@@ -422,10 +427,9 @@ export default {
                     cols: calculateLast(currentIndex.cols, newFirst.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], true)
                 };
 
-                isRangeChanged = (newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows) || (newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols);
+                isRangeChanged = newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows || newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols;
                 newScrollPos = { top: scrollTop, left: scrollLeft };
-            }
-            else {
+            } else {
                 const scrollPos = horizontal ? scrollLeft : scrollTop;
                 const isScrollDownOrRight = this.lastScrollPos <= scrollPos;
                 const currentIndex = calculateCurrentIndex(scrollPos, this.itemSize);
@@ -442,7 +446,7 @@ export default {
                 last: newLast,
                 isRangeChanged,
                 scrollPos: newScrollPos
-            }
+            };
         },
         onScrollChange(event) {
             const { first, last, isRangeChanged, scrollPos } = this.onScrollPositionChange(event);
@@ -473,6 +477,7 @@ export default {
 
                 if (!this.d_loading && this.showLoader) {
                     const { isRangeChanged: changed } = this.onScrollPositionChange(event);
+
                     changed && (this.d_loading = true);
                 }
 
@@ -483,34 +488,35 @@ export default {
                         this.d_loading = false;
                     }
                 }, this.delay);
-            }
-            else {
+            } else {
                 this.onScrollChange(event);
             }
         },
         getOptions(renderedIndex) {
             const count = (this.items || []).length;
             const index = this.isBoth() ? this.first.rows + renderedIndex : this.first + renderedIndex;
+
             return {
                 index,
                 count,
                 first: index === 0,
-                last: index === (count - 1),
+                last: index === count - 1,
                 even: index % 2 === 0,
                 odd: index % 2 !== 0
             };
         },
         getLoaderOptions(index, extOptions) {
             let count = this.loaderArr.length;
+
             return {
                 index,
                 count,
                 first: index === 0,
-                last: index === (count - 1),
+                last: index === count - 1,
                 even: index % 2 === 0,
                 odd: index % 2 !== 0,
                 ...extOptions
-            }
+            };
         },
         elementRef(el) {
             this.element = el;
@@ -521,31 +527,39 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-virtualscroller', {
-                'p-both-scroll': this.isBoth(),
-                'p-horizontal-scroll': this.isHorizontal()
-            }, this.class];
+            return [
+                'p-virtualscroller',
+                {
+                    'p-both-scroll': this.isBoth(),
+                    'p-horizontal-scroll': this.isHorizontal()
+                },
+                this.class
+            ];
         },
         contentClass() {
-            return ['p-virtualscroller-content', {
-                'p-virtualscroller-loading': this.d_loading
-            }];
+            return [
+                'p-virtualscroller-content',
+                {
+                    'p-virtualscroller-loading': this.d_loading
+                }
+            ];
         },
         loaderClass() {
-            return ['p-virtualscroller-loader', {
-                'p-component-overlay': !this.$slots.loader
-            }];
+            return [
+                'p-virtualscroller-loader',
+                {
+                    'p-component-overlay': !this.$slots.loader
+                }
+            ];
         },
         loadedItems() {
             const items = this.items;
+
             if (items && !this.d_loading) {
                 if (this.isBoth()) {
-                    return items.slice(this.first.rows, this.last.rows).map(item => this.columns ? item : item.slice(this.first.cols, this.last.cols));
-                }
-                else if (this.isHorizontal() && this.columns)
-                    return items;
-                else
-                    return items.slice(this.first, this.last);
+                    return items.slice(this.first.rows, this.last.rows).map((item) => (this.columns ? item : item.slice(this.first.cols, this.last.cols)));
+                } else if (this.isHorizontal() && this.columns) return items;
+                else return items.slice(this.first, this.last);
             }
 
             return [];
@@ -559,16 +573,14 @@ export default {
                 const horizontal = this.isHorizontal();
 
                 if (both || horizontal) {
-                    return this.d_loading && this.loaderDisabled ?
-                    (both ? this.loaderArr[0] : this.loaderArr):
-                    this.columns.slice((both ? this.first.cols : this.first), (both ? this.last.cols : this.last));
+                    return this.d_loading && this.loaderDisabled ? (both ? this.loaderArr[0] : this.loaderArr) : this.columns.slice(both ? this.first.cols : this.first, both ? this.last.cols : this.last);
                 }
             }
 
             return this.columns;
         }
     }
-}
+};
 </script>
 
 <style>
diff --git a/package-lock.json b/package-lock.json
index db017b8f7..cd7604768 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,17 +6,16 @@
     "": {
       "hasInstallScript": true,
       "devDependencies": {
-        "@fullcalendar/core": "^5.11.3",
-        "@fullcalendar/daygrid": "^5.11.3",
-        "@fullcalendar/interaction": "^5.11.3",
-        "@fullcalendar/timegrid": "^5.11.3",
-        "@fullcalendar/vue3": "^5.11.2",
+        "@fullcalendar/core": "^5.11.0",
+        "@fullcalendar/daygrid": "^5.11.0",
+        "@fullcalendar/interaction": "^5.11.0",
+        "@fullcalendar/timegrid": "^5.11.0",
+        "@fullcalendar/vue3": "^5.11.0",
         "@vitejs/plugin-vue-jsx": "^2.0.1",
         "@vue/test-utils": "^2.0.0",
         "@vuelidate/core": "^2.0.0-alpha.14",
         "@vuelidate/validators": "^2.0.0-alpha.12",
         "chart.js": "3.3.2",
-        "fullcalendar": "^5.11.3",
         "gulp": "^4.0.2",
         "gulp-concat": "^2.6.0",
         "gulp-flatten": "^0.4.0",
@@ -5665,12 +5664,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/fullcalendar": {
-      "version": "5.11.3",
-      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-5.11.3.tgz",
-      "integrity": "sha512-SgqiMEA+lWLyEd2jEwtIxdfx41j2CZr4KK00D2Gepj1MnGOjaEi13athnU6xvqMQXXjgJNj+vmlUP69QiuGncQ==",
-      "dev": true
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -18801,12 +18794,6 @@
       "dev": true,
       "optional": true
     },
-    "fullcalendar": {
-      "version": "5.11.3",
-      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-5.11.3.tgz",
-      "integrity": "sha512-SgqiMEA+lWLyEd2jEwtIxdfx41j2CZr4KK00D2Gepj1MnGOjaEi13athnU6xvqMQXXjgJNj+vmlUP69QiuGncQ==",
-      "dev": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/package.json b/package.json
index 7fbb7b6fc..20326e424 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,16 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@fullcalendar/core": "^5.11.3",
-    "@fullcalendar/daygrid": "^5.11.3",
-    "@fullcalendar/interaction": "^5.11.3",
-    "@fullcalendar/timegrid": "^5.11.3",
-    "@fullcalendar/vue3": "^5.11.2",
+    "@fullcalendar/core": "^5.11.0",
+    "@fullcalendar/daygrid": "^5.11.0",
+    "@fullcalendar/interaction": "^5.11.0",
+    "@fullcalendar/timegrid": "^5.11.0",
+    "@fullcalendar/vue3": "^5.11.0",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/test-utils": "^2.0.0",
     "@vuelidate/core": "^2.0.0-alpha.14",
     "@vuelidate/validators": "^2.0.0-alpha.12",
     "chart.js": "3.3.2",
-    "fullcalendar": "^5.11.3",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.0",
     "gulp-flatten": "^0.4.0",
diff --git a/pages/editor/EditorDoc.vue b/pages/editor/EditorDoc.vue
new file mode 100755
index 000000000..0d4bcbc71
--- /dev/null
+++ b/pages/editor/EditorDoc.vue
@@ -0,0 +1,318 @@
+<template>
+    <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
+import Editor from 'primevue/editor';
+
+</code></pre>
+
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
+&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/primevue@^3/editor/editor.min.js"&gt;&lt;/script&gt;
+
+</code></pre>
+
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
+&lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
+
+</code></pre>
+
+        <h5>Toolbar</h5>
+        <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
+        <pre v-code><code>
+&lt;Editor v-model="value" editorStyle="height: 320px"&gt;
+	&lt;template #toolbar&gt;
+		&lt;span class="ql-formats"&gt;
+			&lt;button class="ql-bold"&gt;&lt;/button&gt;
+			&lt;button class="ql-italic"&gt;&lt;/button&gt;
+			&lt;button class="ql-underline"&gt;&lt;/button&gt;
+		&lt;/span&gt;
+	&lt;/template&gt;
+&lt;/Editor&gt;
+
+</code></pre>
+
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</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>modelValue</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Value of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when editor is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to instantiate the editor to readonly mode.</td>
+                    </tr>
+                    <tr>
+                        <td>formats</td>
+                        <td>string[]</td>
+                        <td>null</td>
+                        <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
+                    </tr>
+                    <tr>
+                        <td>editorStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the container.</td>
+                    </tr>
+                    <tr>
+                        <td>modules</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</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>text-change</td>
+                        <td>
+                            event.delta: Representation of the change.<br />
+                            event.source: Source of change. Will be either "user" or "api".<br />
+                            event.htmlValue: Current value as html.<br />
+                            event.textValue: Current value as text.<br />
+                            event.instance: Text editor instance.
+                        </td>
+                        <td>Callback to invoke when text of editor changes.</td>
+                    </tr>
+                    <tr>
+                        <td>selection-change</td>
+                        <td>
+                            event.range: Representation of the selection boundaries.<br />
+                            event.oldRange: Representation of the previous selection boundaries.<br />
+                            event.source: Source of change. Will be either "user" or "api".<br />
+                            event.htmlValue: Current value as html.<br />
+                            event.textValue: Current value as text.<br />
+                            event.instance: Text editor instance.
+                        </td>
+                        <td>Callback to invoke when selection of the text changes.</td>
+                    </tr>
+                    <tr>
+                        <td>load</td>
+                        <td>event.instance: Quill instance</td>
+                        <td>Callback to invoke when the quill modules are loaded.</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>toolbar</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
+
+        <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-editor-container</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-editor-toolbar</td>
+                        <td>Toolbar of the editor</td>
+                    </tr>
+                    <tr>
+                        <td>p-editor-content</td>
+                        <td>Editable area</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <p>
+            Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for
+            <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.
+        </p>
+
+        <h5>Dependencies</h5>
+        <p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
+        <p>Resources of quill needs to be added to your application.</p>
+        <pre v-code><code>
+npm install quill --save
+
+</code></pre>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Default</h5>
+        <Editor v-model="value1" editorStyle="height: 320px"/>
+
+        <h5>Customized</h5>
+        <Editor v-model="value2" editorStyle="height: 320px">
+            <template v-slot:toolbar>
+                <span class="ql-formats">
+                    <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                    <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                    <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                </span>
+            </template>
+        </Editor>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
+            value2: ''
+        }
+    }
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Default</h5>
+        <Editor v-model="value1" editorStyle="height: 320px"/>
+
+        <h5>Customized</h5>
+        <Editor v-model="value2" editorStyle="height: 320px">
+            <template v-slot:toolbar>
+                <span class="ql-formats">
+                    <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                    <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                    <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                </span>
+            </template>
+        </Editor>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const value1 = ref('<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>');
+        const value2 = ref('');
+
+        return { value1, value2 }
+    }
+}
+<\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/quill/dist/quill.min.js"><\\/script>
+
+        <script src="https://unpkg.com/primevue@^3/editor/editor.min.js"><\\/script>`,
+                    content: `<div id="app">
+            <h5>Default</h5>
+            <p-editor v-model="value1" editor-style="height: 320px"></p-editor>
+
+            <h5>Customized</h5>
+            <p-editor v-model="value2" editor-style="height: 320px">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                        <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                        <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                    </span>
+                </template>
+            </p-editor>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const Tooltip = primevue.tooltip;
+
+        const App = {
+            setup() {
+                const value1 = ref('<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>');
+                const value2 = ref('');
+
+                return { value1, value2 }
+            },
+            components: {
+                "p-editor": primevue.editor
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .directive("tooltip", Tooltip)
+            .mount("#app");
+        <\\/script>
+`
+                }
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/editor/index.vue b/pages/editor/index.vue
new file mode 100755
index 000000000..b5d46c421
--- /dev/null
+++ b/pages/editor/index.vue
@@ -0,0 +1,52 @@
+<template>
+    
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Editor</h1>
+                <p>Editor is rich text editor component based on Quill.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Default</h5>
+                <Editor v-model="value1" editorStyle="height: 320px" />
+
+                <h5>Customized</h5>
+                <ClientOnly>
+                <Editor v-model="value2" editorStyle="height: 320px">
+                    <template v-slot:toolbar>
+                        <span class="ql-formats">
+                            <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                            <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                            <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                        </span>
+                    </template>
+                </Editor>
+            </ClientOnly>
+            </div>
+        </div>
+        <ClientOnly>
+        <EditorDoc />
+        </ClientOnly>
+    </div>
+
+</template>
+
+<script>
+import EditorDoc from './EditorDoc';
+
+export default {
+    data() {
+        return {
+            value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
+            value2: ''
+        };
+    },
+    components: {
+        EditorDoc: EditorDoc
+    }
+};
+</script>
diff --git a/pages/fullcalendar/FullCalendarDoc.vue b/pages/fullcalendar/FullCalendarDoc.vue
new file mode 100755
index 000000000..d8c839453
--- /dev/null
+++ b/pages/fullcalendar/FullCalendarDoc.vue
@@ -0,0 +1,189 @@
+<template>
+    <AppDoc
+        name="FullCalendarDemo"
+        :sources="sources"
+        :service="['EventService']"
+        :data="['events']"
+        github="fullcalendar/FullCalendarDemo.vue"
+        :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
+        component="FullCalendar"
+    >
+        <p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <FullCalendar :events="events" :options="options" />
+    </div>
+</template>
+
+<script>
+import '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventService from './service/EventService';
+
+export default {
+    data() {
+        return {
+            options: {
+                plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
+                initialDate : '2017-02-01',
+                headerToolbar: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
+                },
+                editable: true,
+                selectable:true, 
+                selectMirror: true, 
+                dayMaxEvents: true
+            },
+            events: null
+        };
+    },
+    eventService: null,
+    created() {
+        this.eventService = new EventService();
+    },
+    mounted() {
+        this.eventService.getEvents().then(data => this.events = data);
+    }
+}
+<\\/script>
+
+<style scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.fc-header-toolbar) {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div>
+        <FullCalendar :events="events" :options="options" />
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventService from './service/EventService';
+
+export default {
+    setup() {
+        onMounted(() => {
+            eventService.value.getEvents().then(data => events.value = data);
+        })
+
+        const options =  ref({
+            plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
+            initialDate : '2017-02-01',
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            },
+            editable: true,
+                selectable:true, 
+                selectMirror: true, 
+                dayMaxEvents: true
+        });
+        const events =  ref(null);
+        const eventService = ref(new EventService());
+
+        return { options, events, eventService };
+    }
+}
+<\\/script>
+
+<style scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.fc-header-toolbar) {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+</style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/fullcalendar@5.7.2/main.min.js"><\\/script>
+        <link rel="stylesheet" href="https://unpkg.com/fullcalendar@5.7.2/main.min.css"><\\/link>
+
+        <script src="https://unpkg.com/primevue@^3/fullcalendar/fullcalendar.min.js"><\\/script>
+        <script src="./EventService.js"><\\/script>`,
+                    content: `<div id="app">
+            <p-fullcalendar :events="events" :options="options"></p-fullcalendar>
+        </div>
+
+        <script>
+        const { createApp, ref, onMounted } = Vue;
+        const { dayGridPlugin, timeGridPlugin, interactionPlugin } = FullCalendar.Calendar;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    eventService.value.getEvents().then(data => events.value = data);
+                })
+
+                const options =  ref({
+                    plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
+                    initialDate : '2017-02-01',
+                    headerToolbar: {
+                        left: 'prev,next today',
+                        center: 'title',
+                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
+                    },
+                    editable: true,
+                        selectable:true, 
+                        selectMirror: true, 
+                        dayMaxEvents: true
+                });
+                const events =  ref(null);
+                const eventService = ref(new EventService());
+
+                return { options, events, eventService };
+            },
+            components: {
+                "p-fullcalendar": primevue.fullcalendar
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style scoped>
+        @media screen and (max-width: 960px) {
+            ::v-deep(.fc-header-toolbar) {
+                display: flex;
+                flex-wrap: wrap;
+            }
+        }
+        </style>`
+                }
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/fullcalendar/index.vue b/pages/fullcalendar/index.vue
new file mode 100755
index 000000000..f558c0b17
--- /dev/null
+++ b/pages/fullcalendar/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>FullCalendar</h1>
+                <p>PrimeVue provides theming for the <a href="https://fullcalendar.io/docs/vue">FullCalendar</a> Vue component.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <FullCalendar :events="events" :options="options" />
+            </div>
+        </div>
+
+        <FullCalendarDoc />
+    </div>
+</template>
+
+<script>
+import EventService from '../../service/EventService';
+import FullCalendarDoc from './FullCalendarDoc';
+export default {
+    data() {
+        return {
+            options: {
+                ...this.$fullCalendar?.options,
+                initialDate: '2019-01-01',
+                headerToolbar: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
+                },
+                editable: true,
+                selectable: true,
+                selectMirror: true,
+                dayMaxEvents: true
+            },
+            events: null
+        };
+    },
+    eventService: null,
+    created() {
+        this.eventService = new EventService();
+    },
+    mounted() {
+        this.eventService.getEvents().then((data) => (this.events = data));
+    },
+    components: {
+        FullCalendarDoc: FullCalendarDoc
+    }
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.fc-header-toolbar) {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+</style>
diff --git a/pages/validation/index.vue b/pages/validation/index.vue
index 3358b3d01..ad1fd6092 100644
--- a/pages/validation/index.vue
+++ b/pages/validation/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly>
+    
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
@@ -93,7 +93,7 @@
             </div>
         </div>
 
-        
+        <ClientOnly>    
 <AppDoc
             name="VuelidateFormDemo"
             :sources="sources"
@@ -102,9 +102,9 @@
             github="validation/VuelidateFormDemo.vue"
             :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }"
         />
-        
+    </ClientOnly>
     </div>
-</ClientOnly>
+
 </template>
 
 <script>
diff --git a/plugins/fullcalendar.client.js b/plugins/fullcalendar.client.js
new file mode 100644
index 000000000..be4a41036
--- /dev/null
+++ b/plugins/fullcalendar.client.js
@@ -0,0 +1,17 @@
+import '@fullcalendar/core/vdom' // solve problem with Vite
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import timeGridPlugin from '@fullcalendar/timegrid';
+
+FullCalendar.options = {
+    plugins: [dayGridPlugin,timeGridPlugin, interactionPlugin]
+}
+const $fullCalendar = {
+    install: (Vue, options) => {
+        Vue.config.globalProperties.$fullCalendar = FullCalendar
+    },
+  }
+export default defineNuxtPlugin((nuxtApp ) => {
+    nuxtApp.vueApp.use($fullCalendar);
+})
\ No newline at end of file
diff --git a/plugins/primeVue.js b/plugins/primeVue.js
index 74361230c..b742d99f8 100644
--- a/plugins/primeVue.js
+++ b/plugins/primeVue.js
@@ -34,7 +34,7 @@ import DialogService from '@/components/dialogservice/DialogService';
 import Divider from '@/components/divider/Divider';
 import Dock from '@/components/dock/Dock';
 import Dropdown from '@/components/dropdown/Dropdown';
-/* import Editor from '@/components/editor/Editor'; */
+import Editor from '@/components/editor/Editor'; 
 import Fieldset from '@/components/fieldset/Fieldset';
 import FileUpload from '@/components/fileupload/FileUpload';
 import FullCalendar from '@/components/fullcalendar/FullCalendar';
@@ -105,7 +105,6 @@ import DevelopmentSection from '@/layouts/DevelopmentSection'
 import CodeHighlight from '@/layouts/AppCodeHighlight';
 
 export default defineNuxtPlugin((nuxtApp) => {
-  console.log(PrimeVue)
   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
 
 nuxtApp.vueApp.use(ToastService);
@@ -150,11 +149,10 @@ nuxtApp.vueApp.component('DynamicDialog', DynamicDialog);
 nuxtApp.vueApp.component('Divider', Divider);
 nuxtApp.vueApp.component('Dock', Dock);
 nuxtApp.vueApp.component('Dropdown', Dropdown);
-// Quill package issue
-/* nuxtApp.vueApp.component('Editor', Editor); */
+nuxtApp.vueApp.component('Editor', Editor); 
 nuxtApp.vueApp.component('Fieldset', Fieldset);
 nuxtApp.vueApp.component('FileUpload', FileUpload);
-//nuxtApp.vueApp.component('FullCalendar', FullCalendar);
+nuxtApp.vueApp.component('FullCalendar', FullCalendar);
 nuxtApp.vueApp.component('Image', Image);
 nuxtApp.vueApp.component('InlineMessage', InlineMessage);
 nuxtApp.vueApp.component('Inplace', Inplace);
diff --git a/service/NewsService.js b/service/NewsService.js
index 36ec8ec12..ce6eba38c 100644
--- a/service/NewsService.js
+++ b/service/NewsService.js
@@ -1,11 +1,9 @@
 export default class NewsService {
 
     async fetchNews() {
-        try {
-            const data = await useFetch('https://www.primefaces.org/cdn/news/primevue.json', {cache: 'no-store'})
-            return await data.json();
-        } catch (error) {
-            console.log(error)
-        }    
+        const data = await useFetch('https://www.primefaces.org/cdnnews/primevue.json', {cache: 'no-store'})
+        
+        return await data.json();
+
     }
 }
\ No newline at end of file