refactor: #7090 for ContextMenu

pull/7064/merge
Mert Sincan 2025-01-14 11:10:47 +00:00
parent e4d4d5cdcf
commit 6148817917
1 changed files with 4 additions and 10 deletions

View File

@ -4,14 +4,14 @@
<div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="ptmi('root')"> <div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="ptmi('root')">
<ContextMenuSub <ContextMenuSub
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="$id + '_list'"
:class="cx('rootList')" :class="cx('rootList')"
role="menubar" role="menubar"
:root="true" :root="true"
:tabindex="tabindex" :tabindex="tabindex"
aria-orientation="vertical" aria-orientation="vertical"
:aria-activedescendant="focused ? focusedItemIdx : undefined" :aria-activedescendant="focused ? focusedItemIdx : undefined"
:menuId="id" :menuId="$id"
:focusedItemId="focused ? focusedItemIdx : undefined" :focusedItemId="focused ? focusedItemIdx : undefined"
:items="processedItems" :items="processedItems"
:templates="$slots" :templates="$slots"
@ -38,7 +38,6 @@
import { addStyle, findSingle, focus, getHiddenElementOuterHeight, getHiddenElementOuterWidth, getViewport, isTouchDevice } from '@primeuix/utils/dom'; import { addStyle, findSingle, focus, getHiddenElementOuterHeight, getHiddenElementOuterWidth, getViewport, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object'; import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseContextMenu from './BaseContextMenu.vue'; import BaseContextMenu from './BaseContextMenu.vue';
import ContextMenuSub from './ContextMenuSub.vue'; import ContextMenuSub from './ContextMenuSub.vue';
@ -59,7 +58,6 @@ 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: [],
@ -70,9 +68,6 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (isNotEmpty(newPath)) { if (isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -84,7 +79,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener(); this.bindMatchMediaListener();
if (this.global) { if (this.global) {
@ -579,7 +573,7 @@ export default {
} }
}, },
scrollInView(index = -1) { scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemIdx; const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemIdx;
const element = findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
@ -624,7 +618,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
focusedItemIdx() { focusedItemIdx() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; return this.focusedItemInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
} }
}, },
components: { components: {