Fixed #3558 - Unique values created in components are set incorrectly.

pull/3567/head
mertsincan 2023-01-19 04:01:03 +00:00
parent 86a34cde87
commit 2da56f7ed9
18 changed files with 120 additions and 52 deletions

View File

@ -78,14 +78,21 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
d_activeIndex: this.activeIndex d_activeIndex: this.activeIndex
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeIndex(newValue) { activeIndex(newValue) {
this.d_activeIndex = newValue; this.d_activeIndex = newValue;
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
isAccordionTab(child) { isAccordionTab(child) {
return child.type.name === 'AccordionTab'; return child.type.name === 'AccordionTab';
@ -255,9 +262,6 @@ export default {
return tabs; return tabs;
}, []); }, []);
},
id() {
return this.$attrs.id || UniqueComponentId();
} }
}, },
directives: { directives: {

View File

@ -316,6 +316,7 @@ export default {
dirty: false, dirty: false,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
focusedMultipleOptionIndex: -1, focusedMultipleOptionIndex: -1,
@ -324,6 +325,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
suggestions() { suggestions() {
if (this.searching) { if (this.searching) {
ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide(); ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide();
@ -335,6 +339,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel(); this.autoUpdateModel();
}, },
updated() { updated() {
@ -1056,9 +1062,6 @@ export default {
selectedMessageText() { selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
}, },

View File

@ -192,6 +192,7 @@ export default {
focusOnHover: false, focusOnHover: false,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedOptionInfo: { index: -1, level: 0, parentKey: '' }, focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
activeOptionPath: [], activeOptionPath: [],
@ -200,11 +201,16 @@ 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();
}, },
beforeUnmount() { beforeUnmount() {
@ -846,9 +852,6 @@ export default {
selectedMessageText() { selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null; return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
} }

View File

@ -89,6 +89,7 @@ export default {
list: null, list: null,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' }, focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [], activeItemPath: [],
@ -97,6 +98,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) { if (ObjectUtils.isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -122,6 +126,8 @@ export default {
this.container = null; this.container = null;
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.global) { if (this.global) {
this.bindDocumentContextMenuListener(); this.bindDocumentContextMenuListener();
} }
@ -611,9 +617,6 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedItemId() { focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
} }

View File

@ -103,11 +103,20 @@ export default {
}, },
data() { data() {
return { return {
id: this.menuId,
currentIndex: -3, currentIndex: -3,
focused: false, focused: false,
focusedOptionIndex: -1 focusedOptionIndex: -1
}; };
}, },
watch: {
menuId(newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
getItemId(index) { getItemId(index) {
return `${this.id}_${index}`; return `${this.id}_${index}`;
@ -263,9 +272,6 @@ export default {
} }
}, },
computed: { computed: {
id() {
return this.menuId || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
} }

View File

@ -308,6 +308,7 @@ export default {
focusOnHover: false, focusOnHover: false,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
filterValue: null, filterValue: null,
@ -315,6 +316,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
modelValue() { modelValue() {
this.isModelValueChanged = true; this.isModelValueChanged = true;
}, },
@ -323,6 +327,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel(); this.autoUpdateModel();
}, },
updated() { updated() {
@ -1025,9 +1031,6 @@ export default {
selectedMessageText() { selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
}, },

View File

@ -185,17 +185,23 @@ export default {
focusOnHover: false, focusOnHover: false,
data() { data() {
return { return {
id: this.$attrs.id,
filterValue: null, filterValue: null,
focused: false, focused: false,
focusedOptionIndex: -1 focusedOptionIndex: -1
}; };
}, },
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();
}, },
methods: { methods: {
@ -733,9 +739,6 @@ export default {
selectedMessageText() { selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
}, },

View File

@ -79,6 +79,7 @@ export default {
searchValue: null, searchValue: null,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedItemInfo: { index: -1, key: '', parentKey: '' }, focusedItemInfo: { index: -1, key: '', parentKey: '' },
activeItem: null, activeItem: null,
@ -86,6 +87,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItem(newItem) { activeItem(newItem) {
if (ObjectUtils.isNotEmpty(newItem)) { if (ObjectUtils.isNotEmpty(newItem)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -96,6 +100,9 @@ export default {
} }
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
beforeUnmount() { beforeUnmount() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindResizeListener(); this.unbindResizeListener();
@ -603,9 +610,6 @@ export default {
vertical() { vertical() {
return this.orientation === 'vertical'; return this.orientation === 'vertical';
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedItemId() { focusedItemId() {
return ObjectUtils.isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null; return ObjectUtils.isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null;
} }

View File

@ -84,12 +84,18 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
overlayVisible: false, overlayVisible: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
selectedOptionIndex: -1 selectedOptionIndex: -1
}; };
}, },
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
target: null, target: null,
outsideClickListener: null, outsideClickListener: null,
scrollHandler: null, scrollHandler: null,
@ -97,6 +103,8 @@ export default {
container: null, container: null,
list: null, list: null,
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (!this.popup) { if (!this.popup) {
this.bindResizeListener(); this.bindResizeListener();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -389,9 +397,6 @@ export default {
} }
]; ];
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
} }

View File

@ -80,6 +80,7 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
mobileActive: false, mobileActive: false,
focused: false, focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' }, focusedItemInfo: { index: -1, level: 0, parentKey: '' },
@ -88,6 +89,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) { if (ObjectUtils.isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -101,6 +105,9 @@ export default {
outsideClickListener: null, outsideClickListener: null,
container: null, container: null,
menubar: null, menubar: null,
mounted() {
this.id = this.id || UniqueComponentId();
},
beforeUnmount() { beforeUnmount() {
this.mobileActive = false; this.mobileActive = false;
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
@ -593,9 +600,6 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedItemId() { focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
} }

View File

@ -328,6 +328,7 @@ export default {
focusOnHover: false, focusOnHover: false,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
headerCheckboxFocused: false, headerCheckboxFocused: false,
@ -336,11 +337,16 @@ 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();
}, },
beforeUnmount() { beforeUnmount() {
@ -1163,9 +1169,6 @@ export default {
selectedMessageText() { selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
}, },

View File

@ -120,11 +120,17 @@ export default {
list: null, list: null,
data() { data() {
return { return {
id: this.$attrs.id,
d_selection: this.selection, d_selection: this.selection,
focused: false, focused: false,
focusedOptionIndex: -1 focusedOptionIndex: -1
}; };
}, },
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
beforeUnmount() { beforeUnmount() {
this.destroyStyle(); this.destroyStyle();
}, },
@ -135,6 +141,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.responsive) { if (this.responsive) {
this.createStyle(); this.createStyle();
} }
@ -550,9 +558,6 @@ export default {
} }
]; ];
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
attributeSelector() { attributeSelector() {
return UniqueComponentId(); return UniqueComponentId();
}, },

View File

@ -75,8 +75,8 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newVal) { '$attrs.id': function (newValue) {
this.id = newVal || UniqueComponentId(); this.id = newValue || UniqueComponentId();
} }
}, },
mounted() { mounted() {

View File

@ -201,6 +201,7 @@ export default {
styleElement: null, styleElement: null,
data() { data() {
return { return {
id: this.$attrs.id,
d_selection: this.selection, d_selection: this.selection,
focused: { focused: {
sourceList: false, sourceList: false,
@ -210,6 +211,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
selection(newValue) { selection(newValue) {
this.d_selection = newValue; this.d_selection = newValue;
} }
@ -225,6 +229,8 @@ export default {
this.destroyStyle(); this.destroyStyle();
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.responsive) { if (this.responsive) {
this.createStyle(); this.createStyle();
} }
@ -797,10 +803,10 @@ export default {
}, },
computed: { computed: {
idSource() { idSource() {
return this.$attrs.id || UniqueComponentId(); return `${this.id}_source`;
}, },
idTarget() { idTarget() {
return this.$attrs.id || UniqueComponentId(); return `${this.id}_target`;
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;

View File

@ -77,9 +77,18 @@ export default {
}, },
data() { data() {
return { return {
name: this.$attrs.name,
focusedOptionIndex: -1 focusedOptionIndex: -1
}; };
}, },
watch: {
'$attrs.name': function (newValue) {
this.name = newValue || UniqueComponentId();
}
},
mounted() {
this.name = this.name || UniqueComponentId();
},
methods: { methods: {
onOptionClick(event, value) { onOptionClick(event, value) {
if (!this.readonly && !this.disabled) { if (!this.readonly && !this.disabled) {
@ -133,9 +142,6 @@ export default {
}, },
offIconClass() { offIconClass() {
return ['p-rating-icon', this.offIcon]; return ['p-rating-icon', this.offIcon];
},
name() {
return this.$attrs.name || UniqueComponentId();
} }
} }
}; };

View File

@ -115,6 +115,7 @@ export default {
list: null, list: null,
data() { data() {
return { return {
id: this.$attrs.id,
d_visible: this.visible, d_visible: this.visible,
isItemClicked: false, isItemClicked: false,
focused: false, focused: false,
@ -122,11 +123,16 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
visible(newValue) { visible(newValue) {
this.d_visible = newValue; this.d_visible = newValue;
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.type !== 'linear') { if (this.type !== 'linear') {
const button = DomHandler.findSingle(this.container, '.p-speeddial-button'); const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item'); const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
@ -515,9 +521,6 @@ export default {
this.maskClass this.maskClass
]; ];
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
} }

View File

@ -108,12 +108,16 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
d_activeIndex: this.activeIndex, d_activeIndex: this.activeIndex,
isPrevButtonDisabled: true, isPrevButtonDisabled: true,
isNextButtonDisabled: false isNextButtonDisabled: false
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeIndex(newValue) { activeIndex(newValue) {
this.d_activeIndex = newValue; this.d_activeIndex = newValue;
@ -121,6 +125,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.updateInkBar(); this.updateInkBar();
this.scrollable && this.updateButtonState(); this.scrollable && this.updateButtonState();
}, },
@ -358,9 +364,6 @@ export default {
}, },
nextButtonAriaLabel() { nextButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
},
id() {
return this.$attrs.id || UniqueComponentId();
} }
}, },
directives: { directives: {

View File

@ -93,6 +93,7 @@ export default {
searchValue: null, searchValue: null,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' }, focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [], activeItemPath: [],
@ -101,6 +102,9 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (!this.popup) { if (!this.popup) {
if (ObjectUtils.isNotEmpty(newPath)) { if (ObjectUtils.isNotEmpty(newPath)) {
@ -113,6 +117,9 @@ export default {
} }
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
beforeUnmount() { beforeUnmount() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindResizeListener(); this.unbindResizeListener();
@ -632,9 +639,6 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedItemId() { focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
} }