Merge branch 'master' into v4

components/lib/autocomplete/AutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptmi('root')">
         <input
             v-if="!multiple"
             ref="focusInput"
@@ -178,6 +178,7 @@ import BaseAutoComplete from './BaseAutoComplete.vue';
 export default {
     name: 'AutoComplete',
     extends: BaseAutoComplete,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     outsideClickListener: null,
     resizeListener: null,

components/lib/avatar/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')">
         <slot>
             <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
@@ -15,6 +15,7 @@ import BaseAvatar from './BaseAvatar.vue';
 export default {
     name: 'Avatar',
     extends: BaseAvatar,
+    inheritAttrs: false,
     emits: ['error'],
     methods: {
         onError(event) {

components/lib/avatargroup/AvatarGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <slot></slot>
     </div>
 </template>
@@ -9,6 +9,7 @@ import BaseAvatarGroup from './BaseAvatarGroup.vue';
 
 export default {
     name: 'AvatarGroup',
-    extends: BaseAvatarGroup
+    extends: BaseAvatarGroup,
+    inheritAttrs: false
 };
 </script>

components/lib/badge/Badge.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')">
+    <span :class="cx('root')" v-bind="ptmi('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
@@ -9,6 +9,7 @@ import BaseBadge from './BaseBadge.vue';
 
 export default {
     name: 'Badge',
-    extends: BaseBadge
+    extends: BaseBadge,
+    inheritAttrs: false
 };
 </script>

components/lib/basecomponent/BaseComponent.vue

@@ -236,6 +236,7 @@ export default {
             return this._getPTValue(this.pt, key, { ...this.$params, ...params });
         },
         ptmi(key = '', params = {}) {
+            // inheritAttrs:true without `pt:*`
             return mergeProps(this.$_attrsNoPT, this.ptm(key, params));
         },
         ptmo(obj = {}, key = '', params = {}) {

components/lib/blockui/BlockUI.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :aria-busy="isBlocked" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :aria-busy="isBlocked" v-bind="ptmi('root')">
         <slot></slot>
     </div>
 </template>
@@ -11,6 +11,7 @@ import BaseBlockUI from './BaseBlockUI.vue';
 export default {
     name: 'BlockUI',
     extends: BaseBlockUI,
+    inheritAttrs: false,
     emits: ['block', 'unblock'],
     mask: null,
     data() {

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav :class="cx('root')" v-bind="ptm('root')">
+    <nav :class="cx('root')" v-bind="ptmi('root')">
         <ol :class="cx('menu')" v-bind="ptm('menu')">
             <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
             <template v-for="(item, i) of model" :key="item.label + '_' + i">
@@ -22,9 +22,10 @@ import BreadcrumbItem from './BreadcrumbItem.vue';
 export default {
     name: 'Breadcrumb',
     extends: BaseBreadcrumb,
+    inheritAttrs: false,
     components: {
-        BreadcrumbItem: BreadcrumbItem,
+        BreadcrumbItem,
-        ChevronRightIcon: ChevronRightIcon
+        ChevronRightIcon
     }
 };
 </script>

components/lib/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-    <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" :data-pc-severity="severity">
+    <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" :data-p-severity="severity">
         <slot>
             <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
@@ -23,9 +23,12 @@ import BaseButton from './BaseButton.vue';
 export default {
     name: 'Button',
     extends: BaseButton,
+    inheritAttrs: false,
     methods: {
         getPTOptions(key) {
-            return this.ptm(key, {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
                 context: {
                     disabled: this.disabled
                 }

components/lib/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
+    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
         <input
             v-if="!inline"
             :ref="inputRef"
@@ -521,6 +521,7 @@ import BaseCalendar from './BaseCalendar.vue';
 export default {
     name: 'Calendar',
     extends: BaseCalendar,
+    inheritAttrs: false,
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     navigationState: null,
     timePickerChange: false,

components/lib/card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
@@ -27,6 +27,7 @@ import BaseCard from './BaseCard.vue';
 
 export default {
     name: 'Card',
-    extends: BaseCard
+    extends: BaseCard,
+    inheritAttrs: false
 };
 </script>

components/lib/carousel/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="region" v-bind="ptm('root')">
+    <div :class="cx('root')" role="region" v-bind="ptmi('root')">
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
@@ -107,6 +107,7 @@ import BaseCarousel from './BaseCarousel.vue';
 export default {
     name: 'Carousel',
     extends: BaseCarousel,
+    inheritAttrs: false,
     emits: ['update:page'],
     isRemainingItemsAdded: false,
     data() {

components/lib/cascadeselect/CascadeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptmi('root')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
@@ -89,6 +89,7 @@ import CascadeSelectSub from './CascadeSelectSub.vue';
 export default {
     name: 'CascadeSelect',
     extends: BaseCascadeSelect,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
     outsideClickListener: null,
     scrollHandler: null,

components/lib/chart/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
         <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
@@ -10,6 +10,7 @@ import BaseChart from './BaseChart.vue';
 export default {
     name: 'Chart',
     extends: BaseChart,
+    inheritAttrs: false,
     emits: ['select', 'loaded'],
     chart: null,
     watch: {

components/lib/checkbox/Checkbox.vue

@@ -35,10 +35,13 @@ import BaseCheckbox from './BaseCheckbox.vue';
 export default {
     name: 'Checkbox',
     extends: BaseCheckbox,
+    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: {
                     checked: this.checked,
                     disabled: this.disabled

components/lib/chip/Chip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')">
+    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptmi('root')">
         <slot>
             <img v-if="image" :src="image" v-bind="ptm('image')" />
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
@@ -19,6 +19,7 @@ import BaseChip from './BaseChip.vue';
 export default {
     name: 'Chip',
     extends: BaseChip,
+    inheritAttrs: false,
     emits: ['remove'],
     data() {
         return {

components/lib/chips/Chips.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <ul
             ref="container"
             :class="cx('container')"
@@ -64,6 +64,7 @@ import BaseChips from './BaseChips.vue';
 export default {
     name: 'Chips',
     extends: BaseChips,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     data() {
         return {

components/lib/colorpicker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
         <input v-if="!inline" ref="input" type="text" :class="cx('input')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
@@ -29,6 +29,7 @@ import BaseColorPicker from './BaseColorPicker.vue';
 export default {
     name: 'ColorPicker',
     extends: BaseColorPicker,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'show', 'hide'],
     data() {
         return {

components/lib/dock/Dock.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+    <div :class="containerClass" :style="style" v-bind="ptmi('root')">
         <DockSub :model="model" :templates="$slots" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt" :unstyled="unstyled"></DockSub>
     </div>
 </template>
@@ -11,6 +11,7 @@ import DockSub from './DockSub.vue';
 export default {
     name: 'Dock',
     extends: BaseDock,
+    inheritAttrs: false,
     matchMediaListener: null,
     data() {
         return {

components/lib/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')">
+    <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
         <input
             v-if="editable"
             ref="focusInput"
@@ -194,6 +194,7 @@ import BaseDropdown from './BaseDropdown.vue';
 export default {
     name: 'Dropdown',
     extends: BaseDropdown,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
     outsideClickListener: null,
     scrollHandler: null,

components/lib/editor/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
             <slot name="toolbar">
                 <span class="ql-formats" v-bind="ptm('formats')">
@@ -62,6 +62,7 @@ const QuillJS = (function () {
 export default {
     name: 'Editor',
     extends: BaseEditor,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
     data() {
         return {

components/lib/fieldset/Fieldset.vue

@@ -1,5 +1,5 @@
 <template>
-    <fieldset :class="cx('root')" v-bind="ptm('root')">
+    <fieldset :class="cx('root')" v-bind="ptmi('root')">
         <legend :class="cx('legend')" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
                 <span :id="id + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
@@ -45,6 +45,7 @@ import BaseFieldset from './BaseFieldset.vue';
 export default {
     name: 'Fieldset',
     extends: BaseFieldset,
+    inheritAttrs: false,
     emits: ['update:collapsed', 'toggle'],
     data() {
         return {

components/lib/fileupload/FileUpload.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')">
+    <div v-if="isAdvanced" :class="cx('root')" v-bind="ptmi('root')">
         <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
         <div :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
             <slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-    <div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')">
+    <div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
         <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
         <span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
             <slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
@@ -67,6 +67,7 @@ import FileContent from './FileContent.vue';
 export default {
     name: 'FileUpload',
     extends: BaseFileUpload,
+    inheritAttrs: false,
     emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'remove-uploaded-file'],
     duplicateIEEvent: false,
     data() {

components/lib/floatlabel/FloatLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')">
+    <span :class="cx('root')" v-bind="ptmi('root')">
         <slot />
     </span>
 </template>
@@ -9,6 +9,7 @@ import BaseFloatLabel from './BaseFloatLabel.vue';
 
 export default {
     name: 'FloatLabel',
-    extends: BaseFloatLabel
+    extends: BaseFloatLabel,
+    inheritAttrs: false
 };
 </script>

components/lib/iconfield/IconField.vue

@@ -1,14 +1,15 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <slot />
     </div>
 </template>
 
 <script>
-import BaseIconFeild from './BaseIconField.vue';
+import BaseIconField from './BaseIconField.vue';
 
 export default {
     name: 'IconField',
-    extends: BaseIconFeild
+    extends: BaseIconField,
+    inheritAttrs: false
 };
 </script>

components/lib/image/Image.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="containerClass" :style="style" v-bind="ptm('root')">
+    <span :class="containerClass" :style="style" v-bind="ptmi('root')">
         <slot name="image" :onError="onError" :errorCallback="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>

components/lib/inlinemessage/InlineMessage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div role="alert" aria-live="assertive" aria-atomic="true" :class="cx('root')" v-bind="ptm('root')">
+    <div role="alert" aria-live="assertive" aria-atomic="true" :class="cx('root')" v-bind="ptmi('root')">
         <slot name="icon">
             <component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
         </slot>
@@ -19,6 +19,7 @@ import BaseInlineMessage from './BaseInlineMessage.vue';
 export default {
     name: 'InlineMessage',
     extends: BaseInlineMessage,
+    inheritAttrs: false,
     timeout: null,
     data() {
         return {

components/lib/inplace/Inplace.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')">
+    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptmi('root')">
         <div v-if="!d_active" ref="display" :class="cx('display')" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
             <slot name="display"></slot>
         </div>
@@ -25,6 +25,7 @@ import BaseInplace from './BaseInplace.vue';
 export default {
     name: 'Inplace',
     extends: BaseInplace,
+    inheritAttrs: false,
     emits: ['open', 'close', 'update:active'],
     data() {
         return {

components/lib/inputgroup/InputGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <slot />
     </div>
 </template>
@@ -9,6 +9,7 @@ import BaseInputGroup from './BaseInputGroup.vue';
 
 export default {
     name: 'InputGroup',
-    extends: BaseInputGroup
+    extends: BaseInputGroup,
+    inheritAttrs: false
 };
 </script>

components/lib/inputgroupaddon/InputGroupAddon.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <slot />
     </div>
 </template>
@@ -9,6 +9,7 @@ import BaseInputGroupAddon from './BaseInputGroupAddon.vue';
 
 export default {
     name: 'InputGroupAddon',
-    extends: BaseInputGroupAddon
+    extends: BaseInputGroupAddon,
+    inheritAttrs: false
 };
 </script>

components/lib/inputmask/InputMask.vue

@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptmi('root', ptmParams)" />
 </template>
 
 <script>
@@ -9,6 +9,7 @@ import BaseInputMask from './BaseInputMask.vue';
 export default {
     name: 'InputMask',
     extends: BaseInputMask,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
     watch: {
         mask(newMask, oldMask) {

components/lib/inputnumber/InputNumber.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')">
+    <span :class="cx('root')" v-bind="ptmi('root')">
         <INInputText
             ref="input"
             :id="inputId"
@@ -90,6 +90,7 @@ import BaseInputNumber from './BaseInputNumber.vue';
 export default {
     name: 'InputNumber',
     extends: BaseInputNumber,
+    inheritAttrs: false,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
     numberFormat: null,
     _numeral: null,

components/lib/inputswitch/InputSwitch.vue

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

components/lib/splitbutton/SplitButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')" :data-pc-severity="severity">
+    <div :class="containerClass" :style="style" v-bind="ptmi('root')" :data-p-severity="severity">
         <PVSButton
             type="button"
             :class="cx('button')"
@@ -69,6 +69,7 @@ import BaseSplitButton from './BaseSplitButton.vue';
 export default {
     name: 'SplitButton',
     extends: BaseSplitButton,
+    inheritAttrs: false,
     emits: ['click'],
     data() {
         return {