Refactor #3922 - For MultiSelect
Tuğçe Küçükoğlu
parent
812e6c6a8c
commit
f7bd91e3cf
|
|
@ -292,6 +292,12 @@ const MultiSelectProps = [
|
|||
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.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ import { MegaMenuPassThroughOptions } from '../megamenu';
|
|||
import { MenuPassThroughOptions } from '../menu';
|
||||
import { MenubarPassThroughOptions } from '../menubar';
|
||||
import { MessagePassThroughOptions } from '../message';
|
||||
import { MultiSelectPassThroughOptions } from '../multiselect';
|
||||
import { OverlayPanelPassThroughOptions } from '../overlaypanel';
|
||||
import { PanelPassThroughOptions } from '../panel';
|
||||
import { PanelMenuPassThroughOptions } from '../panelmenu';
|
||||
|
|
@ -129,6 +130,7 @@ interface PrimeVuePTOptions {
|
|||
menu?: MenuPassThroughOptions;
|
||||
menubar?: MenubarPassThroughOptions;
|
||||
message?: MessagePassThroughOptions;
|
||||
multiselect?: MultiSelectPassThroughOptions;
|
||||
overlaypanel?: OverlayPanelPassThroughOptions;
|
||||
panel?: PanelPassThroughOptions;
|
||||
panelmenu?: PanelMenuPassThroughOptions;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,18 @@
|
|||
*/
|
||||
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
|
||||
|
||||
export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes) | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface MultiSelectPassThroughMethodOptions {
|
||||
props: MultiSelectProps;
|
||||
state: MultiSelectState;
|
||||
context: MultiSelectContext;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom change event.
|
||||
|
|
@ -56,6 +67,212 @@ export interface MultiSelectFilterEvent {
|
|||
value: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link MultiSelectProps.pt}
|
||||
*/
|
||||
export interface MultiSelectPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the input's DOM element.
|
||||
*/
|
||||
input?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the label container's DOM element.
|
||||
*/
|
||||
labelContainer?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the label's DOM element.
|
||||
*/
|
||||
label?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the token's DOM element.
|
||||
*/
|
||||
token?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the token label's DOM element.
|
||||
*/
|
||||
tokenLabel?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the remove token icon's DOM element.
|
||||
*/
|
||||
removeTokenIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the trigger's DOM element.
|
||||
*/
|
||||
trigger?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the trigger icon's DOM element.
|
||||
*/
|
||||
triggerIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the dropdown icon's DOM element.
|
||||
*/
|
||||
dropdownIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the panel's DOM element.
|
||||
*/
|
||||
panel?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header checkbox container's DOM element.
|
||||
*/
|
||||
headerCheckboxContainer?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header checkbox's DOM element.
|
||||
*/
|
||||
headerCheckbox?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the filter container's DOM element.
|
||||
*/
|
||||
filterContainer?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the filter input's DOM element.
|
||||
*/
|
||||
filterInput?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the filter icon's DOM element.
|
||||
*/
|
||||
filterIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close button's DOM element.
|
||||
*/
|
||||
closeButton?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the close icon's DOM element.
|
||||
*/
|
||||
closeIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the wrapper's DOM element.
|
||||
*/
|
||||
wrapper?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the VirtualScroller component.
|
||||
* @see {@link VirtualScrollerPassThroughOptionType}
|
||||
*/
|
||||
virtualScroller?: VirtualScrollerPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the list's DOM element.
|
||||
*/
|
||||
list?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the item group's DOM element.
|
||||
*/
|
||||
itemGroup?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the item's DOM element.
|
||||
*/
|
||||
item?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the checkbox container's DOM element.
|
||||
*/
|
||||
checkboxContainer?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the checkbox's DOM element.
|
||||
*/
|
||||
checkbox?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the checkbox icon's DOM element.
|
||||
*/
|
||||
checkboxIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the option's DOM element.
|
||||
*/
|
||||
option?: MultiSelectPassThroughOptionType;
|
||||
|
||||
/**
|
||||
* Uses to pass attributes to the emptyMessage's DOM element.
|
||||
*/
|
||||
emptyMessage?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden input wrapper's DOM element.
|
||||
*/
|
||||
hiddenInputWrapper?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden input's DOM element.
|
||||
*/
|
||||
hiddenInput?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden first focusable element's DOM element.
|
||||
*/
|
||||
hiddenFirstFocusableEl?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden filter result's DOM element.
|
||||
*/
|
||||
hiddenFilterResult?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden selected message's DOM element.
|
||||
*/
|
||||
hiddenSelectedMessage?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hidden last focusable element's DOM element.
|
||||
*/
|
||||
hiddenLastFocusableEl?: MultiSelectPassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface MultiSelectPassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current inline state in MultiSelect component.
|
||||
*/
|
||||
export interface MultiSelectState {
|
||||
/**
|
||||
* Current id state as a string.
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Current focused state as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
focused: boolean;
|
||||
/**
|
||||
* Current focused item index as a number.
|
||||
* @defaultvalue -1
|
||||
*/
|
||||
focusedOptionIndex: number;
|
||||
/**
|
||||
* Current filter value state as a string.
|
||||
*/
|
||||
filterValue: string;
|
||||
/**
|
||||
* Current overlay visible state as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
overlayVisible: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current options in MultiSelect component.
|
||||
*/
|
||||
export interface MultiSelectContext {
|
||||
/**
|
||||
* 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 MultiSelect component.
|
||||
*/
|
||||
|
|
@ -281,6 +498,11 @@ export interface MultiSelectProps {
|
|||
* Identifier of the underlying input element.
|
||||
*/
|
||||
'aria-labelledby'?: string | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* @type {MultiSelectPassThroughOptions}
|
||||
*/
|
||||
pt?: MultiSelectPassThroughOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="container" :class="containerClass" @click="onContainerClick">
|
||||
<div class="p-hidden-accessible">
|
||||
<div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
|
||||
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
|
||||
<input
|
||||
ref="focusInput"
|
||||
:id="inputId"
|
||||
|
|
@ -19,23 +19,23 @@
|
|||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@keydown="onKeyDown"
|
||||
v-bind="inputProps"
|
||||
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-multiselect-label-container">
|
||||
<div :class="labelClass">
|
||||
<div class="p-multiselect-label-container" v-bind="ptm('labelContainer')">
|
||||
<div :class="labelClass" v-bind="ptm('label')">
|
||||
<slot name="value" :value="modelValue" :placeholder="placeholder">
|
||||
<template v-if="display === 'comma'">
|
||||
{{ label || 'empty' }}
|
||||
</template>
|
||||
<template v-else-if="display === 'chip'">
|
||||
<div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token">
|
||||
<div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token" v-bind="ptm('token')">
|
||||
<slot name="chip" :value="item">
|
||||
<span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
|
||||
<span class="p-multiselect-token-label" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
|
||||
</slot>
|
||||
<slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
|
||||
<span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
|
||||
<TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" />
|
||||
<span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
|
||||
<TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
<template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
|
||||
|
|
@ -43,32 +43,32 @@
|
|||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-multiselect-trigger">
|
||||
<div class="p-multiselect-trigger" v-bind="ptm('trigger')">
|
||||
<slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
|
||||
<span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
|
||||
<SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" />
|
||||
<span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('triggerIcon')" />
|
||||
<SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" v-bind="ptm('triggerIcon')" />
|
||||
</slot>
|
||||
<slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
|
||||
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
|
||||
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
||||
<div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
|
||||
<span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
|
||||
<div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
|
||||
<span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
|
||||
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
|
||||
<div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
|
||||
<div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
|
||||
<div class="p-hidden-accessible">
|
||||
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
|
||||
<div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header" v-bind="ptm('header')">
|
||||
<div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
|
||||
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
|
||||
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
|
||||
</div>
|
||||
<div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
|
||||
<div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
|
||||
<slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
|
||||
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
|
||||
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" v-bind="getHeaderCheckboxPTOptions('headerCheckboxIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filter" class="p-multiselect-filter-container">
|
||||
<div v-if="filter" class="p-multiselect-filter-container" v-bind="ptm('filterContainer')">
|
||||
<input
|
||||
ref="filterInput"
|
||||
type="text"
|
||||
|
|
@ -83,27 +83,34 @@
|
|||
@keydown="onFilterKeyDown"
|
||||
@blur="onFilterBlur"
|
||||
@input="onFilterChange"
|
||||
v-bind="filterInputProps"
|
||||
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
|
||||
/>
|
||||
<slot name="filtericon" class="p-multiselect-filter-icon">
|
||||
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
|
||||
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
<span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
|
||||
<span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
|
||||
{{ filterResultMessageText }}
|
||||
</span>
|
||||
<button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
|
||||
<button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
|
||||
<slot name="closeicon" class="p-multiselect-close-icon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" v-bind="ptm('closeIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
|
||||
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
|
||||
<div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
|
||||
<VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
|
||||
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
|
||||
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true">
|
||||
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" 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-multiselect-item-group" role="option">
|
||||
<li
|
||||
v-if="isOptionGroup(option)"
|
||||
:id="id + '_' + getOptionIndex(i, getItemOptions)"
|
||||
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
|
||||
class="p-multiselect-item-group"
|
||||
role="option"
|
||||
v-bind="ptm('itemGroup')"
|
||||
>
|
||||
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -120,23 +127,28 @@
|
|||
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
|
||||
@click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
|
||||
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
|
||||
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'item')"
|
||||
>
|
||||
<div class="p-checkbox p-component">
|
||||
<div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
|
||||
<div class="p-checkbox p-component" v-bind="ptm('checkboxContainer')">
|
||||
<div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')">
|
||||
<slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
|
||||
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
|
||||
<component
|
||||
:is="checkboxIcon ? 'span' : 'CheckIcon'"
|
||||
:class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"
|
||||
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
|
||||
<span>{{ getOptionLabel(option) }}</span>
|
||||
<span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
|
||||
</slot>
|
||||
</li>
|
||||
</template>
|
||||
<li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option">
|
||||
<li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-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-multiselect-empty-message" role="option">
|
||||
<li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option" v-bind="ptm('emptyMessage')">
|
||||
<slot name="empty">{{ emptyMessageText }}</slot>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -147,13 +159,13 @@
|
|||
</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="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus"></span>
|
||||
<span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
|
||||
</div>
|
||||
</transition>
|
||||
</Portal>
|
||||
|
|
@ -162,6 +174,7 @@
|
|||
|
||||
<script>
|
||||
import { FilterService } from 'primevue/api';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import CheckIcon from 'primevue/icons/check';
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import SearchIcon from 'primevue/icons/search';
|
||||
|
|
@ -176,6 +189,7 @@ import VirtualScroller from 'primevue/virtualscroller';
|
|||
|
||||
export default {
|
||||
name: 'MultiSelect',
|
||||
extends: BaseComponent,
|
||||
emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
|
||||
props: {
|
||||
modelValue: null,
|
||||
|
|
@ -397,6 +411,23 @@ export default {
|
|||
getOptionRenderKey(option) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
|
||||
},
|
||||
getHeaderCheckboxPTOptions(key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
selected: this.allSelected,
|
||||
focused: this.headerCheckboxFocused
|
||||
}
|
||||
});
|
||||
},
|
||||
getCheckboxPTOptions(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) {
|
||||
if (this.maxSelectionLimitReached && !this.isSelected(option)) {
|
||||
return true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue