Refactor #3922 - For AutoComplete
parent
4c5d66f2de
commit
327cbbd9bc
|
@ -250,6 +250,12 @@ const AutoCompleteProps = [
|
||||||
type: 'string',
|
type: 'string',
|
||||||
default: 'null',
|
default: 'null',
|
||||||
description: 'Identifier of the underlying input element.'
|
description: 'Identifier of the underlying input element.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'pt',
|
||||||
|
type: 'any',
|
||||||
|
default: 'null',
|
||||||
|
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,19 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
||||||
|
import { ButtonPassThroughOptionType } from '../button';
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||||
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
|
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
|
||||||
|
|
||||||
|
export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes) | null | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) option method.
|
||||||
|
*/
|
||||||
|
export interface AutoCompletePassThroughMethodOptions {
|
||||||
|
props: AutoCompleteProps;
|
||||||
|
state: AutoCompleteState;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Custom change event.
|
* Custom change event.
|
||||||
|
@ -78,6 +89,96 @@ export interface AutoCompleteCompleteEvent {
|
||||||
query: string;
|
query: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) options.
|
||||||
|
* @see {@link AutoCompleteProps.pt}
|
||||||
|
*/
|
||||||
|
export interface AutoCompletePassThroughOptions {
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the root's DOM element.
|
||||||
|
*/
|
||||||
|
root?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the input's DOM element.
|
||||||
|
*/
|
||||||
|
input?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the container's DOM element.
|
||||||
|
*/
|
||||||
|
container?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the token' DOM element.
|
||||||
|
*/
|
||||||
|
token?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the token label's DOM element.
|
||||||
|
*/
|
||||||
|
tokenLabel?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the remove token icon's DOM element.
|
||||||
|
*/
|
||||||
|
removeTokenIcon?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the loading icon's DOM element.
|
||||||
|
*/
|
||||||
|
loadingIcon?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the Button component.
|
||||||
|
*/
|
||||||
|
dropdownButton?: ButtonPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the search result message's DOM element.
|
||||||
|
*/
|
||||||
|
searchResultMessage?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the panel's DOM element.
|
||||||
|
*/
|
||||||
|
panel?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the VirtualScroller component.
|
||||||
|
* @see {@link VirtualScrollerPassThroughOptionType}
|
||||||
|
*/
|
||||||
|
virtualScroller?: VirtualScrollerPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the list's DOM element.
|
||||||
|
*/
|
||||||
|
list?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the item group's DOM element.
|
||||||
|
*/
|
||||||
|
itemGroup?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the item's DOM element.
|
||||||
|
*/
|
||||||
|
item?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the empty message's DOM element.
|
||||||
|
*/
|
||||||
|
emptyMessage?: AutoCompletePassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the selected message's DOM element.
|
||||||
|
*/
|
||||||
|
selectedMessage?: AutoCompletePassThroughOptionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough attributes for each DOM elements
|
||||||
|
*/
|
||||||
|
export interface AutoCompletePassThroughAttributes {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current inline state in AutoComplete component.
|
||||||
|
*/
|
||||||
|
export interface AutoCompleteState {
|
||||||
|
/**
|
||||||
|
* Current collapsed state as a boolean.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
d_collapsed: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Defines valid properties in AutoComplete component.
|
* Defines valid properties in AutoComplete component.
|
||||||
*/
|
*/
|
||||||
|
@ -274,6 +375,11 @@ export interface AutoCompleteProps {
|
||||||
* Identifier of the underlying input element.
|
* Identifier of the underlying input element.
|
||||||
*/
|
*/
|
||||||
'aria-labelledby'?: string | undefined;
|
'aria-labelledby'?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {AutoCompletePassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: AutoCompletePassThroughOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="container" :class="containerClass" @click="onContainerClick">
|
<div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
|
||||||
<input
|
<input
|
||||||
v-if="!multiple"
|
v-if="!multiple"
|
||||||
ref="focusInput"
|
ref="focusInput"
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
@keydown="onKeyDown"
|
@keydown="onKeyDown"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
v-bind="inputProps"
|
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||||
/>
|
/>
|
||||||
<ul
|
<ul
|
||||||
v-if="multiple"
|
v-if="multiple"
|
||||||
|
@ -38,6 +38,7 @@
|
||||||
@focus="onMultipleContainerFocus"
|
@focus="onMultipleContainerFocus"
|
||||||
@blur="onMultipleContainerBlur"
|
@blur="onMultipleContainerBlur"
|
||||||
@keydown="onMultipleContainerKeyDown"
|
@keydown="onMultipleContainerKeyDown"
|
||||||
|
v-bind="ptm('container')"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
v-for="(option, i) of modelValue"
|
v-for="(option, i) of modelValue"
|
||||||
|
@ -49,15 +50,16 @@
|
||||||
:aria-selected="true"
|
:aria-selected="true"
|
||||||
:aria-setsize="modelValue.length"
|
:aria-setsize="modelValue.length"
|
||||||
:aria-posinset="i + 1"
|
:aria-posinset="i + 1"
|
||||||
|
v-bind="ptm('token')"
|
||||||
>
|
>
|
||||||
<slot name="chip" :value="option">
|
<slot name="chip" :value="option">
|
||||||
<span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
|
<span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
|
<slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
|
||||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" />
|
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
|
||||||
</slot>
|
</slot>
|
||||||
</li>
|
</li>
|
||||||
<li class="p-autocomplete-input-token" role="option">
|
<li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
|
||||||
<input
|
<input
|
||||||
ref="focusInput"
|
ref="focusInput"
|
||||||
:id="inputId"
|
:id="inputId"
|
||||||
|
@ -81,33 +83,48 @@
|
||||||
@keydown="onKeyDown"
|
@keydown="onKeyDown"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
v-bind="inputProps"
|
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<slot v-if="searching" name="loadingicon">
|
<slot v-if="searching" name="loadingicon">
|
||||||
<i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" />
|
<i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
||||||
<SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" />
|
<SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
||||||
</slot>
|
</slot>
|
||||||
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
|
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :pt="ptm('dropdownButton')">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<slot name="dropdownicon">
|
<slot name="dropdownicon">
|
||||||
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" />
|
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Button>
|
||||||
<span role="status" aria-live="polite" class="p-hidden-accessible">
|
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('searchResultMessage')">
|
||||||
{{ searchResultMessageText }}
|
{{ searchResultMessageText }}
|
||||||
</span>
|
</span>
|
||||||
<Portal :appendTo="appendTo">
|
<Portal :appendTo="appendTo">
|
||||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
||||||
<div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
|
<div
|
||||||
|
v-if="overlayVisible"
|
||||||
|
:ref="overlayRef"
|
||||||
|
:class="panelStyleClass"
|
||||||
|
:style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
|
||||||
|
@click="onOverlayClick"
|
||||||
|
@keydown="onOverlayKeyDown"
|
||||||
|
v-bind="{ ...panelProps, ...ptm('panel') }"
|
||||||
|
>
|
||||||
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
|
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
|
||||||
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
|
<VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
|
||||||
<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="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
|
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', 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="p-autocomplete-item-group" role="option">
|
<li
|
||||||
|
v-if="isOptionGroup(option)"
|
||||||
|
:id="id + '_' + getOptionIndex(i, getItemOptions)"
|
||||||
|
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
|
||||||
|
class="p-autocomplete-item-group"
|
||||||
|
role="option"
|
||||||
|
v-bind="ptm('itemGroup')"
|
||||||
|
>
|
||||||
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
|
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
|
@ -124,13 +141,14 @@
|
||||||
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
|
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
|
||||||
@click="onOptionSelect($event, option)"
|
@click="onOptionSelect($event, option)"
|
||||||
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
|
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
|
||||||
|
v-bind="ptm('item')"
|
||||||
>
|
>
|
||||||
<slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
|
<slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
|
||||||
<slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
|
<slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
|
||||||
<!--TODO: Deprecated since v3.16.0-->
|
<!--TODO: Deprecated since v3.16.0-->
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
<li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
|
<li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
|
||||||
<slot name="empty">{{ searchResultMessageText }}</slot>
|
<slot name="empty">{{ searchResultMessageText }}</slot>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -140,7 +158,7 @@
|
||||||
</template>
|
</template>
|
||||||
</VirtualScroller>
|
</VirtualScroller>
|
||||||
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
|
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
|
||||||
<span role="status" aria-live="polite" class="p-hidden-accessible">
|
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('selectedMessage')">
|
||||||
{{ selectedMessageText }}
|
{{ selectedMessageText }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -150,6 +168,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
import Button from 'primevue/button';
|
import Button from 'primevue/button';
|
||||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||||
import SpinnerIcon from 'primevue/icons/spinner';
|
import SpinnerIcon from 'primevue/icons/spinner';
|
||||||
|
@ -162,6 +181,7 @@ import VirtualScroller from 'primevue/virtualscroller';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AutoComplete',
|
name: 'AutoComplete',
|
||||||
|
extends: BaseComponent,
|
||||||
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
|
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
|
||||||
props: {
|
props: {
|
||||||
modelValue: null,
|
modelValue: null,
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Plugin } from 'vue';
|
import { Plugin } from 'vue';
|
||||||
import { AccordionPassThroughOptions } from '../accordion';
|
import { AccordionPassThroughOptions } from '../accordion';
|
||||||
import { AccordionTabPassThroughOptions } from '../accordiontab';
|
import { AccordionTabPassThroughOptions } from '../accordiontab';
|
||||||
|
import { AutoCompletePassThroughOptions } from '../autocomplete';
|
||||||
import { AvatarPassThroughOptions } from '../avatar';
|
import { AvatarPassThroughOptions } from '../avatar';
|
||||||
import { BadgePassThroughOptions } from '../badge';
|
import { BadgePassThroughOptions } from '../badge';
|
||||||
import { BlockUIPassThroughOptions } from '../blockui';
|
import { BlockUIPassThroughOptions } from '../blockui';
|
||||||
|
@ -69,6 +70,7 @@ interface PrimeVueZIndexOptions {
|
||||||
interface PrimeVuePTOptions {
|
interface PrimeVuePTOptions {
|
||||||
accordion?: AccordionPassThroughOptions;
|
accordion?: AccordionPassThroughOptions;
|
||||||
accordiontab?: AccordionTabPassThroughOptions;
|
accordiontab?: AccordionTabPassThroughOptions;
|
||||||
|
autocomplete?: AutoCompletePassThroughOptions;
|
||||||
avatar?: AvatarPassThroughOptions;
|
avatar?: AvatarPassThroughOptions;
|
||||||
badge?: BadgePassThroughOptions;
|
badge?: BadgePassThroughOptions;
|
||||||
blockui?: BlockUIPassThroughOptions;
|
blockui?: BlockUIPassThroughOptions;
|
||||||
|
|
Loading…
Reference in New Issue