Refactor #3965 - For AutoComplete
Tuğçe Küçükoğlu
parent
862b35f8e8
commit
8c397592ea
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue