Refactor #3922 - For Listbox

api-generator/components/listbox.js

@@ -173,6 +173,12 @@ const ListboxProps = [
         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

@@ -36,6 +36,7 @@ import { InputNumberPassThroughOptions } from '../inputnumber';
 import { InputSwitchPassThroughOptions } from '../inputswitch';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { KnobPassThroughOptions } from '../knob';
+import { ListboxPassThroughOptions } from '../listbox';
 import { MegaMenuPassThroughOptions } from '../megamenu';
 import { MenuPassThroughOptions } from '../menu';
 import { MenubarPassThroughOptions } from '../menubar';
@@ -123,6 +124,7 @@ interface PrimeVuePTOptions {
     inputswitch?: InputSwitchPassThroughOptions;
     inputtext?: InputTextPassThroughOptions;
     knob?: KnobPassThroughOptions;
+    listbox?: ListboxPassThroughOptions;
     megamenu?: MegaMenuPassThroughOptions;
     menu?: MenuPassThroughOptions;
     menubar?: MenubarPassThroughOptions;

components/lib/listbox/Listbox.d.ts

@@ -9,7 +9,18 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ListboxPassThroughMethodOptions {
+    props: ListboxProps;
+    state: ListboxState;
+    context: ListboxContext;
+}
 
 /**
  * Custom change event.
@@ -41,6 +52,126 @@ export interface ListboxFilterEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ListboxProps.pt}
+ */
+export interface ListboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden first focusable element's DOM element.
+     */
+    hiddenFirstFocusableEl?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden filter result's DOM element.
+     */
+    hiddenFilterResult?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden last focusable element's DOM element.
+     */
+    hiddenLastFocusableEl?: ListboxPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ListboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Listbox component.
+ */
+export interface ListboxState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+    /**
+     * Current focused item index as a number.
+     * @defaultValue -1
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Listbox component.
+ */
+export interface ListboxContext {
+    /**
+     * 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 Listbox component.
  */
@@ -180,6 +311,11 @@ export interface ListboxProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ListboxPassThroughOptions}
+     */
+    pt?: ListboxPassThroughOptions;
 }
 
 /**

components/lib/listbox/Listbox.vue

@@ -1,9 +1,9 @@
 <template>
-    <div :id="id" :class="containerClass" @focusout="onFocusout">
+    <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"></span>
+        <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>
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-        <div v-if="filter" class="p-listbox-header">
+        <div v-if="filter" class="p-listbox-header" v-bind="ptm('header')">
-            <div class="p-listbox-filter-container">
+            <div class="p-listbox-filter-container" v-bind="ptm('filterContainer')">
                 <input
                     ref="filterInput"
                     v-model="filterValue"
@@ -18,19 +18,19 @@
                     @input="onFilterChange"
                     @blur="onFilterBlur"
                     @keydown="onFilterKeyDown"
-                    v-bind="filterInputProps"
+                    v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                 />
 
                 <slot name="filtericon">
-                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" />
+                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
                 </slot>
             </div>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
+            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
                 {{ filterResultMessageText }}
             </span>
         </div>
-        <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle">
+        <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle" v-bind="ptm('wrapper')">
-            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+            <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                 <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                     <ul
                         :ref="(el) => listRef(el, contentRef)"
@@ -47,9 +47,10 @@
                         @focus="onListFocus"
                         @blur="onListBlur"
                         @keydown="onListKeyDown"
+                        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">
+                            <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')">
                                 <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                             </li>
                             <li
@@ -68,14 +69,15 @@
                                 @mousedown="onOptionMouseDown($event, getOptionIndex(i, getItemOptions))"
                                 @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                 @touchend="onOptionTouchEnd()"
+                                v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                             >
                                 <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">
+                        <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-listbox-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-listbox-empty-message" role="option">
+                        <li v-else-if="!options || (options && options.length === 0)" class="p-listbox-empty-message" role="option" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </li>
                     </ul>
@@ -86,18 +88,19 @@
             </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="lastHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onLastHiddenFocus"></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>
     </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';
@@ -105,6 +108,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'Listbox',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter'],
     props: {
         modelValue: null,
@@ -221,6 +225,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(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) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },