vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #5681, #5683 - For Listbox, Select

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-03 23:53:04 +03:00
parent 46ddebc0c0
commit 4221682530
7 changed files with 122 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/lib/listbox/Listbox.d.ts vendored
View file

@ -130,15 +130,15 @@ export interface ListboxPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
filterInput?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>; filter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */
filterIcon?: ListboxPassThroughOptionType; 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. * Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType} * @see {@link VirtualScrollerPassThroughOptionType}
@ -149,13 +149,13 @@ export interface ListboxPassThroughOptions<T = any> {
*/ */
list?: ListboxPassThroughOptionType<T>; 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. * Used to pass attributes to the emptyMessage's DOM element.
*/ */

12
components/lib/listbox/Listbox.vue
View file

@ -19,7 +19,7 @@
<InputText <InputText
v-model="filterValue" v-model="filterValue"
type="text" type="text"
:class="cx('filterInput')" :class="cx('filter')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
role="searchbox" role="searchbox"
autocomplete="off" autocomplete="off"
@ -32,7 +32,7 @@
@input="onFilterChange" @input="onFilterChange"
@blur="onFilterBlur" @blur="onFilterBlur"
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
:pt="ptm('filterInput')" :pt="ptm('filter')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
@ -43,7 +43,7 @@
{{ filterResultMessageText }} {{ filterResultMessageText }}
</span> </span>
</div> </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')"> <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 }"> <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul <ul
@ -64,7 +64,7 @@
v-bind="ptm('list')" v-bind="ptm('list')"
> >
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))"> <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> <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li> </li>
<li <li
@ -72,7 +72,7 @@
:id="id + '_' + getOptionIndex(i, getItemOptions)" :id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }" :style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('item', { option, index: i, getItemOptions })" :class="cx('option', { option, index: i, getItemOptions })"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)" :aria-selected="isSelected(option)"
@ -84,7 +84,7 @@
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
@touchend="onOptionTouchEnd()" @touchend="onOptionTouchEnd()"
@dblclick="onOptionDblClick($event, option)" @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-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"

8
components/lib/listbox/style/ListboxStyle.js
View file

