vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3922 - For Listbox

pull/3938/head
Tuğçe Küçükoğlu 2023-05-08 00:07:47 +03:00
parent 189dea4d51
commit a84c2587e3
4 changed files with 173 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/listbox.js
View File

@ -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.'
}
];

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -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;

138
components/lib/listbox/Listbox.d.ts vendored
View File

@ -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;
}
/**

43
components/lib/listbox/Listbox.vue
View File

@ -1,9 +1,9 @@
<template>
<div :id="id" :class="containerClass" @focusout="onFocusout">
<span ref="firstHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onFirstHiddenFocus"></span>
<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>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" class="p-listbox-header">
<div class="p-listbox-filter-container">
<div v-if="filter" class="p-listbox-header" v-bind="ptm('header')">
<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">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<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">
<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;
},