vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5681, #5682, #5683 - Fo AutoComplete

pull/5701/head
tugcekucukoglu 2024-05-06 16:11:02 +03:00
parent e7adb8e94a
commit 3cc675e50f
3 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -170,13 +170,17 @@ export interface AutoCompletePassThroughOptions {
*/ */
inputChip?: AutoCompletePassThroughOptionType; inputChip?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the loading icon's DOM element. * Used to pass attributes to the loader's DOM element.
*/ */
loadingIcon?: AutoCompletePassThroughOptionType; loader?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the dropdown button component. * Used to pass attributes to the dropdown's DOM element.
*/ */
dropdownButton?: AutoCompletePassThroughOptionType; dropdown?: AutoCompletePassThroughOptionType;
/**
* Used to pass attributes to the dropdown icon's DOM element.
*/
dropdownIcon?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the panel's DOM element. * Used to pass attributes to the panel's DOM element.
*/ */
@ -191,13 +195,13 @@ export interface AutoCompletePassThroughOptions {
*/ */
list?: AutoCompletePassThroughOptionType; list?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the item group's DOM element. * Used to pass attributes to the option group's DOM element.
*/ */
itemGroup?: AutoCompletePassThroughOptionType; optionGroup?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the item's DOM element. * Used to pass attributes to the option's DOM element.
*/ */
item?: AutoCompletePassThroughOptionType; option?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the empty message's DOM element. * Used to pass attributes to the empty message's DOM element.
*/ */
@ -433,9 +437,13 @@ export interface AutoCompleteProps {
dropdownClass?: string | object | undefined; dropdownClass?: string | object | undefined;
/** /**
* Icon to display in loading state. * Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot. * @deprecated since v4.0. Use 'loader' slot.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/**
* Icon to display in loading state.
*/
loader?: string | undefined;
/** /**
* Icon to display in chip remove action. * Icon to display in chip remove action.
* @deprecated since v3.27.0. Use 'removetokenicon' slot. * @deprecated since v3.27.0. Use 'removetokenicon' slot.
@ -713,16 +721,27 @@ export interface AutoCompleteSlots {
removeCallback: (event: Event, index: number) => void; removeCallback: (event: Event, index: number) => void;
}): VNode[]; }): VNode[];
/** /**
* Custom loading icon template. * @deprecated since v4.0. Use 'loader' slot instead.
* Custom loader template.
*/ */
loadingicon(scope: { loadingicon(scope: {
/** /**
* Style class of the loading icon. * Style class of the loader.
*/ */
class: string; class: string;
}): VNode[]; }): VNode[];
/** /**
* Custom dropdown button template. * Custom loader template.
*/
loader(scope: {
/**
* Style class of the loader.
*/
class: string;
}): VNode[];
/**
* @deprecated since v4.0. Use 'dropdown' slot instead.
* Custom dropdown template.
*/ */
dropdownbutton(scope: { dropdownbutton(scope: {
/** /**
@ -731,6 +750,16 @@ export interface AutoCompleteSlots {
*/ */
toggleCallback: (event: Event) => void; toggleCallback: (event: Event) => void;
}): VNode[]; }): VNode[];
/**
* Custom dropdown template.
*/
dropdown(scope: {
/**
* Toggle function.
* @param {Event} event - Browser event
*/
toggleCallback: (event: Event) => void;
}): VNode[];
} }
/** /**

24
components/lib/autocomplete/AutoComplete.vue
View File

@ -5,7 +5,7 @@
ref="focusInput" ref="focusInput"
:id="inputId" :id="inputId"
type="text" type="text"
:class="[cx('input'), inputClass]" :class="[cx('pcInput'), inputClass]"
:style="inputStyle" :style="inputStyle"
:value="inputValue" :value="inputValue"
:placeholder="placeholder" :placeholder="placeholder"
@ -28,7 +28,7 @@
@input="onInput" @input="onInput"
@change="onChange" @change="onChange"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('input')" :pt="ptm('pcInput')"
/> />
<ul <ul
v-if="multiple" v-if="multiple"
@ -93,25 +93,25 @@
/> />
</li> </li>
</ul> </ul>
<slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon"> <slot v-if="searching || loading" :class="cx('loader')" :name="$slots.loader ? 'loader' : 'loadingicon'">
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" /> <i v-if="loader || loadingIcon" :class="['pi-spin', cx('loader'), loader, loadingIcon]" aria-hidden="true" v-bind="ptm('loader')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" v-bind="ptm('loader')" />
</slot> </slot>
<slot name="dropdownbutton" :toggleCallback="(event) => onDropdownClick(event)"> <slot :name="$slots.dropdown ? 'dropdown' : 'dropdownbutton'" :toggleCallback="(event) => onDropdownClick(event)">
<button <button
v-if="dropdown" v-if="dropdown"
ref="dropdownButton" ref="dropdownButton"
type="button" type="button"
:class="[cx('dropdownButton'), dropdownClass]" :class="[cx('dropdown'), dropdownClass]"
:disabled="disabled" :disabled="disabled"
aria-haspopup="listbox" aria-haspopup="listbox"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="panelId" :aria-controls="panelId"
@click="onDropdownClick" @click="onDropdownClick"
v-bind="ptm('dropdownButton')" v-bind="ptm('dropdown')"
> >
<slot name="dropdownicon" :class="dropdownIcon"> <slot name="dropdownicon" :class="dropdownIcon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButtonIcon')" /> <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownIcon')" />
</slot> </slot>
</button> </button>
</slot> </slot>
@ -135,7 +135,7 @@
<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" :aria-label="listAriaLabel" v-bind="ptm('list')"> <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" 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" :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
@ -143,7 +143,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, i, getItemOptions })" :class="cx('option', { option, i, getItemOptions })"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)" :aria-selected="isSelected(option)"
@ -155,7 +155,7 @@
:data-p-highlight="isSelected(option)" :data-p-highlight="isSelected(option)"
:data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')" v-bind="getPTOptions(option, getItemOptions, i, 'option')"
> >
<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>

10
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -232,7 +232,7 @@ const classes = {
'p-autocomplete-open': instance.overlayVisible 'p-autocomplete-open': instance.overlayVisible
} }
], ],
input: 'p-autocomplete-input', pcInput: 'p-autocomplete-input',
inputMultiple: ({ props, instance }) => [ inputMultiple: ({ props, instance }) => [
'p-autocomplete-input-multiple', 'p-autocomplete-input-multiple',
{ {
@ -248,8 +248,8 @@ const classes = {
chipLabel: 'p-autocomplete-chip-label', chipLabel: 'p-autocomplete-chip-label',
chipIcon: 'p-autocomplete-chip-icon', chipIcon: 'p-autocomplete-chip-icon',
inputChip: 'p-autocomplete-input-chip', inputChip: 'p-autocomplete-input-chip',
loadingIcon: 'p-autocomplete-loader', loader: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown', dropdown: 'p-autocomplete-dropdown',
panel: ({ instance }) => [ panel: ({ instance }) => [
'p-autocomplete-overlay p-component', 'p-autocomplete-overlay p-component',
{ {
@ -257,8 +257,8 @@ const classes = {
} }
], ],
list: 'p-autocomplete-list', list: 'p-autocomplete-list',
itemGroup: 'p-autocomplete-option-group', optionGroup: 'p-autocomplete-option-group',
item: ({ instance, option, i, getItemOptions }) => [ option: ({ instance, option, i, getItemOptions }) => [
'p-autocomplete-option', 'p-autocomplete-option',
{ {
'p-autocomplete-option-selected': instance.isSelected(option), 'p-autocomplete-option-selected': instance.isSelected(option),