Refactor #3922 - For MultiSelect

api-generator/components/multiselect.js

@@ -292,6 +292,12 @@ const MultiSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -41,6 +41,7 @@ import { MegaMenuPassThroughOptions } from '../megamenu';
 import { MenuPassThroughOptions } from '../menu';
 import { MenubarPassThroughOptions } from '../menubar';
 import { MessagePassThroughOptions } from '../message';
+import { MultiSelectPassThroughOptions } from '../multiselect';
 import { OverlayPanelPassThroughOptions } from '../overlaypanel';
 import { PanelPassThroughOptions } from '../panel';
 import { PanelMenuPassThroughOptions } from '../panelmenu';
@@ -129,6 +130,7 @@ interface PrimeVuePTOptions {
     menu?: MenuPassThroughOptions;
     menubar?: MenubarPassThroughOptions;
     message?: MessagePassThroughOptions;
+    multiselect?: MultiSelectPassThroughOptions;
     overlaypanel?: OverlayPanelPassThroughOptions;
     panel?: PanelPassThroughOptions;
     panelmenu?: PanelMenuPassThroughOptions;

components/lib/multiselect/MultiSelect.d.ts

@@ -9,7 +9,18 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MultiSelectPassThroughMethodOptions {
+    props: MultiSelectProps;
+    state: MultiSelectState;
+    context: MultiSelectContext;
+}
 
 /**
  * Custom change event.
@@ -56,6 +67,212 @@ export interface MultiSelectFilterEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MultiSelectProps.pt}
+ */
+export interface MultiSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox container's DOM element.
+     */
+    headerCheckboxContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox container's DOM element.
+     */
+    checkboxContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: MultiSelectPassThroughOptionType;
+
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden first focusable element's DOM element.
+     */
+    hiddenFirstFocusableEl?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden filter result's DOM element.
+     */
+    hiddenFilterResult?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden last focusable element's DOM element.
+     */
+    hiddenLastFocusableEl?: MultiSelectPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MultiSelectPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in MultiSelect component.
+ */
+export interface MultiSelectState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * Defines current options in MultiSelect component.
+ */
+export interface MultiSelectContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in MultiSelect component.
  */
@@ -281,6 +498,11 @@ export interface MultiSelectProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MultiSelectPassThroughOptions}
+     */
+    pt?: MultiSelectPassThroughOptions;
 }
 
 /**

components/lib/multiselect/MultiSelect.vue

@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick">
+    <div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
-        <div class="p-hidden-accessible">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -19,23 +19,23 @@
                 @focus="onFocus"
                 @blur="onBlur"
                 @keydown="onKeyDown"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('input') }"
             />
         </div>
-        <div class="p-multiselect-label-container">
+        <div class="p-multiselect-label-container" v-bind="ptm('labelContainer')">
-            <div :class="labelClass">
+            <div :class="labelClass" v-bind="ptm('label')">
                 <slot name="value" :value="modelValue" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token">
+                        <div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token" v-bind="ptm('token')">
                             <slot name="chip" :value="item">
-                                <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
+                                <span class="p-multiselect-token-label" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
                             </slot>
                             <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
-                                <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
+                                <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
-                                <TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" />
+                                <TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                             </slot>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@@ -43,32 +43,32 @@
                 </slot>
             </div>
         </div>
-        <div class="p-multiselect-trigger">
+        <div class="p-multiselect-trigger" v-bind="ptm('trigger')">
             <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
-                <span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                <span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('triggerIcon')" />
-                <SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" />
+                <SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" v-bind="ptm('triggerIcon')" />
             </slot>
             <slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
-                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <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 v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
-                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
+                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-                    <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
+                    <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header" v-bind="ptm('header')">
-                        <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
+                        <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
-                            <div class="p-hidden-accessible">
+                            <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
-                                <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" v-bind="ptm('headerCheckbox')" />
                             </div>
-                            <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
+                            <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
                                 <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
-                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
+                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" v-bind="getHeaderCheckboxPTOptions('headerCheckboxIcon')" />
                                 </slot>
                             </div>
                         </div>
-                        <div v-if="filter" class="p-multiselect-filter-container">
+                        <div v-if="filter" class="p-multiselect-filter-container" v-bind="ptm('filterContainer')">
                             <input
                                 ref="filterInput"
                                 type="text"
@@ -83,27 +83,34 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                v-bind="filterInputProps"
+                                v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                             />
                             <slot name="filtericon" class="p-multiselect-filter-icon">
-                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
+                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
+                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
                             {{ filterResultMessageText }}
                         </span>
-                        <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
+                        <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
                             <slot name="closeicon" class="p-multiselect-close-icon">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" v-bind="ptm('closeIcon')" />
                             </slot>
                         </button>
                     </div>
-                    <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
+                    <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
-                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                        <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :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">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" v-bind="ptm('list')">
                                     <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">
+                                        <li
+                                            v-if="isOptionGroup(option)"
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            class="p-multiselect-item-group"
+                                            role="option"
+                                            v-bind="ptm('itemGroup')"
+                                        >
                                             <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
                                         <li
@@ -120,23 +127,28 @@
                                             :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                             @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                            v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'item')"
                                         >
-                                            <div class="p-checkbox p-component">
+                                            <div class="p-checkbox p-component" v-bind="ptm('checkboxContainer')">
-                                                <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
+                                                <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')">
                                                     <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
-                                                        <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
+                                                        <component
+                                                            :is="checkboxIcon ? 'span' : 'CheckIcon'"
+                                                            :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"
+                                                            v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')"
+                                                        />
                                                     </slot>
                                                 </div>
                                             </div>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
-                                                <span>{{ getOptionLabel(option) }}</span>
+                                                <span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
                                             </slot>
                                         </li>
                                     </template>
-                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option">
+                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option">
+                                    <li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -147,13 +159,13 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('emptyMessage')">
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
-                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus"></span>
+                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
                 </div>
             </transition>
         </Portal>
@@ -162,6 +174,7 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SearchIcon from 'primevue/icons/search';
@@ -176,6 +189,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'MultiSelect',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
     props: {
         modelValue: null,
@@ -397,6 +411,23 @@ export default {
         getOptionRenderKey(option) {
             return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
+        getHeaderCheckboxPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.allSelected,
+                    focused: this.headerCheckboxFocused
+                }
+            });
+        },
+        getCheckboxPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             if (this.maxSelectionLimitReached && !this.isSelected(option)) {
                 return true;