Skip to content

Commit

Permalink
Refactor #5681, #5683 - For Listbox, Select
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed May 3, 2024
1 parent 46ddebc commit 4221682
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 70 deletions.
14 changes: 7 additions & 7 deletions components/lib/listbox/Listbox.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,15 +130,15 @@ export interface ListboxPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
filterInput?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
filter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/
filterIcon?: ListboxPassThroughOptionType;
/**
* Used to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the list container's DOM element.
*/
wrapper?: ListboxPassThroughOptionType;
listContainer?: ListboxPassThroughOptionType;
/**
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
Expand All @@ -149,13 +149,13 @@ export interface ListboxPassThroughOptions<T = any> {
*/
list?: ListboxPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group's DOM element.
* Used to pass attributes to the option group's DOM element.
*/
itemGroup?: ListboxPassThroughOptionType;
optionGroup?: ListboxPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
* Used to pass attributes to the option's DOM element.
*/
item?: ListboxPassThroughOptionType;
option?: ListboxPassThroughOptionType;
/**
* Used to pass attributes to the emptyMessage's DOM element.
*/
Expand Down
12 changes: 6 additions & 6 deletions components/lib/listbox/Listbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<InputText
v-model="filterValue"
type="text"
:class="cx('filterInput')"
:class="cx('filter')"
:placeholder="filterPlaceholder"
role="searchbox"
autocomplete="off"
Expand All @@ -32,7 +32,7 @@
@input="onFilterChange"
@blur="onFilterBlur"
@keydown="onFilterKeyDown"
:pt="ptm('filterInput')"
:pt="ptm('filter')"
/>

<slot name="filtericon" :class="cx('filterIcon')">
Expand All @@ -43,7 +43,7 @@
{{ filterResultMessageText }}
</span>
</div>
<div :class="cx('wrapper')" :style="[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]" v-bind="ptm('wrapper')">
<div :class="cx('listContainer')" :style="[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="[{ height: scrollHeight }, listStyle]" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul
Expand All @@ -64,15 +64,15 @@
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="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('optionGroup')" role="option" v-bind="ptm('optionGroup')">
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('item', { option, index: i, getItemOptions })"
:class="cx('option', { option, index: i, getItemOptions })"
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)"
Expand All @@ -84,7 +84,7 @@
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
@touchend="onOptionTouchEnd()"
@dblclick="onOptionDblClick($event, option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
v-bind="getPTOptions(option, getItemOptions, i, 'option')"
:data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
Expand Down
8 changes: 4 additions & 4 deletions components/lib/listbox/style/ListboxStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,12 @@ const classes = {
],
header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container',
filterInput: 'p-listbox-filter',
filter: 'p-listbox-filter',
filterIcon: 'p-listbox-filter-icon',
wrapper: 'p-listbox-list-container',
listContainer: 'p-listbox-list-container',
list: 'p-listbox-list',
itemGroup: 'p-listbox-option-group',
item: ({ instance, option, index, getItemOptions }) => [
optionGroup: 'p-listbox-option-group',
option: ({ instance, option, index, getItemOptions }) => [
'p-listbox-option',
{
'p-listbox-option-selected': instance.isSelected(option),
Expand Down
20 changes: 20 additions & 0 deletions components/lib/select/BaseSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,30 @@ export default {
type: Object,
default: null
},
labelId: {
type: String,
default: null
},
labelClass: {
type: [String, Object],
default: null
},
labelStyle: {
type: Object,
default: null
},
panelClass: {
type: [String, Object],
default: null
},
overlayStyle: {
type: Object,
default: null
},
overlayClass: {
type: [String, Object],
default: null
},
panelStyle: {
type: Object,
default: null
Expand Down
69 changes: 47 additions & 22 deletions components/lib/select/Select.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,25 +87,25 @@ export interface SelectPassThroughOptions<T = any> {
*/
root?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the input's DOM element.
* Used to pass attributes to the label's DOM element.
*/
input?: SelectPassThroughOptionType<T>;
label?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the clear icon's DOM element.
*/
clearIcon?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the trigger' DOM element.
* Used to pass attributes to the dropdown' DOM element.
*/
trigger?: SelectPassThroughOptionType<T>;
dropdown?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the panel's DOM element.
* Used to pass attributes to the overlay's DOM element.
*/
panel?: SelectPassThroughOptionType<T>;
overlay?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the header's DOM element.
*/
Expand All @@ -115,17 +115,17 @@ export interface SelectPassThroughOptions<T = any> {
*/
filterContainer?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter input's DOM element.
* Used to pass attributes to the filter's DOM element.
*/
filterInput?: SelectPassThroughOptionType<T>;
filter?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/
filterIcon?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the list container's DOM element.
*/
wrapper?: SelectPassThroughOptionType<T>;
listContainer?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
Expand All @@ -136,29 +136,29 @@ export interface SelectPassThroughOptions<T = any> {
*/
list?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group's DOM element.
* Used to pass attributes to the option group's DOM element.
*/
itemGroup?: SelectPassThroughOptionType<T>;
optionGroup?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group label's DOM element.
* Used to pass attributes to the option group label's DOM element.
*/
itemGroupLabel?: SelectPassThroughOptionType<T>;
optionGroupLabel?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the item's DOM element.
* Used to pass attributes to the option's DOM element.
*/
item?: SelectPassThroughOptionType<T>;
option?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the item label's DOM element.
* Used to pass attributes to the option label's DOM element.
*/
itemLabel?: SelectPassThroughOptionType<T>;
optionLabel?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the check icon's DOM element.
* Used to pass attributes to the option check icon's DOM element.
*/
checkIcon?: SelectPassThroughOptionType<T>;
optionCheckIcon?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the bank icon's DOM element.
* Used to pass attributes to the option blank icon's DOM element.
*/
blankIcon?: SelectPassThroughOptionType<T>;
optionBlankIcon?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the empty message's DOM element.
*/
Expand Down Expand Up @@ -352,25 +352,50 @@ export interface SelectProps {
*/
showClear?: boolean | undefined;
/**
* @deprecated since v4.0. Use 'labelId' instead.
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* @deprecated since v4.0. Use 'labelStyle' instead.
* Inline style of the input field.
*/
inputStyle?: object | undefined;
/**
* @deprecated since v4.0. Use 'labelClass' instead.
* Style class of the input field.
*/
inputClass?: string | object | undefined;
/**
* Identifier of the underlying label element.
*/
labelId?: string | undefined;
/**
* Inline style of the label field.
*/
labelStyle?: object | undefined;
/**
* Style class of the label field.
*/
labelClass?: string | object | undefined;
/**
* @deprecated since v4.0. Use 'overlayStyle' instead.
* Inline style of the overlay panel.
*/
panelStyle?: object | undefined;
/**
* @deprecated since v4.0. Use 'overlayClass' instead.
* Style class of the overlay panel.
*/
panelClass?: string | object | undefined;
/**
* Inline style of the overlay.
*/
overlayStyle?: object | undefined;
/**
* Style class of the overlay.
*/
overlayClass?: string | object | undefined;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
* @defaultValue body
Expand Down
Loading

0 comments on commit 4221682

Please sign in to comment.