@ -126,12 +126,12 @@ const classes = {
], ],
header: 'p-listbox-header', header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container', filterContainer: 'p-listbox-filter-container',
filterInput: 'p-listbox-filter', filter: 'p-listbox-filter',
filterIcon: 'p-listbox-filter-icon', filterIcon: 'p-listbox-filter-icon',
wrapper: 'p-listbox-list-container', listContainer: 'p-listbox-list-container',
list: 'p-listbox-list', list: 'p-listbox-list',
itemGroup: 'p-listbox-option-group', optionGroup: 'p-listbox-option-group',
item: ({ instance, option, index, getItemOptions }) => [ option: ({ instance, option, index, getItemOptions }) => [
'p-listbox-option', 'p-listbox-option',
{ {
'p-listbox-option-selected': instance.isSelected(option), 'p-listbox-option-selected': instance.isSelected(option),

20
components/lib/select/BaseSelect.vue
View file

@ -62,10 +62,30 @@ export default {
type: Object, type: Object,
default: null default: null
}, },
labelId: {
type: String,
default: null
},
labelClass: {
type: [String, Object],
default: null
},
labelStyle: {
type: Object,
default: null
},
panelClass: { panelClass: {
type: [String, Object], type: [String, Object],
default: null default: null
}, },
overlayStyle: {
type: Object,
default: null
},
overlayClass: {
type: [String, Object],
default: null
},
panelStyle: { panelStyle: {
type: Object, type: Object,
default: null default: null

69
components/lib/select/Select.d.ts vendored
View file

@ -87,25 +87,25 @@ export interface SelectPassThroughOptions<T = any> {
*/ */
root?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the clear icon's DOM element.
*/ */
clearIcon?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the loading icon's DOM element.
*/ */
loadingIcon?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the header's DOM element.
*/ */
@ -115,17 +115,17 @@ export interface SelectPassThroughOptions<T = any> {
*/ */
filterContainer?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the filter icon's DOM element.
*/ */
filterIcon?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType} * @see {@link VirtualScrollerPassThroughOptionType}
@ -136,29 +136,29 @@ export interface SelectPassThroughOptions<T = any> {
*/ */
list?: SelectPassThroughOptionType<T>; 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. * Used to pass attributes to the empty message's DOM element.
*/ */
@ -352,25 +352,50 @@ export interface SelectProps {
*/ */
showClear?: boolean | undefined; showClear?: boolean | undefined;
/** /**
* @deprecated since v4.0. Use 'labelId' instead.
* Identifier of the underlying input element. * Identifier of the underlying input element.
*/ */
inputId?: string | undefined; inputId?: string | undefined;
/** /**
* @deprecated since v4.0. Use 'labelStyle' instead.
* Inline style of the input field. * Inline style of the input field.
*/ */
inputStyle?: object | undefined; inputStyle?: object | undefined;
/** /**
* @deprecated since v4.0. Use 'labelClass' instead.
* Style class of the input field. * Style class of the input field.
*/ */
inputClass?: string | object | undefined; 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. * Inline style of the overlay panel.
*/ */
panelStyle?: object | undefined; panelStyle?: object | undefined;
/** /**
* @deprecated since v4.0. Use 'overlayClass' instead.
* Style class of the overlay panel. * Style class of the overlay panel.
*/ */
panelClass?: string | object | undefined; 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. * A valid query selector or an HTMLElement to specify where the overlay gets attached.
* @defaultValue body * @defaultValue body

47
components/lib/select/Select.vue
View file

@ -3,10 +3,10 @@
<input <input
v-if="editable" v-if="editable"
ref="focusInput" ref="focusInput"
:id="inputId" :id="labelId || inputId"
type="text" type="text"
:class="[cx('input'), inputClass]" :class="[cx('label'), inputClass, labelClass]"
:style="inputStyle" :style="[inputStyle, labelStyle]"
:value="editableInputValue" :value="editableInputValue"
:placeholder="placeholder" :placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1" :tabindex="!disabled ? tabindex : -1"
@ -24,14 +24,14 @@
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
@input="onEditableInput" @input="onEditableInput"
v-bind="ptm('input')" v-bind="ptm('label')"
/> />
<span <span
v-else v-else
ref="focusInput" ref="focusInput"
:id="inputId" :id="labelId || inputId"
:class="[cx('input'), inputClass]" :class="[cx('label'), inputClass, labelClass]"
:style="inputStyle" :style="[inputStyle, labelStyle]"
:tabindex="!disabled ? tabindex : -1" :tabindex="!disabled ? tabindex : -1"
role="combobox" role="combobox"
:aria-label="ariaLabel || (label === 'p-emptylabel' ? undefined : label)" :aria-label="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
@ -44,14 +44,14 @@
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="ptm('input')" v-bind="ptm('label')"
> >
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot> <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span> </span>
<slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick"> <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
<component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" /> <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
</slot> </slot>
<div :class="cx('trigger')" v-bind="ptm('trigger')"> <div :class="cx('dropdown')" v-bind="ptm('dropdown')">
<slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')"> <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" /> <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
@ -62,7 +62,7 @@
</div> </div>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('panel')"> <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('overlay'), panelClass, overlayClass]" :style="[panelStyle, overlayStyle]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
<span <span
ref="firstHiddenFocusableElementOnOverlay" ref="firstHiddenFocusableElementOnOverlay"
role="presentation" role="presentation"
@ -83,7 +83,7 @@
:value="filterValue" :value="filterValue"
@vue:mounted="onFilterUpdated" @vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated" @vue:updated="onFilterUpdated"
:class="cx('filterInput')" :class="cx('filter')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
:invalid="invalid" :invalid="invalid"
:variant="variant" :variant="variant"
@ -95,7 +95,7 @@
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
@blur="onFilterBlur" @blur="onFilterBlur"
@input="onFilterChange" @input="onFilterChange"
:pt="ptm('filterInput')" :pt="ptm('filter')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" /> <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@ -105,21 +105,28 @@
{{ filterResultMessageText }} {{ filterResultMessageText }}
</span> </span>
</div> </div>
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')"> <div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')"> <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }"> <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')"> <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))"> <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)"> <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">
<span :class="cx('itemGroupLabel')" v-bind="ptm('itemGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span> <span :class="cx('optionGroupLabel')" v-bind="ptm('optionGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span>
</slot> </slot>
</li> </li>
<li <li
v-else v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)" :id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple v-ripple
:class="cx('item', { option, focusedOption: getOptionIndex(i, getItemOptions) })" :class="cx('option', { option, focusedOption: getOptionIndex(i, getItemOptions) })"
:style="{ height: itemSize ? itemSize + 'px' : undefined }" :style="{ height: itemSize ? itemSize + 'px' : undefined }"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
@ -132,14 +139,14 @@
:data-p-highlight="isSelected(option)" :data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
v-bind="getPTItemOptions(option, getItemOptions, i, 'item')" v-bind="getPTItemOptions(option, getItemOptions, i, 'option')"
> >
<template v-if="checkmark"> <template v-if="checkmark">
<CheckIcon v-if="isSelected(option)" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" /> <CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" /> <BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
</template> </template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)"> <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
<span :class="cx('itemLabel')" v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span> <span :class="cx('optionLabel')" v-bind="ptm('optionLabel')">{{ getOptionLabel(option) }}</span>
</slot> </slot>
</li> </li>
</template> </template>

22
components/lib/select/style/SelectStyle.js
View file

@ -227,7 +227,7 @@ const classes = {
'p-select-open': state.overlayVisible 'p-select-open': state.overlayVisible
} }
], ],
input: ({ instance, props }) => [ label: ({ instance, props }) => [
'p-select-label', 'p-select-label',
{ {
'p-placeholder': !props.editable && instance.label === props.placeholder, 'p-placeholder': !props.editable && instance.label === props.placeholder,
@ -235,10 +235,10 @@ const classes = {
} }
], ],
clearIcon: 'p-select-clear-icon', clearIcon: 'p-select-clear-icon',
trigger: 'p-select-dropdown', dropdown: 'p-select-dropdown',
loadingicon: 'p-select-loading-icon', loadingicon: 'p-select-loading-icon',
dropdownIcon: 'p-select-dropdown-icon', dropdownIcon: 'p-select-dropdown-icon',
panel: ({ instance }) => [ overlay: ({ instance }) => [
'p-select-overlay p-component', 'p-select-overlay p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
@ -246,13 +246,13 @@ const classes = {
], ],
header: 'p-select-header', header: 'p-select-header',
filterContainer: 'p-select-filter-container', filterContainer: 'p-select-filter-container',
filterInput: 'p-select-filter', filter: 'p-select-filter',
filterIcon: 'p-select-filter-icon', filterIcon: 'p-select-filter-icon',
wrapper: 'p-select-list-container', listContainer: 'p-select-list-container',
list: 'p-select-list', list: 'p-select-list',
itemGroup: 'p-select-option-group', optionGroup: 'p-select-option-group',
itemGroupLabel: 'p-select-option-group-label', optionGroupLabel: 'p-select-option-group-label',
item: ({ instance, props, state, option, focusedOption }) => [ option: ({ instance, props, state, option, focusedOption }) => [
'p-select-option', 'p-select-option',
{ {
'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect, 'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect,
@ -260,9 +260,9 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option) 'p-disabled': instance.isOptionDisabled(option)
} }
], ],
itemLabel: 'p-select-option-label', optionLabel: 'p-select-option-label',
checkIcon: 'p-select-option-check-icon', optionCheckIcon: 'p-select-option-check-icon',
blankIcon: 'p-select-option-blank-icon', optionBlankIcon: 'p-select-option-blank-icon',
emptyMessage: 'p-select-empty-message' emptyMessage: 'p-select-empty-message'
}; };