Refactor #5257

components/lib/timeline/Timeline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
             <div :class="cx('opposite', { index })" v-bind="getPTOptions('opposite', index)">
                 <slot name="opposite" :item="item" :index="index"></slot>
@@ -26,6 +26,7 @@ import BaseTimeline from './BaseTimeline.vue';
 export default {
     name: 'Timeline',
     extends: BaseTimeline,
+    inheritAttrs: false,
     methods: {
         getKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;

components/lib/toast/Toast.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="{ ...$attrs, ...ptm('root') }">
+        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('message'), ...ptm('transition') }">
                 <ToastMessage
                     v-for="msg of messages"

components/lib/togglebutton/ToggleButton.vue

@@ -35,10 +35,13 @@ import BaseToggleButton from './BaseToggleButton.vue';
 export default {
     name: 'ToggleButton',
     extends: BaseToggleButton,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     methods: {
         getPTOptions(key) {
-            return this.ptm(key, {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
                 context: {
                     active: this.active,
                     disabled: this.disabled

components/lib/toolbar/Toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
+    <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
         <div :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
@@ -17,6 +17,7 @@ import BaseToolbar from './BaseToolbar.vue';
 
 export default {
     name: 'Toolbar',
-    extends: BaseToolbar
+    extends: BaseToolbar,
+    inheritAttrs: false
 };
 </script>

components/lib/tree/Tree.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <template v-if="loading && loadingMode === 'mask'">
             <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
                 <slot name="loadingicon" :class="cx('loadingIcon')">
@@ -48,6 +48,7 @@ import TreeNode from './TreeNode.vue';
 export default {
     name: 'Tree',
     extends: BaseTree,
+    inheritAttrs: false,
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter'],
     data() {
         return {

components/lib/treeselect/TreeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptmi('root')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
@@ -117,6 +117,7 @@ import BaseTreeSelect from './BaseTreeSelect.vue';
 export default {
     name: 'TreeSelect',
     extends: BaseTreeSelect,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
     data() {
         return {

components/lib/treetable/TreeTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
+    <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptmi('root')">
         <slot></slot>
         <div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
             <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
@@ -180,6 +180,7 @@ import TreeTableRow from './TreeTableRow.vue';
 export default {
     name: 'TreeTable',
     extends: BaseTreeTable,
+    inheritAttrs: false,
     emits: [
         'node-expand',
         'node-collapse',

components/lib/tristatecheckbox/TriStateCheckbox.vue

@@ -38,10 +38,13 @@ import BaseTriStateCheckbox from './BaseTriStateCheckbox.vue';
 export default {
     name: 'TriStateCheckbox',
     extends: BaseTriStateCheckbox,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     methods: {
         getPTOptions(key) {
-            return this.ptm(key, {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
                 context: {
                     active: this.active,
                     disabled: this.disabled

components/lib/virtualscroller/VirtualScroller.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-if="!disabled">
-        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')">
+        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptmi('root')">
             <slot
                 name="content"
                 :styleClass="contentClass"
@@ -51,14 +51,17 @@ import BaseVirtualScroller from './BaseVirtualScroller.vue';
 export default {
     name: 'VirtualScroller',
     extends: BaseVirtualScroller,
+    inheritAttrs: false,
     emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
     data() {
+        const both = this.isBoth();
+
         return {
-            first: this.isBoth() ? { rows: 0, cols: 0 } : 0,
+            first: both ? { rows: 0, cols: 0 } : 0,
-            last: this.isBoth() ? { rows: 0, cols: 0 } : 0,
+            last: both ? { rows: 0, cols: 0 } : 0,
-            page: this.isBoth() ? { rows: 0, cols: 0 } : 0,
+            page: both ? { rows: 0, cols: 0 } : 0,
-            numItemsInViewport: this.isBoth() ? { rows: 0, cols: 0 } : 0,
+            numItemsInViewport: both ? { rows: 0, cols: 0 } : 0,
-            lastScrollPos: this.isBoth() ? { top: 0, left: 0 } : 0,
+            lastScrollPos: both ? { top: 0, left: 0 } : 0,
             d_numToleratedItems: this.numToleratedItems,
             d_loading: this.loading,
             loaderArr: [],