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

Refactor #3965 - For AutoComplete

pull/3997/head
Tuğçe Küçükoğlu 2023-05-23 15:44:11 +03:00
parent 862b35f8e8
commit 8c397592ea
3 changed files with 378 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,7 +108,7 @@ export interface AutoCompletePassThroughOptions {
*/
container?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the token' DOM element.
* Uses to pass attributes to the token's DOM element.
*/
token?: AutoCompletePassThroughOptionType;
/**
@ -119,6 +119,10 @@ export interface AutoCompletePassThroughOptions {
* Uses to pass attributes to the remove token icon's DOM element.
*/
removeTokenIcon?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the input token's DOM element.
*/
inputToken?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
*/
@ -426,6 +430,11 @@ export interface AutoCompleteProps {
* @type {AutoCompletePassThroughOptions}
*/
pt?: AutoCompletePassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
@ -561,7 +570,12 @@ export interface AutoCompleteSlots {
/**
* Custom dropdown icon template.
*/
dropdownicon(): VNode[];
dropdownicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom remove token icon template in multiple mode.
*/

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

@ -1,12 +1,12 @@
<template>
<div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" data-pc-name="autocomplete" data-pc-section="root" v-bind="ptm('root')">
<input
v-if="!multiple"
ref="focusInput"
:id="inputId"
type="text"
:class="cx('input')"
:style="inputStyle"
:class="inputStyleClass"
:value="inputValue"
:placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1"
@ -25,12 +25,13 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
<ul
v-if="multiple"
ref="multiContainer"
:class="multiContainerClass"
:class="cx('container')"
tabindex="-1"
role="listbox"
aria-orientation="horizontal"
@ -38,28 +39,30 @@
@focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown"
data-pc-section="container"
v-bind="ptm('container')"
>
<li
v-for="(option, i) of modelValue"
:key="i"
:id="id + '_multiple_option_' + i"
:class="['p-autocomplete-token', { 'p-focus': focusedMultipleOptionIndex === i }]"
:class="cx('token', { i })"
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
data-pc-section="token"
v-bind="ptm('token')"
>
<slot name="chip" :value="option">
<span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')" data-pc-section="tokenlabel">{{ getOptionLabel(option) }}</span>
</slot>
<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" v-bind="ptm('removeTokenIcon')" />
<slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="cx(removeTokenIcon)" @click="removeOption($event, i)" aria-hidden="true" data-pc-section="removetokenicon" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>
<li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
<li :class="cx('inputToken')" role="option" data-pc-section="inputtoken" v-bind="ptm('inputToken')">
<input
ref="focusInput"
:id="inputId"
@ -83,22 +86,23 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
</li>
</ul>
<slot v-if="searching" name="loadingicon">
<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" v-bind="ptm('loadingIcon')" />
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon')]" aria-hidden="true" data-pc-section="loaidngicon" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
</slot>
<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')">
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="cx('dropdownButton')" :disabled="disabled" aria-hidden="true" data-pc-section="dropdownbutton" @click="onDropdownClick" :pt="ptm('dropdownButton')">
<template #icon>
<slot name="dropdownicon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
<slot name="dropdownicon" :class="cx('dropdownIcon')">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="cx('dropdownIcon')" data-pc-section="dropdownbuttonicon" v-bind="ptm('dropdownButton')['icon']" />
</slot>
</template>
</Button>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
<span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddensearchresult" v-bind="ptm('hiddenSearchResult')">
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
@ -106,23 +110,25 @@
<div
v-if="overlayVisible"
:ref="overlayRef"
:class="panelStyleClass"
:class="cx('panel')"
:style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
data-pc-section="panel"
v-bind="{ ...panelProps, ...ptm('panel') }"
>
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
<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 }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', 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" data-pc-section="list" 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-autocomplete-item-group"
:class="cx('itemGroup')"
role="option"
data-pc-section="itemgroup"
v-bind="ptm('itemGroup')"
>
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
@ -132,7 +138,7 @@
:id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="['p-autocomplete-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
:class="cx('item', { option, i, getItemOptions })"
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)"
@ -141,6 +147,10 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
data-pc-section="item"
:data-p-highlight="isSelected(option)"
:data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
>
<slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
@ -148,7 +158,7 @@
<!--TODO: Deprecated since v3.16.0-->
</li>
</template>
<li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
<li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" data-pc-section="emptymessage" v-bind="ptm('emptyMessage')">
<slot name="empty">{{ searchResultMessageText }}</slot>
</li>
</ul>
@ -158,7 +168,7 @@
</template>
</VirtualScroller>
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddenselectedmessage" v-bind="ptm('hiddenSelectedMessage')">
{{ selectedMessageText }}
</span>
</div>
@ -168,7 +178,6 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import SpinnerIcon from 'primevue/icons/spinner';
@ -178,168 +187,12 @@ import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import BaseAutoComplete from './BaseAutoComplete.vue';
export default {
name: 'AutoComplete',
extends: BaseComponent,
extends: BaseAutoComplete,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
props: {
modelValue: null,
suggestions: {
type: Array,
default: null
},
field: {
// TODO: Deprecated since v3.16.0
type: [String, Function],
default: null
},
optionLabel: null,
optionDisabled: null,
optionGroupLabel: null,
optionGroupChildren: null,
scrollHeight: {
type: String,
default: '200px'
},
dropdown: {
type: Boolean,
default: false
},
dropdownMode: {
type: String,
default: 'blank'
},
autoHighlight: {
// TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: null
},
dataKey: {
type: String,
default: null
},
minLength: {
type: Number,
default: 1
},
delay: {
type: Number,
default: 300
},
appendTo: {
type: String,
default: 'body'
},
forceSelection: {
type: Boolean,
default: false
},
completeOnFocus: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null
},
inputStyle: {
type: Object,
default: null
},
inputClass: {
type: [String, Object],
default: null
},
inputProps: {
type: null,
default: null
},
panelStyle: {
type: Object,
default: null
},
panelClass: {
type: [String, Object],
default: null
},
panelProps: {
type: null,
default: null
},
dropdownIcon: {
type: String,
default: undefined
},
dropdownClass: {
type: [String, Object],
default: null
},
loadingIcon: {
type: String,
default: undefined
},
removeTokenIcon: {
type: String,
default: undefined
},
virtualScrollerOptions: {
type: Object,
default: null
},
autoOptionFocus: {
type: Boolean,
default: true
},
selectOnFocus: {
type: Boolean,
default: false
},
searchLocale: {
type: String,
default: undefined
},
searchMessage: {
type: String,
default: null
},
selectionMessage: {
type: String,
default: null
},
emptySelectionMessage: {
type: String,
default: null
},
emptySearchMessage: {
type: String,
default: null
},
tabindex: {
type: Number,
default: 0
},
'aria-label': {
type: String,
default: null
},
'aria-labelledby': {
type: String,
default: null
}
},
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
@ -818,6 +671,8 @@ export default {
},
onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay();
},
onOverlayAfterEnter() {
@ -1027,42 +882,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-autocomplete p-component p-inputwrapper',
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-autocomplete-dd': this.dropdown,
'p-autocomplete-multiple': this.multiple,
'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
'p-inputwrapper-focus': this.focused,
'p-overlay-open': this.overlayVisible
}
];
},
inputStyleClass() {
return [
'p-autocomplete-input p-inputtext p-component',
this.inputClass,
{
'p-autocomplete-dd-input': this.dropdown
}
];
},
multiContainerClass() {
return ['p-autocomplete-multiple-container p-component p-inputtext'];
},
panelStyleClass() {
return [
'p-autocomplete-panel p-component',
this.panelClass,
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}
];
},
visibleOptions() {
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
},
@ -1129,102 +948,3 @@ export default {
}
};
</script>
<style>
.p-autocomplete {
display: inline-flex;
position: relative;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
</style>

328
components/lib/autocomplete/BaseAutoComplete.vue Normal file
View File

@ -0,0 +1,328 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const styles = `
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: ({ instance, props }) => [
'p-autocomplete p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
'p-inputwrapper-focus': instance.focused,
'p-overlay-open': instance.overlayVisible
}
],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', props.inputClass, { 'p-autocomplete-dd-input': props.dropdown }],
container: 'p-autocomplete-multiple-container p-component p-inputtext',
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
tokenLabel: 'p-autocomplete-token-label',
removeTokenIcon: ({ props }) => [props.removeTokenIcon, 'p-autocomplete-token-icon'],
inputToken: 'p-autocomplete-input-token',
loadingIcon: ({ props }) => [props.loadingIcon, 'p-autocomplete-loader'],
dropdownButton: ({ props }) => ['p-autocomplete-dropdown', props.dropdownClass],
dropdownIcon: ({ props }) => props.dropdownIcon,
hiddenSearchResult: 'p-hidden-accessible',
panel: ({ instance, props }) => [
'p-autocomplete-panel p-component',
props.panelClass,
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
list: 'p-autocomplete-items',
itemGroup: 'p-autocomplete-item-group',
item: ({ instance, option, i, getItemOptions }) => [
'p-autocomplete-item',
{
'p-highlight': instance.isSelected(option),
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-autocomplete-empty-message',
hiddenSelectedMessage: 'p-hidden-accessible'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
export default {
name: 'BaseAutoComplete',
extends: BaseComponent,
props: {
modelValue: null,
suggestions: {
type: Array,
default: null
},
field: {
// TODO: Deprecated since v3.16.0
type: [String, Function],
default: null
},
optionLabel: null,
optionDisabled: null,
optionGroupLabel: null,
optionGroupChildren: null,
scrollHeight: {
type: String,
default: '200px'
},
dropdown: {
type: Boolean,
default: false
},
dropdownMode: {
type: String,
default: 'blank'
},
autoHighlight: {
// TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: null
},
dataKey: {
type: String,
default: null
},
minLength: {
type: Number,
default: 1
},
delay: {
type: Number,
default: 300
},
appendTo: {
type: String,
default: 'body'
},
forceSelection: {
type: Boolean,
default: false
},
completeOnFocus: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null
},
inputStyle: {
type: Object,
default: null
},
inputClass: {
type: [String, Object],
default: null
},
inputProps: {
type: null,
default: null
},
panelStyle: {
type: Object,
default: null
},
panelClass: {
type: [String, Object],
default: null
},
panelProps: {
type: null,
default: null
},
dropdownIcon: {
type: String,
default: undefined
},
dropdownClass: {
type: [String, Object],
default: null
},
loadingIcon: {
type: String,
default: undefined
},
removeTokenIcon: {
type: String,
default: undefined
},
virtualScrollerOptions: {
type: Object,
default: null
},
autoOptionFocus: {
type: Boolean,
default: true
},
selectOnFocus: {
type: Boolean,
default: false
},
searchLocale: {
type: String,
default: undefined
},
searchMessage: {
type: String,
default: null
},
selectionMessage: {
type: String,
default: null
},
emptySelectionMessage: {
type: String,
default: null
},
emptySearchMessage: {
type: String,
default: null
},
tabindex: {
type: Number,
default: 0
},
'aria-label': {
type: String,
default: null
},
'aria-labelledby': {
type: String,
default: null
}
},
css: {
classes,
inlineStyles
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>