Refactor #5426 - For MultiSelect
tugcekucukoglu
parent
d79ef6767d
commit
89e01ffe77
|
|
@ -9,8 +9,9 @@
|
|||
*/
|
||||
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { InputTextPassThroughOptions } from '../inputtext';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
|
||||
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
|
||||
|
||||
export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes | string) | string | null | undefined;
|
||||
|
|
@ -51,6 +52,20 @@ export interface MultiSelectPassThroughMethodOptions {
|
|||
global: object | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom shared passthrough(pt) option method.
|
||||
*/
|
||||
export interface MultiSelectSharedPassThroughMethodOptions {
|
||||
/**
|
||||
* Defines valid properties.
|
||||
*/
|
||||
props: MultiSelectProps;
|
||||
/**
|
||||
* Defines current inline state.
|
||||
*/
|
||||
state: MultiSelectState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom change event.
|
||||
* @see {@link MultiSelectEmits.change}
|
||||
|
|
@ -154,21 +169,14 @@ export interface MultiSelectPassThroughOptions {
|
|||
*/
|
||||
filterContainer?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter input's DOM element.
|
||||
* Used to pass attributes to the InputText component.
|
||||
* @see {@link InputTextPassThroughOptions}
|
||||
*/
|
||||
filterInput?: MultiSelectPassThroughOptionType;
|
||||
filterInput?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter icon's DOM element.
|
||||
*/
|
||||
filterIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the close button's DOM element.
|
||||
*/
|
||||
closeButton?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the close icon's DOM element.
|
||||
*/
|
||||
closeIcon?: MultiSelectPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the wrapper's DOM element.
|
||||
*/
|
||||
|
|
@ -255,7 +263,7 @@ export interface MultiSelectState {
|
|||
focused: boolean;
|
||||
/**
|
||||
* Current focused item index as a number.
|
||||
* @defaultvalue -1
|
||||
* @defaultValue -1
|
||||
*/
|
||||
focusedOptionIndex: number;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@keydown="onKeyDown"
|
||||
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
|
||||
v-bind="ptm('hiddenInput')"
|
||||
/>
|
||||
</div>
|
||||
<div :class="cx('labelContainer')" v-bind="ptm('labelContainer')">
|
||||
|
|
@ -86,14 +86,17 @@
|
|||
</template>
|
||||
</Checkbox>
|
||||
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
|
||||
<input
|
||||
<MSInputText
|
||||
ref="filterInput"
|
||||
type="text"
|
||||
:value="filterValue"
|
||||
@vue:mounted="onFilterUpdated"
|
||||
@vue:updated="onFilterUpdated"
|
||||
:class="cx('filterInput')"
|
||||
:placeholder="filterPlaceholder"
|
||||
:invalid="invalid"
|
||||
:disabled="disabled"
|
||||
:variant="variant"
|
||||
:unstyled="unstyled"
|
||||
role="searchbox"
|
||||
autocomplete="off"
|
||||
:aria-owns="id + '_list'"
|
||||
|
|
@ -101,7 +104,8 @@
|
|||
@keydown="onFilterKeyDown"
|
||||
@blur="onFilterBlur"
|
||||
@input="onFilterChange"
|
||||
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
|
||||
v-bind="filterInputProps"
|
||||
:pt="ptm('filterInput')"
|
||||
/>
|
||||
<slot name="filtericon" :class="cx('filterIcon')">
|
||||
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
|
||||
|
|
@ -110,11 +114,6 @@
|
|||
<span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
|
||||
{{ filterResultMessageText }}
|
||||
</span>
|
||||
<button v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
|
||||
<slot name="closeicon" :class="cx('closeIcon')">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
|
||||
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
|
||||
|
|
@ -205,6 +204,7 @@ import SearchIcon from 'primevue/icons/search';
|
|||
import SpinnerIcon from 'primevue/icons/spinner';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import TimesCircleIcon from 'primevue/icons/timescircle';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import Ripple from 'primevue/ripple';
|
||||
|
|
@ -451,9 +451,6 @@ export default {
|
|||
|
||||
DomHandler.focus(focusableEl);
|
||||
},
|
||||
onCloseClick() {
|
||||
this.hide(true);
|
||||
},
|
||||
onOptionSelect(event, option, index = -1, isFocus = false) {
|
||||
if (this.disabled || this.isOptionDisabled(option)) {
|
||||
return;
|
||||
|
|
@ -697,7 +694,7 @@ export default {
|
|||
this.alignOverlay();
|
||||
this.scrollInView();
|
||||
|
||||
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput);
|
||||
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el);
|
||||
},
|
||||
onOverlayAfterEnter() {
|
||||
this.bindOutsideClickListener();
|
||||
|
|
@ -1085,9 +1082,6 @@ export default {
|
|||
toggleAllAriaLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[this.allSelected ? 'selectAll' : 'unselectAll'] : undefined;
|
||||
},
|
||||
closeAriaLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
||||
},
|
||||
virtualScrollerDisabled() {
|
||||
return !this.virtualScrollerOptions;
|
||||
}
|
||||
|
|
@ -1096,6 +1090,7 @@ export default {
|
|||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
MSInputText: InputText,
|
||||
Checkbox,
|
||||
VirtualScroller,
|
||||
Portal,
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const classes = {
|
|||
trigger: 'p-multiselect-trigger',
|
||||
loadingIcon: 'p-multiselect-trigger-icon',
|
||||
dropdownIcon: 'p-multiselect-trigger-icon',
|
||||
panel: ({ props, instance }) => [
|
||||
panel: ({ instance }) => [
|
||||
'p-multiselect-panel p-component',
|
||||
{
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
|
|
@ -40,15 +40,8 @@ const classes = {
|
|||
],
|
||||
header: 'p-multiselect-header',
|
||||
filterContainer: 'p-multiselect-filter-container',
|
||||
filterInput: ({ props, instance }) => [
|
||||
'p-multiselect-filter p-inputtext p-component',
|
||||
{
|
||||
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
|
||||
}
|
||||
],
|
||||
filterInput: 'p-multiselect-filter',
|
||||
filterIcon: 'p-multiselect-filter-icon',
|
||||
closeButton: 'p-multiselect-close p-link',
|
||||
closeIcon: 'p-multiselect-close-icon',
|
||||
wrapper: 'p-multiselect-items-wrapper',
|
||||
list: 'p-multiselect-items p-component',
|
||||
itemGroup: 'p-multiselect-item-group',
|
||||
|
|
|
|||
Loading…
Reference in New Issue