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

refactor: #7090 for CascadeSelect

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

17
packages/primevue/src/cascadeselect/CascadeSelect.vue
View File

@ -16,7 +16,7 @@
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
aria-haspopup="tree" aria-haspopup="tree"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="id + '_tree'" :aria-controls="$id + '_tree'"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined" :aria-invalid="invalid || undefined"
@focus="onFocus" @focus="onFocus"
@ -59,10 +59,10 @@
<slot name="header" :value="d_value" :options="options" /> <slot name="header" :value="d_value" :options="options" />
<div :class="cx('listContainer')" v-bind="ptm('listContainer')"> <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<CascadeSelectSub <CascadeSelectSub
:id="id + '_tree'" :id="$id + '_tree'"
role="tree" role="tree"
aria-orientation="horizontal" aria-orientation="horizontal"
:selectId="id" :selectId="$id"
:focusedOptionId="focused ? focusedOptionId : undefined" :focusedOptionId="focused ? focusedOptionId : undefined"
:options="processedOptions" :options="processedOptions"
:activeOptionPath="activeOptionPath" :activeOptionPath="activeOptionPath"
@ -96,7 +96,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, isPrintableCharacter, isString, resolveFieldData } from '@primeuix/utils/object'; import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, isString, 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 AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
@ -120,7 +120,6 @@ export default {
searchValue: null, searchValue: null,
data() { data() {
return { return {
id: this.$attrs.id,
clicked: false, clicked: false,
focused: false, focused: false,
focusedOptionInfo: { index: -1, level: 0, parentKey: '' }, focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
@ -133,15 +132,11 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
options() { options() {
this.autoUpdateModel(); this.autoUpdateModel();
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel(); this.autoUpdateModel();
this.bindMatchMediaListener(); this.bindMatchMediaListener();
}, },
@ -758,7 +753,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) {
@ -853,7 +848,7 @@ export default {
return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null; return this.focusedOptionInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
}, },
isClearIconVisible() { isClearIconVisible() {
return this.showClear && this.d_value != null && isNotEmpty(this.options); return this.showClear && this.d_value != null && isNotEmpty(this.options);