primevue 3.29.2 → 3.30.0

package/knob/knob.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.knob=function(e,t){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Knob",extends:a(e).default,emits:["update:modelValue","change"],props:{modelValue:{type:Number,default:null},size:{type:Number,default:100},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},step:{type:Number,default:1},min:{type:Number,default:0},max:{type:Number,default:100},valueColor:{type:String,default:"var(--primary-color, Black)"},rangeColor:{type:String,default:"var(--surface-border, LightGray)"},textColor:{type:String,default:"var(--text-color-secondary, Black)"},strokeWidth:{type:Number,default:14},showValue:{type:Boolean,default:!0},valueTemplate:{type:String,default:"{value}"},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({radius:40,midX:50,midY:50,minRadians:4*Math.PI/3,maxRadians:-Math.PI/3}),methods:{updateValue(e,t){let a=e-this.size/2,i=this.size/2-t,s=Math.atan2(i,a),n=-Math.PI/2-Math.PI/6;this.updateModel(s,n)},updateModel(e,t){let a;if(e>this.maxRadians)a=this.mapRange(e,this.minRadians,this.maxRadians,this.min,this.max);else{if(!(e<t))return;a=this.mapRange(e+2*Math.PI,this.minRadians,this.maxRadians,this.min,this.max)}let i=Math.round((a-this.min)/this.step)*this.step+this.min;this.$emit("update:modelValue",i),this.$emit("change",i)},updateModelValue(e){e>this.max?this.$emit("update:modelValue",this.max):e<this.min?this.$emit("update:modelValue",this.min):this.$emit("update:modelValue",e)},mapRange:(e,t,a,i,s)=>(e-t)*(s-i)/(a-t)+i,onClick(e){this.disabled||this.readonly||this.updateValue(e.offsetX,e.offsetY)},onMouseDown(e){this.disabled||this.readonly||(window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp),e.preventDefault())},onMouseUp(e){this.disabled||this.readonly||(window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),e.preventDefault())},onTouchStart(e){this.disabled||this.readonly||(window.addEventListener("touchmove",this.onTouchMove),window.addEventListener("touchend",this.onTouchEnd),e.preventDefault())},onTouchEnd(e){this.disabled||this.readonly||(window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.onTouchEnd),e.preventDefault())},onMouseMove(e){this.disabled||this.readonly||(this.updateValue(e.offsetX,e.offsetY),e.preventDefault())},onTouchMove(e){if(!this.disabled&&!this.readonly&&1==e.touches.length){const t=this.$el.getBoundingClientRect(),a=e.targetTouches.item(0),i=a.clientX-t.left,s=a.clientY-t.top;this.updateValue(i,s)}},onKeyDown(e){if(!this.disabled&&!this.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),this.updateModelValue(this.modelValue+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),this.updateModelValue(this.modelValue-1);break;case"Home":e.preventDefault(),this.$emit("update:modelValue",this.min);break;case"End":e.preventDefault(),this.$emit("update:modelValue",this.max);break;case"PageUp":e.preventDefault(),this.updateModelValue(this.modelValue+10);break;case"PageDown":e.preventDefault(),this.updateModelValue(this.modelValue-10)}}},computed:{containerClass(){return["p-knob p-component",{"p-disabled":this.disabled}]},rangePath(){return`M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`},valuePath(){return`M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`},zeroRadians(){return this.min>0&&this.max>0?this.mapRange(this.min,this.min,this.max,this.minRadians,this.maxRadians):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)},minX(){return this.midX+Math.cos(this.minRadians)*this.radius},minY(){return this.midY-Math.sin(this.minRadians)*this.radius},maxX(){return this.midX+Math.cos(this.maxRadians)*this.radius},maxY(){return this.midY-Math.sin(this.maxRadians)*this.radius},zeroX(){return this.midX+Math.cos(this.zeroRadians)*this.radius},zeroY(){return this.midY-Math.sin(this.zeroRadians)*this.radius},valueX(){return this.midX+Math.cos(this.valueRadians)*this.radius},valueY(){return this.midY-Math.sin(this.valueRadians)*this.radius},largeArc(){return Math.abs(this.zeroRadians-this.valueRadians)<Math.PI?0:1},sweep(){return this.valueRadians>this.zeroRadians?0:1},valueToDisplay(){return this.valueTemplate.replace(/{value}/g,this.modelValue)}}};const s=["width","height","tabindex","aria-valuemin","aria-valuemax","aria-valuenow","aria-labelledby","aria-label"],n=["d","stroke-width","stroke"],o=["d","stroke-width","stroke"],l=["fill"];return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===a&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n@keyframes dash-frame {\n100% {\n        stroke-dashoffset: 0;\n}\n}\n.p-knob-range {\n    fill: none;\n    transition: stroke 0.1s ease-in;\n}\n.p-knob-value {\n    animation-name: dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n.p-knob-text {\n    font-size: 1.3rem;\n    text-align: center;\n}\n"),i.render=function(e,a,i,r,d,h){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:h.containerClass},e.ptm("root")),[(t.openBlock(),t.createElementBlock("svg",t.mergeProps({viewBox:"0 0 100 100",role:"slider",width:i.size,height:i.size,tabindex:i.readonly||i.disabled?-1:i.tabindex,"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":i.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onClick:a[0]||(a[0]=(...e)=>h.onClick&&h.onClick(...e)),onKeydown:a[1]||(a[1]=(...e)=>h.onKeyDown&&h.onKeyDown(...e)),onMousedown:a[2]||(a[2]=(...e)=>h.onMouseDown&&h.onMouseDown(...e)),onMouseup:a[3]||(a[3]=(...e)=>h.onMouseUp&&h.onMouseUp(...e)),onTouchstart:a[4]||(a[4]=(...e)=>h.onTouchStart&&h.onTouchStart(...e)),onTouchend:a[5]||(a[5]=(...e)=>h.onTouchEnd&&h.onTouchEnd(...e))},e.ptm("svg")),[t.createElementVNode("path",t.mergeProps({d:h.rangePath,"stroke-width":i.strokeWidth,stroke:i.rangeColor,class:"p-knob-range"},e.ptm("range")),null,16,n),t.createElementVNode("path",t.mergeProps({d:h.valuePath,"stroke-width":i.strokeWidth,stroke:i.valueColor,class:"p-knob-value"},e.ptm("value")),null,16,o),i.showValue?(t.openBlock(),t.createElementBlock("text",t.mergeProps({key:0,x:50,y:57,"text-anchor":"middle",fill:i.textColor,class:"p-knob-text"},e.ptm("label")),t.toDisplayString(h.valueToDisplay),17,l)):t.createCommentVNode("",!0)],16,s))],16)},i}(primevue.basecomponent,Vue);
+this.primevue=this.primevue||{},this.primevue.knob=function(e,t,a){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e),o=t.useStyle("\n@keyframes dash-frame {\n    100% {\n        stroke-dashoffset: 0;\n    }\n}\n.p-knob-range {\n    fill: none;\n    transition: stroke 0.1s ease-in;\n}\n.p-knob-value {\n    animation-name: dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n.p-knob-text {\n    font-size: 1.3rem;\n    text-align: center;\n}\n",{name:"knob",manual:!0}),s={name:"Knob",extends:{name:"BaseKnob",extends:i.default,props:{modelValue:{type:Number,default:null},size:{type:Number,default:100},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},step:{type:Number,default:1},min:{type:Number,default:0},max:{type:Number,default:100},valueColor:{type:String,default:"var(--primary-color, Black)"},rangeColor:{type:String,default:"var(--surface-border, LightGray)"},textColor:{type:String,default:"var(--text-color-secondary, Black)"},strokeWidth:{type:Number,default:14},showValue:{type:Boolean,default:!0},valueTemplate:{type:String,default:"{value}"},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},css:{classes:{root:function(e){return["p-knob p-component",{"p-disabled":e.props.disabled}]},range:"p-knob-range",value:"p-knob-value",label:"p-knob-text"},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change"],data:function(){return{radius:40,midX:50,midY:50,minRadians:4*Math.PI/3,maxRadians:-Math.PI/3}},methods:{updateValue:function(e,t){var a=Math.atan2(this.size/2-t,e-this.size/2),n=-Math.PI/2-Math.PI/6;this.updateModel(a,n)},updateModel:function(e,t){var a;if(e>this.maxRadians)a=this.mapRange(e,this.minRadians,this.maxRadians,this.min,this.max);else{if(!(e<t))return;a=this.mapRange(e+2*Math.PI,this.minRadians,this.maxRadians,this.min,this.max)}var n=Math.round((a-this.min)/this.step)*this.step+this.min;this.$emit("update:modelValue",n),this.$emit("change",n)},updateModelValue:function(e){this.$emit("update:modelValue",e>this.max?this.max:e<this.min?this.min:e)},mapRange:function(e,t,a,n,i){return(e-t)*(i-n)/(a-t)+n},onClick:function(e){this.disabled||this.readonly||this.updateValue(e.offsetX,e.offsetY)},onMouseDown:function(e){this.disabled||this.readonly||(window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp),e.preventDefault())},onMouseUp:function(e){this.disabled||this.readonly||(window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),e.preventDefault())},onTouchStart:function(e){this.disabled||this.readonly||(window.addEventListener("touchmove",this.onTouchMove),window.addEventListener("touchend",this.onTouchEnd),e.preventDefault())},onTouchEnd:function(e){this.disabled||this.readonly||(window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.onTouchEnd),e.preventDefault())},onMouseMove:function(e){this.disabled||this.readonly||(this.updateValue(e.offsetX,e.offsetY),e.preventDefault())},onTouchMove:function(e){if(!this.disabled&&!this.readonly&&1==e.touches.length){var t=this.$el.getBoundingClientRect(),a=e.targetTouches.item(0);this.updateValue(a.clientX-t.left,a.clientY-t.top)}},onKeyDown:function(e){if(!this.disabled&&!this.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),this.updateModelValue(this.modelValue+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),this.updateModelValue(this.modelValue-1);break;case"Home":e.preventDefault(),this.$emit("update:modelValue",this.min);break;case"End":e.preventDefault(),this.$emit("update:modelValue",this.max);break;case"PageUp":e.preventDefault(),this.updateModelValue(this.modelValue+10);break;case"PageDown":e.preventDefault(),this.updateModelValue(this.modelValue-10)}}},computed:{rangePath:function(){return"M ".concat(this.minX," ").concat(this.minY," A ").concat(this.radius," ").concat(this.radius," 0 1 1 ").concat(this.maxX," ").concat(this.maxY)},valuePath:function(){return"M ".concat(this.zeroX," ").concat(this.zeroY," A ").concat(this.radius," ").concat(this.radius," 0 ").concat(this.largeArc," ").concat(this.sweep," ").concat(this.valueX," ").concat(this.valueY)},zeroRadians:function(){return this.mapRange(this.min>0&&this.max>0?this.min:0,this.min,this.max,this.minRadians,this.maxRadians)},valueRadians:function(){return this.mapRange(this.modelValue,this.min,this.max,this.minRadians,this.maxRadians)},minX:function(){return this.midX+Math.cos(this.minRadians)*this.radius},minY:function(){return this.midY-Math.sin(this.minRadians)*this.radius},maxX:function(){return this.midX+Math.cos(this.maxRadians)*this.radius},maxY:function(){return this.midY-Math.sin(this.maxRadians)*this.radius},zeroX:function(){return this.midX+Math.cos(this.zeroRadians)*this.radius},zeroY:function(){return this.midY-Math.sin(this.zeroRadians)*this.radius},valueX:function(){return this.midX+Math.cos(this.valueRadians)*this.radius},valueY:function(){return this.midY-Math.sin(this.valueRadians)*this.radius},largeArc:function(){return Math.abs(this.zeroRadians-this.valueRadians)<Math.PI?0:1},sweep:function(){return this.valueRadians>this.zeroRadians?0:1},valueToDisplay:function(){return this.valueTemplate.replace(/{value}/g,this.modelValue)}}},r=["width","height","tabindex","aria-valuemin","aria-valuemax","aria-valuenow","aria-labelledby","aria-label"],u=["d","stroke-width","stroke"],l=["d","stroke-width","stroke"],d=["fill"];return s.render=function(e,t,n,i,o,s){return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"knob"}),[(a.openBlock(),a.createElementBlock("svg",a.mergeProps({viewBox:"0 0 100 100",role:"slider",width:e.size,height:e.size,tabindex:e.readonly||e.disabled?-1:e.tabindex,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":e.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onClick:t[0]||(t[0]=function(){return s.onClick&&s.onClick.apply(s,arguments)}),onKeydown:t[1]||(t[1]=function(){return s.onKeyDown&&s.onKeyDown.apply(s,arguments)}),onMousedown:t[2]||(t[2]=function(){return s.onMouseDown&&s.onMouseDown.apply(s,arguments)}),onMouseup:t[3]||(t[3]=function(){return s.onMouseUp&&s.onMouseUp.apply(s,arguments)}),onTouchstart:t[4]||(t[4]=function(){return s.onTouchStart&&s.onTouchStart.apply(s,arguments)}),onTouchend:t[5]||(t[5]=function(){return s.onTouchEnd&&s.onTouchEnd.apply(s,arguments)})},e.ptm("svg")),[a.createElementVNode("path",a.mergeProps({d:s.rangePath,"stroke-width":e.strokeWidth,stroke:e.rangeColor,class:e.cx("range")},e.ptm("range")),null,16,u),a.createElementVNode("path",a.mergeProps({d:s.valuePath,"stroke-width":e.strokeWidth,stroke:e.valueColor,class:e.cx("value")},e.ptm("value")),null,16,l),e.showValue?(a.openBlock(),a.createElementBlock("text",a.mergeProps({key:0,x:50,y:57,"text-anchor":"middle",fill:e.textColor,class:e.cx("label")},e.ptm("label")),a.toDisplayString(s.valueToDisplay),17,d)):a.createCommentVNode("",!0)],16,r))],16)},s}(primevue.basecomponent,primevue.usestyle,Vue);

