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

refactor: #7090 for AutoComplete

pull/7064/merge
Mert Sincan 2025-01-14 11:10:24 +00:00
parent e8105b8971
commit c7f74805d0
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -49,7 +49,7 @@
<li <li
v-for="(option, i) of d_value" v-for="(option, i) of d_value"
:key="`${i}_${getOptionLabel(option)}`" :key="`${i}_${getOptionLabel(option)}`"
:id="id + '_multiple_option_' + i" :id="$id + '_multiple_option_' + i"
:class="cx('chipItem', { i })" :class="cx('chipItem', { i })"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
@ -84,7 +84,7 @@
aria-haspopup="listbox" aria-haspopup="listbox"
aria-autocomplete="list" aria-autocomplete="list"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="id + '_list'" :aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined" :aria-invalid="invalid || undefined"
@focus="onFocus" @focus="onFocus"
@ -128,11 +128,11 @@
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')"> <div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')"> <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<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 <li
v-if="isOptionGroup(option)" v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)" :id="$id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }" :style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')" :class="cx('optionGroup')"
role="option" role="option"
@ -142,7 +142,7 @@
</li> </li>
<li <li
v-else v-else
: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('option', { option, i, getItemOptions })" :class="cx('option', { option, i, getItemOptions })"
@ -186,7 +186,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom'; import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object'; import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
import Chip from 'primevue/chip'; import Chip from 'primevue/chip';
@ -215,7 +215,6 @@ export default {
startRangeIndex: -1, startRangeIndex: -1,
data() { data() {
return { return {
id: this.$attrs.id,
clicked: false, clicked: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
@ -225,9 +224,6 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
suggestions() { suggestions() {
if (this.searching) { if (this.searching) {
this.show(); this.show();
@ -240,7 +236,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel(); this.autoUpdateModel();
}, },
updated() { updated() {
@ -930,7 +925,7 @@ export default {
}, },
scrollInView(index = -1) { scrollInView(index = -1) {
this.$nextTick(() => { this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
@ -1044,10 +1039,10 @@ export default {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
}, },
focusedMultipleOptionId() { focusedMultipleOptionId() {
return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null; return this.focusedMultipleOptionIndex !== -1 ? `${this.$id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
}, },
ariaSetSize() { ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length; return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
@ -1056,7 +1051,7 @@ export default {
return !this.virtualScrollerOptions; return !this.virtualScrollerOptions;
}, },
panelId() { panelId() {
return this.id + '_panel'; return this.$id + '_panel';
} }
}, },
components: { components: {