package/listbox/BaseListbox.vue

@@ -0,0 +1,156 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-listbox-list-wrapper {
+    overflow: auto;
+}
+
+.p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-listbox-item-group {
+    cursor: auto;
+}
+
+.p-listbox-filter-container {
+    position: relative;
+}
+
+.p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-listbox-filter {
+    width: 100%;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-listbox p-component',
+        {
+            'p-focus': instance.focused,
+            'p-disabled': props.disabled
+        }
+    ],
+    header: 'p-listbox-header',
+    filterContainer: 'p-listbox-filter-container',
+    filterInput: 'p-listbox-filter p-inputtext p-component',
+    filterIcon: 'p-listbox-filter-icon',
+    wrapper: 'p-listbox-list-wrapper',
+    list: 'p-listbox-list',
+    itemGroup: 'p-listbox-item-group',
+    item: ({ instance, option, index, getItemOptions }) => [
+        'p-listbox-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-listbox-empty-message'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'listbox', manual: true });
+
+export default {
+    name: 'BaseListbox',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        options: Array,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null,
+        optionGroupLabel: null,
+        optionGroupChildren: null,
+        listStyle: null,
+        disabled: Boolean,
+        dataKey: null,
+        multiple: Boolean,
+        metaKeySelection: Boolean,
+        filter: Boolean,
+        filterPlaceholder: String,
+        filterLocale: String,
+        filterMatchMode: {
+            type: String,
+            default: 'contains'
+        },
+        filterFields: {
+            type: Array,
+            default: null
+        },
+        filterInputProps: null,
+        virtualScrollerOptions: {
+            type: Object,
+            default: null
+        },
+        autoOptionFocus: {
+            type: Boolean,
+            default: true
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        filterMessage: {
+            type: String,
+            default: null
+        },
+        selectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySelectionMessage: {
+            type: String,
+            default: null
+        },
+        emptyFilterMessage: {
+            type: String,
+            default: null
+        },
+        emptyMessage: {
+            type: String,
+            default: null
+        },
+        filterIcon: {
+            type: String,
+            default: undefined
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/listbox/Listbox.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { InputHTMLAttributes, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
@@ -17,6 +18,7 @@ export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes
  * Custom passthrough(pt) option method.
  */
 export interface ListboxPassThroughMethodOptions {
+    instance: any;
     props: ListboxProps;
     state: ListboxState;
     context: ListboxContext;
@@ -118,6 +120,11 @@ export interface ListboxPassThroughOptions {
      * Uses to pass attributes to the hidden last focusable element's DOM element.
      */
     hiddenLastFocusableEl?: ListboxPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -316,6 +323,11 @@ export interface ListboxProps {
      * @type {ListboxPassThroughOptions}
      */
     pt?: ListboxPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/listbox/Listbox.vue

@@ -1,14 +1,24 @@
 <template>
-    <div :id="id" :class="containerClass" @focusout="onFocusout" v-bind="ptm('root')">
-        <span ref="firstHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
+    <div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptm('root')" data-pc-name="listbox">
+        <span
+            ref="firstHiddenFocusableElement"
+            role="presentation"
+            aria-hidden="true"
+            class="p-hidden-accessible p-hidden-focusable"
+            :tabindex="!disabled ? tabindex : -1"
+            @focus="onFirstHiddenFocus"
+            v-bind="ptm('hiddenFirstFocusableEl')"
+            :data-p-hidden-accessible="true"
+            :data-p-hidden-focusable="true"
+        ></span>
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-        <div v-if="filter" class="p-listbox-header" v-bind="ptm('header')">
-            <div class="p-listbox-filter-container" v-bind="ptm('filterContainer')">
+        <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
+            <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
                 <input
                     ref="filterInput"
                     v-model="filterValue"
                     type="text"
-                    class="p-listbox-filter p-inputtext p-component"
+                    :class="cx('filterInput')"
                     :placeholder="filterPlaceholder"
                     role="searchbox"
                     autocomplete="off"
@@ -21,21 +31,21 @@
                     v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                 />
 
-                <slot name="filtericon">
-                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
+                <slot name="filtericon" :class="cx('filterIcon')">
+                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                 </slot>
             </div>
-            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
+            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                 {{ filterResultMessageText }}
             </span>
         </div>
-        <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle" v-bind="ptm('wrapper')">
-            <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+        <div ref="listWrapper" :class="cx('wrapper')" :style="listStyle" v-bind="ptm('wrapper')">
+            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                 <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                     <ul
                         :ref="(el) => listRef(el, contentRef)"
                         :id="id + '_list'"
-                        :class="['p-listbox-list', styleClass]"
+                        :class="[cx('list'), styleClass]"
                         :style="contentStyle"
                         :tabindex="-1"
                         role="listbox"
@@ -50,7 +60,7 @@
                         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-listbox-item-group" role="option" v-bind="ptm('itemGroup')">
+                            <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
                                 <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                             </li>
                             <li
@@ -58,7 +68,7 @@
                                 :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) }]"
+                                :class="cx('item', { option, index: i, getItemOptions })"
                                 role="option"
                                 :aria-label="getOptionLabel(option)"
                                 :aria-selected="isSelected(option)"
@@ -70,14 +80,17 @@
                                 @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                 @touchend="onOptionTouchEnd()"
                                 v-bind="getPTOptions(option, getItemOptions, i, 'item')"
+                                :data-p-highlight="isSelected(option)"
+                                :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
+                                :data-p-disabled="isOptionDisabled(option)"
                             >
                                 <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" v-bind="ptm('emptyMessage')">
+                        <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
                             <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                         </li>
-                        <li v-else-if="!options || (options && options.length === 0)" class="p-listbox-empty-message" role="option" v-bind="ptm('emptyMessage')">
+                        <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </li>
                     </ul>
@@ -88,102 +101,38 @@
             </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" v-bind="ptm('emptyMessage')">
+        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
             {{ emptyMessageText }}
         </span>
-        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
             {{ selectedMessageText }}
         </span>
-        <span ref="lastHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
+        <span
+            ref="lastHiddenFocusableElement"
+            role="presentation"
+            aria-hidden="true"
+            class="p-hidden-accessible p-hidden-focusable"
+            :tabindex="!disabled ? tabindex : -1"
+            @focus="onLastHiddenFocus"
+            v-bind="ptm('hiddenLastFocusableEl')"
+            :data-p-hidden-accessible="true"
+            :data-p-hidden-focusable="true"
+        ></span>
     </div>
 </template>
 
 <script>
 import { FilterService } from 'primevue/api';
-import BaseComponent from 'primevue/basecomponent';
 import SearchIcon from 'primevue/icons/search';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
+import BaseListbox from './BaseListbox.vue';
 
 export default {
     name: 'Listbox',
-    extends: BaseComponent,
+    extends: BaseListbox,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter'],
-    props: {
-        modelValue: null,
-        options: Array,
-        optionLabel: null,
-        optionValue: null,
-        optionDisabled: null,
-        optionGroupLabel: null,
-        optionGroupChildren: null,
-        listStyle: null,
-        disabled: Boolean,
-        dataKey: null,
-        multiple: Boolean,
-        metaKeySelection: Boolean,
-        filter: Boolean,
-        filterPlaceholder: String,
-        filterLocale: String,
-        filterMatchMode: {
-            type: String,
-            default: 'contains'
-        },
-        filterFields: {
-            type: Array,
-            default: null
-        },
-        filterInputProps: null,
-        virtualScrollerOptions: {
-            type: Object,
-            default: null
-        },
-        autoOptionFocus: {
-            type: Boolean,
-            default: true
-        },
-        selectOnFocus: {
-            type: Boolean,
-            default: false
-        },
-        filterMessage: {
-            type: String,
-            default: null
-        },
-        selectionMessage: {
-            type: String,
-            default: null
-        },
-        emptySelectionMessage: {
-            type: String,
-            default: null
-        },
-        emptyFilterMessage: {
-            type: String,
-            default: null
-        },
-        emptyMessage: {
-            type: String,
-            default: null
-        },
-        filterIcon: {
-            type: String,
-            default: undefined
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        }
-    },
     list: null,
     virtualScroller: null,
     optionTouched: false,
@@ -252,7 +201,7 @@ export default {
         onFirstHiddenFocus() {
             DomHandler.focus(this.list);
 
-            const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
+            const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])');
 
             this.$refs.lastHiddenFocusableElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? -1 : undefined;
             this.$refs.firstHiddenFocusableElement.tabIndex = -1;
@@ -261,7 +210,7 @@ export default {
             const relatedTarget = event.relatedTarget;
 
             if (relatedTarget === this.list) {
-                const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])');
 
                 DomHandler.focus(firstFocusableEl);
                 this.$refs.firstHiddenFocusableElement.tabIndex = undefined;
@@ -712,15 +661,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-listbox p-component',
-                {
-                    'p-focus': this.focused,
-                    'p-disabled': this.disabled
-                }
-            ];
-        },
         visibleOptions() {
             const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
@@ -775,39 +715,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-listbox-list-wrapper {
-    overflow: auto;
-}
-
-.p-listbox-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-listbox-item {
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-listbox-item-group {
-    cursor: auto;
-}
-
-.p-listbox-filter-container {
-    position: relative;
-}
-
-.p-listbox-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-listbox-filter {
-    width: 100%;
-}
-</style>